技術標籤：Jetpack-ComposeJetPackComposeRadioButtonRadioGroup單選按鈕

Jetpack Compose - RadioButton

• • 0、介紹
  • 1、屬性一覽
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

表示兩個狀態的元件，包含已選中和未選中狀態

在XML中RadioButton一般需要配合RadioGroup來實現單選功能。但是在Compose中，完全沒有了RadioGroup的概念，因為你整個檢視是資料驅動的，所以只要保證資料是你想要的即可，無論是單選還是多選，都可以實現。

而且需要注意一點，這個RadioButton就是一個Button，不會像XML中的還有text屬性，Compose中的就是一個單獨的按鈕，剩下的佈局你可以自己定義，我們下文看程式碼實現。

1、屬性一覽

【目前基於alpha10版本】該函式如下：

@Composable fun RadioButton(
    selected: Boolean, 
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    colors: RadioButtonColors = RadioButtonDefaults.colors()
): Unit
 

屬性引數含義：

2、使用示例

我們直接定義一排單選按鈕，首先定義了一些按鈕項的顯示文字內容，然後根據這些文字迴圈設定RadioButton，並組合Text控制元件。然後我們定義了選中狀態seletedTag的預設值為Null，然後單擊某個按鈕時，設定為相應的值，程式碼如下：

@Composable
fun RadioButtonDemo() {
    val tags = arrayListOf("Java", "Kotlin", "XML", "Compose", "JetPack")
    var selectedTag = remember { mutableStateOf("Null") }

    Row() {
        tags.forEach {
            Row {
                RadioButton(
                    selected = it == selectedTag.value,
                    onClick = {
                        selectedTag.value = it
                    }
                )

                Text(text = it)
            }

            Spacer(modifier = Modifier.width(20.dp))
        }
    }
}

所以實現效果如下所示：

3、版本更新

• 暫無

4、未解決問題

由於RadioButton是完全交由資料狀態來處理的，所以我們可以很方便的設定為單選或者多選 的情況，這個大家可以自己嘗試下，上面的程式碼僅僅只是示例程式碼。