Jetpack Compose中实现按钮内文本左右对齐同排显示

我尝试在OutlinedButton中添加两段文本，要求第一段文本左对齐，第二段文本右对齐。以下是我尝试的代码：

OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier.fillMaxWidth()
                               .background(
                color = Color.Transparent,
        shape = RectangleShape, // Oval shape

        //border = androidx.compose.ui.drawBorder(2.dp, Color.Red) // Border color and width
        ),
            onClick = {}
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = text,
                    textAlign = TextAlign.Start,
                    fontSize = 15.sp,
                )
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = ">",
                    textAlign = TextAlign.End,
                    fontSize = 15.sp,
                )
            }
        }

但实际效果不符合预期，两段文本都左对齐了，效果如图：

问题出在Row的布局逻辑上：默认情况下Row会让子元素紧凑排列，Text的textAlign属性仅在文本宽度占满可用空间时才会生效，当前两个Text都只占据自身内容宽度，所以设置textAlign无法达到预期效果。可以通过以下两种方式修复：

方式一：给左侧文本添加weight属性 #

给第一个Text添加weight(1f)，让它占据Row内的所有剩余空间，右侧文本会被自动挤到最右端：

OutlinedButton(
    colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = Modifier.fillMaxWidth()
        .background(
            color = Color.Transparent,
            shape = RectangleShape
        ),
    onClick = {}
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(
            modifier = Modifier.weight(1f),
            color = Color.Black,
            text = text,
            fontSize = 15.sp,
        )
        Text(
            color = Color.Black,
            text = ">",
            fontSize = 15.sp,
        )
    }
}

这里无需额外设置textAlign，左侧文本默认左对齐，右侧文本自然处于右端位置。

方式二：使用Spacer填充中间空间 #

在两个Text之间添加一个Spacer并设置weight(1f)，让它占据Row内的所有中间可用空间，从而将两段文本分别推到左右两端：

OutlinedButton(
    colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = Modifier.fillMaxWidth()
        .background(
            color = Color.Transparent,
            shape = RectangleShape
        ),
    onClick = {}
) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(
            color = Color.Black,
            text = text,
            fontSize = 15.sp,
        )
        Spacer(modifier = Modifier.weight(1f))
        Text(
            color = Color.Black,
            text = ">",
            fontSize = 15.sp,
        )
    }
}

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