Nút phân đoạn

Sử dụng nút phân đoạn để cho phép người dùng chọn trong một nhóm các lựa chọn, cạnh nhau. Có hai loại nút phân đoạn:

• Nút chọn một mục: Cho phép người dùng chọn một mục.
• Nút chọn nhiều mục: Cho phép người dùng chọn từ 2 đến 5 mục. Đối với các lựa chọn phức tạp hơn hoặc có nhiều hơn 5 mục, hãy sử dụng khối.

Nền tảng API

Sử dụng bố cục SingleChoiceSegmentedButtonRow và MultiChoiceSegmentedButtonRow để tạo các nút được phân đoạn. Các bố cục này định vị và định kích thước SegmentedButtons một cách chính xác, đồng thời chia sẻ các tham số chính sau:

• space: Điều chỉnh mức độ chồng chéo giữa các nút.
• content: Chứa nội dung của hàng nút được phân đoạn, thường là một chuỗi SegmentedButton.

Tạo nút phân đoạn chọn một mục

Ví dụ này cho thấy cách tạo nút phân đoạn chọn một mục:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

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

• Khởi động biến selectedIndex bằng remember và mutableIntStateOf để theo dõi chỉ mục nút đã chọn.
• Xác định danh sách options đại diện cho nhãn nút.
• SingleChoiceSegmentedButtonRow chỉ cho phép bạn chọn một nút.
• Tạo một SegmentedButton cho mỗi lựa chọn, bên trong vòng lặp forEachIndexed:
  • shape xác định hình dạng của nút dựa trên chỉ mục và tổng số lựa chọn bằng cách sử dụng SegmentedButtonDefaults.itemShape.
  • onClick cập nhật selectedIndex bằng chỉ mục của nút được nhấp.
  • selected đặt trạng thái lựa chọn của nút dựa trên selectedIndex.
  • label hiển thị nhãn nút bằng thành phần kết hợp Text.

Kết quả

Tạo nút phân đoạn nhiều lựa chọn

Ví dụ này cho thấy cách tạo nút phân đoạn có nhiều lựa chọn kèm theo biểu tượng, cho phép người dùng chọn nhiều lựa chọn:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

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

• Mã này khởi chạy biến selectedOptions bằng remember và mutableStateListOf. Thao tác này sẽ theo dõi trạng thái đã chọn của từng nút.
• Mã này sử dụng MultiChoiceSegmentedButtonRow để chứa các nút.
• Bên trong vòng lặp forEachIndexed, mã sẽ tạo một SegmentedButton cho mỗi lựa chọn:
  • shape xác định hình dạng của nút dựa trên chỉ mục và tổng số lựa chọn.
  • checked đặt trạng thái đã chọn của nút dựa trên giá trị tương ứng trong selectedOptions.
  • onCheckedChange bật/tắt trạng thái đã chọn của mục tương ứng trong selectedOptions khi người dùng nhấp vào nút.
  • icon hiển thị một biểu tượng dựa trên SegmentedButtonDefaults.Icon và trạng thái đã chọn của nút.
  • label hiển thị một biểu tượng tương ứng với nhãn, sử dụng các thành phần kết hợp Icon có vectơ hình ảnh và nội dung mô tả phù hợp.

Kết quả

Tài nguyên khác

• Material 3: Nút phân đoạn