Jetpack Compose 中如何对齐 Button 内部的不同元素？

需求与初始代码 #

我正在尝试构建如下组件：

初始实现代码：

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(painter = painterResource(id = R.drawable.ic_check_circle) , contentDescription = "")
    Text(text = "John Doe", textAlign = TextAlign.Start)
    Image(painter = painterResource(id = R.drawable.ic_arrow_forward), contentDescription = "",
        alignment = Alignment.TopEnd)
}

修复方案 #

Jetpack Compose中Button的内容容器默认是横向排列的Row，默认无权重分配，因此三个子元素会按自身宽度依次居中排列，无法实现文本占满中间空间、箭头靠右的效果。修改代码如下即可：

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(
        painter = painterResource(id = R.drawable.ic_check_circle),
        contentDescription = null
    )
    Text(
        text = "John Doe",
        textAlign = TextAlign.Start,
        modifier = Modifier
            .weight(1f)
            .padding(horizontal = 16.dp)
    )
    Image(
        painter = painterResource(id = R.drawable.ic_arrow_forward),
        contentDescription = null
    )
}

核心修改点 #

• 给Text添加Modifier.weight(1f)属性，让Text占据图标之外的所有剩余横向空间，自然实现文本左对齐、箭头靠右的布局
• 按需给Text添加padding调整元素间距，避免元素过于紧凑
• 无辅助意义的contentDescription设置为null，符合无障碍开发规范

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