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 tập hợp các tuỳ 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 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 đảm bảo rằng SegmentedButton được định vị và định cỡ chính xác, đồng thời chia sẻ các thông số chính sau:

• space: Điều chỉnh độ 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 trình tự 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 một 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 tạo biến selectedIndex bằng remember và mutableIntStateOf để theo dõi chỉ mục nút hiện đang được chọn.
• Xác định danh sách options đại diện cho nhãn nút.
• SingleChoiceSegmentedButtonRow đảm bảo bạn chỉ có thể chọn một nút.
• Tạo SegmentedButton cho mỗi tuỳ 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ố tuỳ 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 đã 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 cách sử dụng thành phần kết hợp Text.

Kết quả

Tạo nút phân đoạn có thể chọn nhiều mục

Ví dụ này cho thấy cách tạo nút phân đoạn nhiều lựa chọn có các biểu tượng cho phép người dùng chọn nhiều tuỳ 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 tạo biến selectedOptions bằng remember và mutableStateListOf. Thuộc tính này 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 tuỳ 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ố tuỳ chọn.
  • checked đặt trạng thái đã đánh dấu 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 đã đánh dấu 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