如何从 Jetpack Compose 中的 Radio 组获取价值

Question

我是 Jetpack Compose 的初学者，所以我不知道如何从我创建的 Radio 组中获取价值。

这是我的 Radio 组可组合函数：

@Composable
fun KindRadioGroup(
    mItems: List<String>
) {
    val mRememberObserver = remember { mutableStateOf("") }
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            mItems.forEach { item ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {

                    RadioButton(
                        selected = mRememberObserver.value == item,
                        onClick = { mRememberObserver.value = item },
                        enabled = true,
                        colors = RadioButtonDefaults.colors(
                            selectedColor = Color.Magenta
                        )
                    )//RadioButton
                    Text(text = item, modifier = Modifier.padding(start = 8.dp))
                }//Row
            }
        }//Column
    }

}

可以创建一个广播组吗？或者您有更好的主意吗？

这是我使用可组合函数的方式：

val kinds = listOf(stringResource(id = R.string.req_impor), stringResource(id = R.string.nonreq_impor),
    stringResource(id = R.string.req_nonimpor))
KindRadioGroup(mItems = kinds)

顺便问一下，如果可以的话，我如何从选定的单选按钮中获取值？

Answer 1

使用状态提升并将选择状态移到可组合项之外。

示例代码

@Composable
fun KindRadioGroupUsage() {
    val kinds = listOf("Option 1", "Option 2", "Option 3")
    val (selected, setSelected) = remember { mutableStateOf("") }
    Column {
        KindRadioGroup(
            mItems = kinds,
            selected, setSelected
        )
        Text(
            text = "Selected Option : $selected",
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth(),
        )
    }
}

@Composable
fun KindRadioGroup(
    mItems: List<String>,
    selected: String,
    setSelected: (selected: String) -> Unit,
) {
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            mItems.forEach { item ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    RadioButton(
                        selected = selected == item,
                        onClick = {
                            setSelected(item)
                        },
                        enabled = true,
                        colors = RadioButtonDefaults.colors(
                            selectedColor = Color.Magenta
                        )
                    )
                    Text(text = item, modifier = Modifier.padding(start = 8.dp))
                }
            }
        }
    }
}