如何在Jetpack Compose中实现标题居中、按钮右对齐的可变宽度布局？

你之前的代码问题在于用Arrangement.SpaceBetween搭配固定宽度的Spacer，导致标题并不是真正的屏幕居中——它只是在Spacer和按钮之间居中，一旦按钮内容变化、宽度改变，标题位置就会偏移。

要实现标题始终屏幕居中、按钮始终靠右，且两者宽度随内容自适应，可以用下面的写法：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    // 用weight(1f)让这个Box占据Row除按钮外的全部宽度
    Box(
        modifier = Modifier.weight(1f),
        contentAlignment = Alignment.Center
    ) {
        Text("Title Comes here") // 标题在Box内居中，也就是屏幕水平中心
    }
    // 按钮自适应自身内容宽度，固定在Row最右侧
    TextButton(onClick = { }) {
        Text(text = "Dynamic Button")
    }
}

原理说明： #

• Modifier.weight(1f)会让Box优先占据Row中剩余的所有可用空间，不管按钮的宽度怎么变，Box的宽度都会自动调整为屏幕宽度减去按钮宽度。
• 标题放在这个Box里并设置contentAlignment = Alignment.Center，就能保证它始终处于屏幕水平中心位置。
• 按钮不受weight影响，会根据自身内容自适应宽度，并且固定在Row的最右侧。

这样不管标题或按钮的内容怎么变化，布局的对齐效果都会保持稳定。

内容的提问来源于stack exchange，提问作者SURYA S R