Kotlin Compose：移除按钮间默认间距的技术方案咨询

要让Column中的按钮完全紧贴，需要处理两个关键点：Column的子元素间距，以及Button自身的默认内边距和最小高度限制。以下是两种可行方案：

方案1：直接修改现有代码 #

fun MyUserInterface(){
    Column(modifier = Modifier
        .fillMaxSize()
        .padding(32.dp)
        .border(BorderStroke(2.dp, Color.Red)),
        // 明确设置子元素间距为0，消除Column默认的潜在间距
        verticalArrangement = Arrangement.spacedBy(0.dp)
    ){
        Button(
            onClick = { /*TODO*/ },
            // 移除按钮内部的默认内边距
            contentPadding = PaddingValues(0.dp),
            // 取消按钮的默认最小高度，让高度适配文本内容
            modifier = Modifier.height(IntrinsicSize.Min)
        ) {
            Text(text = "A")
        }
        Button(
            onClick = { /*TODO*/ },
            contentPadding = PaddingValues(0.dp),
            modifier = Modifier.height(IntrinsicSize.Min)
        ) {
            Text(text = "B")
        }
        Button(onClick = { /*TODO*/ }, contentPadding = PaddingValues(0.dp), modifier = Modifier.height(IntrinsicSize.Min)) {
            Text(text = "C")
        }
        Button(onClick = { /*TODO*/ }, contentPadding = PaddingValues(0.dp), modifier = Modifier.height(IntrinsicSize.Min)) {
            Text(text = "D")
        }
        Button(onClick = { /*TODO*/ }, contentPadding = PaddingValues(0.dp), modifier = Modifier.height(IntrinsicSize.Min)) {
            Text(text = "E")
        }
    }
}

方案2：封装自定义按钮减少重复代码 #

如果所有按钮样式一致，建议封装成自定义组件，避免重复写相同参数：

// 自定义无间距、紧凑样式的按钮
fun TightButton(onClick: () -> Unit, text: String) {
    Button(
        onClick = onClick,
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier.height(IntrinsicSize.Min)
    ) {
        Text(text = text)
    }
}

fun MyUserInterface(){
    Column(modifier = Modifier
        .fillMaxSize()
        .padding(32.dp)
        .border(BorderStroke(2.dp, Color.Red)),
        verticalArrangement = Arrangement.spacedBy(0.dp)
    ){
        TightButton(onClick = { /*TODO*/ }, text = "A")
        TightButton(onClick = { /*TODO*/ }, text = "B")
        TightButton(onClick = { /*TODO*/ }, text = "C")
        TightButton(onClick = { /*TODO*/ }, text = "D")
        TightButton(onClick = { /*TODO*/ }, text = "E")
    }
}

核心修改说明 #

• verticalArrangement = Arrangement.spacedBy(0.dp)：强制Column内子元素之间无额外间距
• contentPadding = PaddingValues(0.dp)：去掉Button内部的默认上下内边距，让按钮内容紧贴边缘
• Modifier.height(IntrinsicSize.Min)：取消Button默认的最小高度约束，使按钮高度仅由内部文本决定

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