如何在Jetpack Compose中设置按钮宽高？解决按钮占满屏幕问题

你的代码设置了Modifier.size但按钮仍占满屏幕，通常是父布局约束或Button默认布局行为导致的，以下是几种可行的解决方法：

方法1：使用requiredSize强制覆盖约束 #

如果父布局对按钮施加了强制填充的约束（比如父容器是fillMaxWidth），requiredSize会忽略父布局的最大尺寸约束，强制设置按钮宽高：

Button(
    onClick = {},
    modifier = Modifier.requiredSize(80.dp)
) {
    Text(text = "Lorem")
}

方法2：明确设置宽高并配合wrapContent #

添加wrapContentWidth和wrapContentHeight，确保按钮仅包裹自身内容并遵循你设置的尺寸：

Button(
    onClick = {},
    modifier = Modifier
        .width(80.dp)
        .height(80.dp)
        .wrapContentWidth()
        .wrapContentHeight()
) {
    Text(text = "Lorem")
}

方法3：调整按钮内边距 #

Button默认的contentPadding（水平16dp、垂直8dp）可能让按钮视觉上超出设置尺寸，自定义内边距可以实现更紧凑的效果：

Button(
    onClick = {},
    modifier = Modifier.size(80.dp),
    contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp)
) {
    Text(text = "Lorem")
}

方法4：检查父布局约束 #

确保父容器没有强制按钮填充空间的设置，比如给父布局添加wrapContentWidth()，避免按钮被强制拉伸：

Column(modifier = Modifier.wrapContentWidth()) {
    Button(
        onClick = {},
        modifier = Modifier.size(80.dp)
    ) {
        Text(text = "Lorem")
    }
}

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