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 một thanh ứng dụng trên cùng động trong Compose để thay đổi các tuỳ chọn khi các mục được chọn trong danh sách. Bạn có thể sửa đổi tiêu đề và 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 động của thanh ứng dụng trên cùng

Mã này xác định một hàm có khả năng kết hợp 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

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

  • AppBarSelectionActions chấp nhận Set của các chỉ mục mục đã chọn.
  • topBarText thay đổi tuỳ thuộc vào việc có mục nào được chọn hay không.
    • Khi các mục được chọn, văn bản mô tả số lượng mục đã chọn sẽ xuất hiện trong TopAppBar.
    • Nếu không chọn mục nào, topBarText sẽ là "Danh sách mục".
  • Khối actions xác định các thao tác hiển thị trong thanh ứng dụng trên cùng. Nếu hasSelection là true, 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 người dùng nhấp vào biểu tượng.

Kết quả

Thanh ứng dụng trên cùng độ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 người dùng chọn các mục
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 các mục được chọn.

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(
        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 sẽ cập nhật dựa trên số lượng mục trong danh sách được chọn.
  • selectedItems chứa tập hợp các chỉ mục mục đã chọn.
  • AppBarMultiSelectionExample sử dụng Scaffold để tạo 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 theo chiều dọc, chỉ hiển thị các mục hiển thị trên màn hình.
  • ListItemSelectable biểu thị một mục danh sách có thể chọn.
    • combinedClickable cho phép xử lý cả thao tác nhấp và thao tác nhấn và giữ để chọn mục. Một lượt nhấp sẽ thực hiện một thao tác, trong khi thao tác nhấp và giữ vào một mục sẽ bật/tắt trạng thái lựa chọn của mục đó.

Kết quả

Thanh ứng dụng trên cùng độ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 là danh sách hiển thị một số mục, với dấu kiểm bên cạnh 3 mục được chọn
Hình 2. Một 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