如何让Jetpack Compose Button完全包裹内容？

先看这段测试代码：

@Preview
@Composable
fun Preview() {
    Button(
        onClick = {},
    ) {
        Text("1")
    }
}

运行后能看到按钮上下存在多余空白，这是因为Button()组件内部默认设置了val MinHeight = 40.dp的最小高度限制。

试过两种方法但效果都不理想：

• 用Modifier.height(height = ...)可以强制修改高度，但不想使用固定尺寸
• 用Modifier.defaultMinSize(minHeight = 1.dp)仅能缩小按钮的圆角区域，无法彻底消除上下空白

可行解决方案 #

要彻底解决这个问题，需要同时调整按钮的最小高度限制和内部内容内边距，通过ButtonDefaults自定义样式即可：

@Preview
@Composable
fun Preview() {
    Button(
        onClick = {},
        modifier = Modifier.defaultMinSize(minHeight = 0.dp),
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp)
    ) {
        Text("1")
    }
}

如果需要复用样式，可以提前定义自定义按钮样式：

val CustomButtonStyle = ButtonDefaults.buttonStyle(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp),
    minimumHeight = 0.dp
)

@Preview
@Composable
fun Preview() {
    Button(
        onClick = {},
        modifier = Modifier.defaultMinSize(minHeight = 0.dp),
        style = CustomButtonStyle
    ) {
        Text("1")
    }
}

核心逻辑是：Button的空白既来自内部最小高度限制，也包含默认的内容内边距，同时调整这两个参数，就能让按钮高度完全贴合内部文本，且不用固定死尺寸。

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