JetPack Compose Desktop按钮自带边距如何去除？

你遇到的是Compose中Button组件的默认样式问题——Material Design风格的Button自带了内部的content padding，直接给Modifier加padding(0.dp)只会修改组件的外部边距，对内部自带的padding无效。

可以通过以下两种方法解决：

方法一：修改Button的contentPadding参数 #

Button组件提供了contentPadding参数，专门用于控制按钮内部内容的内边距，将其设置为PaddingValues(0.dp)即可去除默认内边距：

@Preview
@Composable
fun testMain() {
    Column {
        Button(
            onClick = {},
            modifier = Modifier.background(color = Color.Red),
            contentPadding = PaddingValues(0.dp) // 关键修改
        ) {
            Text("Text", modifier = Modifier.background(color = Color.Green))
        }
        Text("Text 2", modifier = Modifier.background(color = Color.Green))
        Text("Text 3", modifier = Modifier.background(color = Color.Green))
    }
}

方法二：使用BasicButton自定义按钮 #

如果需要完全摆脱Material Design的默认样式约束，可以使用BasicButton组件，它是更基础的按钮实现，没有自带的内边距和样式，完全由你自己控制：

@Preview
@Composable
fun testMain() {
    Column {
        BasicButton(
            onClick = {},
            modifier = Modifier.background(color = Color.Red)
        ) {
            Text("Text", modifier = Modifier.background(color = Color.Green))
        }
        Text("Text 2", modifier = Modifier.background(color = Color.Green))
        Text("Text 3", modifier = Modifier.background(color = Color.Green))
    }
}

注意：如果使用BasicButton，你需要自行处理按钮的点击状态样式（比如按下时的背景变化），因为它没有默认的交互效果。

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