Jetpack Compose中Button无法自适应包裹Box内内容的问题

你当前的Button会拉伸至屏幕边缘，图标靠左、文字居中；想要的效果是Button自适应包裹图标和文字，两者并排居中显示。

问题根源在于代码里的Row设置了.fillMaxWidth()，这个修饰符强制Row占满父布局的全部宽度，直接导致Button被内容撑到屏幕边缘，无法自适应包裹内容。

修改后的实现代码 #

Row(
    modifier = Modifier.wrapContentWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    horizontalGap = 5.dp // 替代Spacer，更简洁
) {
    Icon(
        imageVector = Icons.Default.VerticalAlignTop,
        modifier = Modifier.size(18.dp),
        contentDescription = "回到顶部图标",
        tint = Color.Unspecified
    )
    Text(
        text = stringResource(id = R.string.back_to_top),
        textAlign = TextAlign.Center
    )
}

核心改动说明 #

• 移除外层Box，用单个Row承载图标和文字，避免分层布局带来的宽度控制问题
• 将Row的.fillMaxWidth()替换为.wrapContentWidth()，让Row仅包裹自身内容宽度，Button会随之自适应
• 给Row设置verticalAlignment = Alignment.CenterVertically保证图标和文字垂直居中，horizontalArrangement = Arrangement.Center让内部元素整体居中
• 用Row的horizontalGap替代手动添加的Spacer，代码更简洁规范

这样调整后，Button就会自适应包裹图标和文字的总宽度，达到预期效果。

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