Nút radio

Nút chọn cho phép người dùng chọn một tuỳ chọn trong một tập hợp tuỳ 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 nút chuyển.

Hình 1. Một cặp nút chọn, trong đó một tuỳ chọn được chọn.

Nền tảng API

Sử dụng thành phần kết hợp RadioButton để liệt kê các tuỳ chọn có sẵn. Gói từng tuỳ chọn RadioButton và nhãn của tuỳ chọn đó bên trong một thành phần Row để nhóm các tuỳ chọn đó lại với nhau.

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

• selected: Cho biết liệu nút chọn có được chọn hay không.
• onClick: Hàm lambda được thực thi khi người dùng nhấp vào nút chọn. Nếu giá trị này là null, 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ó đượ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 đã tắt.
• interactionSource: Cho phép bạn quan sát trạng thái tương tác của nút, chẳng hạn như liệu nút đó có được nhấn, di chuột qua hay lấy làm tâm đ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 biểu thị nhãn cho các nút chọn.
• Hàm có khả năng kết hợp remember tạo một biến trạng thái selectedOption và một hàm để cập nhật trạng thái đó có tên là onOptionSelected. Trạng thái này chứa tuỳ chọn nút chọn đang được chọn.
  • mutableStateOf(radioOptions[0]) khởi chạy trạng thái thành mục đầu tiên trong danh sách. "Cuộc gọi" là mục đầu tiên, do đó, đâ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 cho hệ thống biết rằng các phần tử trong Column này là một phần của nhóm có thể chọn, cho phép hỗ trợ trình đọc màn hình đúng cách.
• Modifier.selectable() giúp 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 hay không dựa trên trạng thái selectedOption.
  • Hàm lambda onClick sẽ cập nhật trạng thái selectedOption thành tuỳ chọn đã nhấp 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 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 và 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 đó lựa chọn "Bạn bè" đã được chọn.

Tài nguyên khác

• Material Design: Nút