Tạo thanh ứng dụng trên cùng động

Hướng dẫn này giải thích cách tạo thanh ứng dụng trên cùng động trong Compose, thay đổi các lựa chọn khi chọn mục trong danh sách. Bạn có thể sửa đổi tiêu đề và các thao tác của thanh ứng dụng trên cùng dựa trên trạng thái lựa chọn.

Triển khai hành vi của thanh ứng dụng trên cùng động

Mã này xác định một hàm composable cho thanh ứng dụng trên cùng, thay đổi dựa trên lựa chọn mục:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Các điểm chính về mã

  • AppBarSelectionActions chấp nhận một Set chỉ mục mục đã chọn.
  • topBarText thay đổi tuỳ thuộc vào việc bạn có chọn mục nào hay không.
    • Khi bạn chọn các mục, văn bản mô tả số lượng mục đã chọn xuất hiện trong TopAppBar.
    • Nếu bạn không chọn mục nào, topBarText sẽ là "List of items" (Danh sách mục).
  • Khối actions xác định các thao tác mà bạn hiển thị trong thanh ứng dụng trên cùng. Nếu hasSelection là true, thì biểu tượng chia sẻ sẽ xuất hiện sau văn bản.
  • Lambda onClick của IconButton xử lý thao tác chia sẻ khi bạn nhấp vào biểu tượng.

Kết quả

Thanh ứng dụng linh hoạt ở trên cùng hiển thị văn bản Đã chọn 3 mục cùng với biểu tượng chia sẻ. Văn bản và biểu tượng này chỉ xuất hiện khi các mục được chọn
Hình 1. Thanh ứng dụng trên cùng động có văn bản và biểu tượng chia sẻ chỉ xuất hiện khi chọn các mục.

Tích hợp danh sách có thể chọn vào thanh ứng dụng trên cùng động

Ví dụ này minh hoạ cách thêm danh sách có thể chọn vào thanh ứng dụng trên cùng động:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Các điểm chính về mã

  • Thanh trên cùng cập nhật dựa trên số lượng mục trong danh sách mà bạn chọn.
  • selectedItems giữ tập hợp chỉ mục mục đã chọn.
  • AppBarMultiSelectionExample sử dụng Scaffold để cấu trúc màn hình.
    • topBar = { AppBarSelectionActions(selectedItems) } đặt thành phần kết hợp AppBarSelectionActions làm thanh ứng dụng trên cùng. AppBarSelectionActions nhận trạng thái selectedItems.
  • LazyColumn hiển thị các mục trong danh sách dọc, chỉ hiển thị các mục có thể nhìn thấy trên màn hình.
  • ListItemSelectable đại diện cho một mục trong danh sách có thể chọn.
    • combinedClickable cho phép xử lý cả thao tác nhấp và nhấp giữ để chọn mục. Thao tác nhấp thực hiện một hành động, trong khi thao tác nhấp giữ một mục sẽ chuyển đổi trạng thái lựa chọn của mục đó.

Kết quả

Thanh ứng dụng động ở trên cùng hiển thị văn bản Đã chọn 3 mục, theo sau là biểu tượng chia sẻ. Bên dưới, một danh sách cho thấy một số mục, với dấu đánh dấu bên cạnh 3 mục được chọn
Hình 2. Danh sách được tích hợp vào thanh ứng dụng trên cùng động với các mục cụ thể được chọn.

Tài nguyên khác