html單選按鈕默認選中：radiobutton控件默認選中

在Jetpack Compose中用於製作單選按鈕的可組合函數名為RadioButton。單選按鈕是用戶可以選擇的小圓形按鈕。一次只能選擇一個選項。下面向您介紹如何使用RadioButton，如何實現多個RadioButton中一次只能選擇一個選項的效果。

RadioButton(selected = false, onClick = { /*TODO*/ })

我們用非常簡潔的代碼就創建了一個RadioButton，如下圖：

RadioButton

此時的RadioButton沒有任何的效果，也不能點擊。

接下來，我們要為RadioButton添加一個點擊狀態並設置RadioButton的不同狀態的樣式。

val isSelected = remember {mutableStateOf(false)}
RadioButton(
    colors = RadioButtonDefaults.colors(
        selectedColor = selectedColor1,
        unselectedColor = unselectedColor1,
        disabledColor = disabledColor1
    ),
    enabled = true,
    selected = isSelected.value,
    onClick = { isSelected.value = !isSelected.value})

在上面的代碼中，我們新建了一個isSelected變量來保存RadioButton的點擊狀態，使用colors設置RadioButton的樣式，這裡使用RadioButtonDefaults實例，並使用所需的背景色作為參數對其調用colors方法。

selectedColor：選中並啟用時用於單選按鈕的顏色

unselectedColor：未選擇並啟用時用於單選按鈕的顏色。

disabledColor：禁用時用於單選按鈕的顏色。

使用selected在「選定」和「未選定」之間切換按鈕的當前狀態。使用enabled控制單選按鈕的啟用狀態。onClick單擊RadioButton時要調用的回調，在回調中更改狀態的值。如下圖：

在Jetpack Compose中，RadioButton沒有設置文字的屬性，要想使其顯示文字，就要使用組合項來實現。

val isSelected = remember {mutableStateOf(false)}
Row(
    modifier = Modifier.clickable {
        isSelected.value = !isSelected.value
    }) {
    RadioButton(
        colors = RadioButtonDefaults.colors(
            selectedColor = selectedColor1,
            unselectedColor = unselectedColor1,
            disabledColor = disabledColor1
        ),
        enabled = true,
        selected = isSelected.value,
        onClick = { isSelected.value = !isSelected.value })
    Spacer(modifier = Modifier.width(2.dp))
    Text(text = text)
}

在上面的代碼中，我們在Row(線性水平)布局中添加了RadioButton和Text兩個組合項，實現RadioButton顯示文字的效果，使用Spacer添加間隔，在Row的Modifier.clickable中，當點擊整個布局也可以更改RadioButton的狀態，如下圖：

顯示文字效果

我們知道在Android開發中向RadioGroup中添加多個RadioButton，可以實現多個選項中只有一個RadioButton選中的效果，但在Jetpack Compose中沒有這樣的實現，我們需要自己自定義一個組合。

@Composable
fun MyRadioButtonList(context: Context){
    val fruits = listOf("蘋果", "枇杷", "櫻桃", "草莓")
    val selectedButton = remember { mutableStateOf(fruits.first()) }

    Row() {
        fruits.forEach {
            val isSelected = it == selectedButton.value
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.clickable(onClick = {
                    selectedButton.value = it
                    Toast.makeText(context, "您點擊了${it}", Toast.LENGTH_SHORT).show()
                })
            ) {
                RadioButton(
                    colors = RadioButtonDefaults.colors(
                        selectedColor = selectedColor1,
                        unselectedColor = unselectedColor1,
                        disabledColor = disabledColor1
                    ),
                    selected = isSelected,
                    onClick = {
                        selectedButton.value = it
                        Toast.makeText(context, "您點擊了${it}", Toast.LENGTH_SHORT).show()
                    })
                Spacer(modifier = Modifier.width(2.dp))
                Text(text = it)
            }
        }
    }
}

在上面的代碼中，首先，我們新建了一個fruits集合，我們用集合中的選項表示每個單選按鈕的索引。接下來，創建一個selectedButton狀態，以記住當前選擇的按鈕。默認情況下，選擇第一個按鈕。使用for循環，在循環的每次迭代中向列添加一個RadioButton。每次循環的使用我們判斷selectedButton的值是否是當前的RadioButton，然後將isSelected的賦給RadioButton，每次用戶點擊按鈕時，您都會更改在狀態中選擇的按鈕。這將觸發重新編譯，您的UI將更新！如下圖：

默認情況下會選擇第一個RadioButton。選擇另一個RadioButton時，可以看到在RadioButton之間切換狀態。這樣就實現了我們的單選效果。