如何消除Jetpack Compose按钮上下间隙并保留内容高度缩放？

你遇到的间隙来自两个核心原因：

• Material3 Button默认的最小高度（minHeight）：即使内容高度很小，按钮也会保持固定的最小高度，产生视觉冗余空间。
• Button默认的contentPadding：内边距会强制撑开按钮高度，同时默认布局逻辑会残留微小的元素间距。

要同时满足无间隙堆叠和内容自适应高度，只需两步调整：

1. 消除Column的潜在间距：显式设置垂直排列为0间距，确保按钮之间无额外留白。
2. 让Button高度适配内容：通过修饰符覆盖默认最小高度，同时自定义内边距避免不必要的高度撑开。

完整实现代码 #

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.Arrangement

@Composable
fun TwoButtonsNoGapAutoHeight() {
    // 设置Column无间距垂直排列
    Column(verticalArrangement = Arrangement.spacedBy(0.dp)) {
        Button(
            onClick = {},
            // 自定义内边距，按需调整平衡内容贴合度与视觉舒适度
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
            // 覆盖默认最小高度，让按钮高度完全跟随内容变化
            modifier = Modifier.wrapContentHeight(),
            // 如需完全消除圆角视觉间隙，可启用下方shape参数
            // shape = androidx.compose.material3.ButtonDefaults.shape.copy(all = 0.dp)
        ) {
            Text("Button 1")
        }
        Button(
            onClick = {},
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
            modifier = Modifier.wrapContentHeight()
        ) {
            Text("Button 2")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun TwoButtonsNoGapAutoHeightPreview() {
    TwoButtonsNoGapAutoHeight()
}

额外调整说明 #

• 若需要按钮完全贴合文字（无内边距），可将contentPadding设为PaddingValues(0.dp)，注意调整后文字会紧贴按钮边缘，需根据UI需求权衡。
• 若按钮圆角导致视觉上仍有"间隙"，可通过shape参数设置为直角，让按钮边缘完全对齐。

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