Jetpack Compose按钮适配宽高：文本左对齐图标右对齐实现方案

我正在构建一个基于Row的可复用Button组件，要求文本居左、图标居右。基础实现中，当按钮设置固定宽度时，文本和图标会居中显示而非两端对齐；若给Text添加Modifier.weight(1F)，无固定宽度的按钮又会占用尽可能多的空间。如何让组件同时适配固定宽度与wrap-content宽度？

解决方案 #

核心思路是让按钮内部的Row填满按钮的可用宽度，同时用带权重的Spacer动态填充文本与图标之间的空间，具体修改如下：

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = { /* 点击逻辑 */ },
        modifier = modifier
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = text)
            // 用权重Spacer填充剩余空间，实现两端对齐
            Spacer(modifier = Modifier.weight(1f))
            // 保留固定间距
            Spacer(modifier = Modifier.width(8.dp))
            Icon(
                painter = painterResource(id = android.R.drawable.ic_dialog_info),
                contentDescription = "按钮图标" // 建议添加有意义的内容描述
            )
        }
    }
}

原理说明 #

• Row添加Modifier.fillMaxWidth()：让内部布局始终填满按钮的可用宽度，无论按钮是固定宽度还是自适应宽度。
• Modifier.weight(1f)的Spacer：
  • 当按钮为自适应宽度时，剩余空间为0，Spacer不占用宽度，按钮宽度刚好包裹文本+8dp间距+图标。
  • 当按钮为固定宽度时，Spacer会占据文本与图标之间的所有额外空间，将文本推至左侧，图标推至右侧，实现两端对齐。
• 保留8dp固定间距：确保文本与图标之间始终保持合理空隙，避免内容拥挤。

测试验证 #

使用原有的屏幕布局代码即可验证效果：

@Composable
fun MyScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "variable width",
            modifier = Modifier.wrapContentWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        MyButton(
            text = "fixed width",
            modifier = Modifier.width(300.dp)
        )
    }
}

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