如何在 Jetpack Compose 中的 Row 末尾设置组件？

Question

我想在 Jetpack Compose 的 Row 末尾设置 RadioButton 组件。尝试使用约束布局并将 RadioButton 移到行之外，但 RadioButton 没有与行中的其他组件居中。我应该怎么办？

这是我的代码：

    ConstraintLayout {
        val (row, button) = createRefs()
        Row(
            modifier = Modifier
                .height(56.dp)
                .fillMaxWidth()
                .constrainAs(row){
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                /* *** */
            )
            Text(
                text = "mail@gmail.com",
                modifier = Modifier.padding(start = 16.dp, end = 16.dp),
            )
            RadioButton(
                /* *** */
            )
        }

    }

更重要的是，如果文本太长，我想剪切文本组件（不覆盖或放在单选按钮下面）

Answer 1

最简单的解决方案是在文本和单选按钮之间添加一个Spacerwith 。并根据重量使用修改器在组件之间分配剩余的可用空间。由于只有一个，它将接收所有剩余空间，将单选按钮推到最右侧。Modifier.weight(1f)RowColumnweight

例如，以下代码将产生您想要的行为：

Row(modifier = Modifier.height(56.dp).fillMaxWidth(), verticalAlignment = Alignment.CenterVertically){
    Icon(Icons.Default.Add,null)
    Text("Some text here")
    Spacer(Modifier.weight(1f).fillMaxHeight().background(Color.Green)) // height and background only for demonstration
    RadioButton(selected = false, onClick = { /*TODO*/ })
}

正如我所说，剩余空间是根据每个元素的权重分配的，因此尽管这不是您想要实现的目标，但这是一个示例

Row(modifier = Modifier.height(56.dp).fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.weight(1f).fillMaxHeight().background(Color.Red)) // height and background only for demonstration
    Text("Some text here")
    Spacer(Modifier.weight(4f).fillMaxHeight().background(Color.Green)) // height and background only for demonstration
    RadioButton(selected = false, onClick = { /*TODO*/ })
}

会得到你

测量图标、文本和单选按钮后的剩余空间将 20% 分配给红色垫片，80% 分配给绿色垫片，因为这是它们占总重量的份额（1/5 和 4/5）