radiobutton控件單選 radiobutton被選中 _radiobutton被選中

【radiobutton控件單選 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 = http://www.mnbkw.com/jxjc/172367/!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 = http://www.mnbkw.com/jxjc/172367/!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中沒有這樣的實現，我們需要自己自定義一個組合。

@Composablefun MyRadioButtonList(context: Context){val fruits = listOf("蘋果", "枇杷", "櫻桃", "草莓")val selectedButton = remember { mutableStateOf(fruits.first()) }Row() {fruits.forEach {val isSelected = it == selectedButton.valueRow(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.clickable(onClick = {selectedButton.value = http://www.mnbkw.com/jxjc/172367/itToast.makeText(context,"您點擊了${it}", Toast.LENGTH_SHORT).show()})) {RadioButton(colors = RadioButtonDefaults.colors(selectedColor = selectedColor1,unselectedColor = unselectedColor1,disabledColor = disabledColor1),selected = isSelected,onClick = {selectedButton.value = http://www.mnbkw.com/jxjc/172367/itToast.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之間切換狀態。這樣就實現了我們的單選效果。