如何在Compose中实现如下布局

Question

我想在 Compose 中设计这样的布局。在我的例子中，两个组件的宽度都是可变的。但我仍然希望标题居中并且图标右对齐。

我尝试使用 Row，但如果标题或按钮发生变化，对齐方式就会变得不稳定。

Row(
 modifier = Modifier.fillMaxWidth(),
 verticalAlignment = Alignment.CenterVertically,
 horizontalArrangement = Arrangement.SpaceBetween
 ){
   Spacer(modifier = Modifier.width(1.dp))
   Text("Title Comes here")
   TextButton(onClick = { }) { Text(text = "Dynamic Button") }
}

Answer 1

您可以使用 Box 而不是 Row

Box(
    modifier = Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center,
){
    Text(
        text = "Title Comes here",
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center
    )

    TextButton(
        onClick = { },
        modifier = Modifier.align(CenterEnd)
    ){
        Text(text = "Button")
    }
}