Nút radio

Nút chọn cho phép người dùng chọn một lựa chọn trong một tập hợp các lựa chọn. Bạn sử dụng nút chọn khi chỉ có thể chọn một mục trong danh sách. Nếu người dùng cần chọn nhiều mục, hãy sử dụng switch (công tắc).

Hình 1. Một cặp nút chọn có một lựa chọn được chọn.

Nền tảng API

Sử dụng composable RadioButton để liệt kê các lựa chọn có sẵn. Gói từng lựa chọn RadioButton và nhãn của lựa chọn đó vào trong một thành phần Row để nhóm chúng lại với nhau.

RadioButton bao gồm các thông số chính sau:

• selected: Cho biết nút chọn có được chọn hay không.
• onClick: Hàm lambda mà ứng dụng của bạn thực thi khi người dùng nhấp vào nút chọn. Nếu giá trị này là null, thì người dùng không thể tương tác trực tiếp với nút chọn.
• enabled: Kiểm soát việc nút chọn được bật hay tắt. Người dùng không thể tương tác với các nút chọn bị vô hiệu hoá.
• interactionSource: Cho phép bạn quan sát trạng thái tương tác của nút, ví dụ: nút có được nhấn, di chuột qua hoặc lấy tiêu điểm hay không.

Tạo nút chọn cơ bản

Đoạn mã sau đây hiển thị danh sách các nút chọn trong Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

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

• radioOptions đại diện cho nhãn của các nút chọn.
• Hàm composable remember tạo một biến state selectedOption và một hàm để cập nhật state đó có tên là onOptionSelected. Trạng thái này giữ tuỳ chọn nút chọn đã chọn.
  • mutableStateOf(radioOptions[0]) khởi chạy trạng thái cho mục đầu tiên trong danh sách. "Cuộc gọi" là mục đầu tiên, vì vậy, đây là nút chọn được chọn theo mặc định.
• Modifier.selectableGroup() đảm bảo hành vi hỗ trợ tiếp cận phù hợp cho trình đọc màn hình. Thuộc tính này thông báo cho hệ thống rằng các phần tử trong Column này là một phần của nhóm có thể chọn, nhờ đó hỗ trợ trình đọc màn hình đúng cách.
• Modifier.selectable() làm cho toàn bộ Row hoạt động như một mục có thể chọn.
  • selected cho biết liệu Row hiện tại có được chọn dựa trên trạng thái selectedOption hay không.
  • Hàm lambda onClick cập nhật trạng thái selectedOption thành lựa chọn được nhấp vào khi người dùng nhấp vào Row.
  • role = Role.RadioButton thông báo cho các dịch vụ hỗ trợ tiếp cận rằng Row hoạt động như một nút chọn.
• RadioButton(...) tạo thành phần kết hợp RadioButton.
  • onClick = null trên RadioButton giúp cải thiện khả năng hỗ trợ tiếp cận. Điều này ngăn nút chọn xử lý trực tiếp sự kiện nhấp chuột, đồng thời cho phép đối tượng sửa đổi selectable của Row quản lý trạng thái lựa chọn và hành vi hỗ trợ tiếp cận.

Kết quả

Hình 2. Ba nút chọn, trong đó nút "Bạn bè" được chọn.

Tài nguyên khác

• Material Design: Nút