在没有单选按钮的 Jetpack Compose 中创建切换按钮组答案

【问题标题】：Create Toggle Button Group in Jetpack Compose without Radio Buttons在没有单选按钮的 Jetpack Compose 中创建切换按钮组
【发布时间】：2021-12-15 16:17:54
【问题描述】：

我试图在我的项目中放置一个按钮切换组，它的行为类似于单选按钮组，但看起来不像单选按钮组（即，当一个按钮被选中时，其他按钮被取消选择）。

我遵循了我在网上找到的单选按钮模式，但这似乎不起作用。有没有办法做到这一点？我已经到了可以将按钮放在我想要它们的位置的地步，但是它们都被禁用了。

MovieSpotterTheme() {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                ) {
                    @Composable
                    fun MaterialButtonToggleGroup() {
                        var selected by remember { mutableStateOf("Android") }

                        val buttonGroup = listOf("Popular Movies", "Search Movies")

                     
                        val onSelectedChange = { text: String ->
                            selected = text
                        }
                        Row(
                            horizontalArrangement = Arrangement.SpaceEvenly
                        ) {
                            buttonGroup.forEach { text ->
                                Row(Modifier
                                    .selectable(
                                        selected = (text == selected),
                                        onClick = { onSelectedChange(text) }
                                    )
                                    .padding(horizontal = 16.dp)
                                ) {
                                    Button(
                                        enabled = (text == selected),
                                        onClick = { onSelectedChange(text) }
                                    ) {
                                        Column(
                                            horizontalAlignment = Alignment.CenterHorizontally
                                        ) {
                                            Text(
                                                text = text,
                                                style = MaterialTheme.typography.body1.merge(),
                                                modifier = Modifier.padding(horizontal = 16.dp)
                                            )
                                        }
                                    }
                                }
                            }
                        }
                    }
                    Surface() {
                        MaterialButtonToggleGroup()
                    }
                }
            }

【问题讨论】：

从Button 中删除enabled = (text == selected)。 enabled 参数的值最初计算为 false，因为 selected = "Android" 不等于 "Popular Movies" 或 "Search Movies"。这使得两个按钮都处于禁用状态。
为什么这段代码中有嵌套的@Composable fun？
它的设置有点不同。这实际上是在一个片段的内部，该片段显示为 xml 文件的一部分（工作面试任务的一部分）。诚然，我可能做错了。我有点新。
@OmKumar 对。我得到了那么多。我只是不知道如何让它们来回切换。这有相反的解决方案，它们都始终处于启用状态。
不确定为什么要禁用选定的按钮。重新选择一个选定的按钮无论如何都不会有害。 Material spec 不需要禁用它。

标签： android android-jetpack-compose android-togglebutton

【解决方案1】：

提供简化版本。玩弄它以满足您的要求。

@Composable
fun CustomRadioGroup() {
    val options = listOf(
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
    )
    var selectedOption by remember {
        mutableStateOf("")
    }
    val onSelectionChange = { text: String ->
        selectedOption = text
    }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize(),
    ) {
        options.forEach { text ->
            Row(
                modifier = Modifier
                    .padding(
                        all = 8.dp,
                    ),
            ) {
                Text(
                    text = text,
                    style = typography.body1.merge(),
                    color = Color.White,
                    modifier = Modifier
                        .clip(
                            shape = RoundedCornerShape(
                                size = 12.dp,
                            ),
                        )
                        .clickable {
                            onSelectionChange(text)
                        }
                        .background(
                            if (text == selectedOption) {
                                Color.Magenta
                            } else {
                                Color.LightGray
                            }
                        )
                        .padding(
                            vertical = 12.dp,
                            horizontal = 16.dp,
                        ),
                )
            }
        }
    }
}

【讨论】：

这太完美了！我重新安排了一些东西，效果很好！非常感谢！