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 linh động trong Compose, có thể 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à hành động 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 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 Set của các chỉ mục mục đã chọn.
• topBarText sẽ 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 sẽ xuất hiện trong TopAppBar.
  • Nếu bạn không chọn mục nào, thì topBarText sẽ là "Danh sách mục".
• Khối actions xác định các thao tác 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.
• Hàm lambda onClick của IconButton xử lý hành động chia sẻ khi bạn nhấp vào biểu tượng.

Kết quả

Hình 1. Thanh ứng dụng linh hoạt trên cù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(
        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 sẽ 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 các chỉ mục mục đã chọn.
• AppBarMultiSelectionExample sử dụng Scaffold để tạo cấu trúc cho 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ỉ cho thấy các mục hiển thị trên màn hình.
• ListItemSelectable đại diện cho một mục danh sách có thể chọn.
  • combinedClickable cho phép xử lý cả thao tác nhấp và nhấp và giữ để chọn mục. Thao tác nhấp sẽ thực hiện một hành động, trong khi thao tác nhấp và giữ một mục sẽ bật/tắt trạng thái lựa chọn của mục đó.

Kết quả

Hình 2. Danh sách được tích hợp vào thanh ứng dụng linh động trên cùng với các mục cụ thể được chọn.

Tài nguyên khác

• TopAppBar
• LazyColumn
• Scaffold