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

Question

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

这是我的代码：

    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 = "[e-mail]",
                modifier = Modifier.padding(start = 16.dp, end = 16.dp),
            )
            RadioButton(
                /* *** */
            )
        }

    }

如果文本过长，我希望你能剪切文本组件（而不是覆盖或放置在单选按钮之上或之下）。

- AndroideuszPL

---

这个回答是否解决了你的问题？ - Phil Dukhov

@PylypDukhov 是的，这是正确的解决方案。谢谢！ - AndroideuszPL

Answer 1

最简单的解决方法是在您的文本和单选按钮之间添加一个带有 Modifier.weight(1f) 的Spacer。Row 和 Column 将剩余可用空间根据它们的权重使用 weight Modifier 分配给组件。由于只有一个，它将接收所有剩余空间，将单选按钮推到最右边。

例如，以下代码将产生所需的行为:

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%的红色Spacer和80%的绿色Spacer，因为它们在总权重中所占的份额（1/5和4/5）如此。

- Adrian K

---

很遗憾，使用这个解决方案后，按钮的位置不在同一行（取决于文本的长度）。 - AndroideuszPL

@AndroideuszPL 限制文本为单行 - Blundell

不需要间隔符。在行的起始和结束项目中添加适当的填充。然后将Weight(1f)修饰符添加到Text组件本身。Text是左对齐的，并且默认情况下会换行，而权重将使其占据行中任何剩余的空间，因此文本的长度不会影响整体布局。所有前导图标和单选按钮将具有相同的间距和对齐方式。 - Alex Conner

Answer 2

你可以创建一个填充行剩余部分的盒子，并将按钮放在其中。然后，你可以将按钮右对齐。

Box(modifier = Modifier.fillMaxWidth()) {
    RadioButton(modifier = Modifier.align(Alignment.End)){}
}

可以使用列而不是框来实现相同的效果，但是这样每个行内的单独元素都应该被包装在一个列中。

- Tobias