Jetpack Compose：如何让Row内Text占整行25%宽度（含IconButton）

问题原因 #

当前代码里，右侧Text的fillMaxWidth(0.25f)是基于扣除IconButton和左侧Text后的剩余空间计算宽度，而非整个Row的总宽度，导致无法和其他Row的同位置元素对齐。

解决方案 #

通过嵌套Row调整布局优先级：先固定右侧Text占整体宽度的25%，再让左侧元素占据剩余75%的空间。修改后的代码如下：

Row(
    modifier = Modifier
        .padding(bottom = 16.dp)
        .fillMaxWidth()
        .background(color = Color(50, 50, 50))
) {
    // 左侧区域：占据Row总宽度的75%
    Row(
        modifier = Modifier
            .weight(1f) // 占据剩余75%宽度
    ) {
        IconButton(
            modifier = Modifier
                .background(Color(100, 100, 100), CircleShape),
            onClick = { /* nothing */ }
        ) {
            Icon(Icons.Filled.Star, null, tint = Color(255, 192, 0))
        }

        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp)
                .background(color = Color(100, 100, 100)),
            text = "Remaining space",
            style = MaterialTheme.typography.bodyMedium
        )
    }

    // 右侧Text：固定占Row总宽度的25%
    Text(
        text = "25%",
        modifier = Modifier
            .fillMaxWidth(0.25f)
            .background(color = Color(150, 150, 150)),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.bodyMedium
    )
}

关键修改说明 #

1. 外层Row中，通过weight(1f)让左侧嵌套Row占据总宽度的75%（右侧Text占25%，剩余空间即为75%）
2. 右侧Text的fillMaxWidth(0.25f)现在直接基于外层Row的总宽度计算，确保严格占25%
3. 左侧嵌套Row内部保留原有结构，IconButton和Text的布局关系不受影响

内容的提问来源于stack exchange，提问作者Toomany Bees