如何移除或减小Jetpack Compose中OutlinedButton的内边距

问题原因 #

Jetpack Compose 中的OutlinedButton属于Material Design规范组件，默认内置了最小48x48dp的可交互区域限制，这是为了保障用户点击的无障碍体验，所以即使你将contentPadding和modifier的padding都设为0，也无法消除多余内边距。

解决办法 #

方案1：保留OutlinedButton，覆盖默认最小尺寸约束 #

给OutlinedButton的modifier添加defaultMinSize属性，取消默认的最小宽高限制，即可自由调整内边距，同时保留按钮原有的按压态、涟漪等全部动效：

val bgColor = Color(0xFF2196F3) // 示例背景色，替换为你自己的定义
Row(modifier = Modifier.padding(vertical = 12.dp)) {
    OutlinedButton( 
        onClick = {}, 
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(18.dp),
        // 按需自定义文本和按钮边框的内边距
        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 3.dp),
        modifier = Modifier
            // 核心修改：取消默认最小宽高限制
            .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp),
        // Compose 1.4+ 版本使用containerColor，低版本替换为backgroundColor
        colors = ButtonDefaults.outlinedButtonColors(containerColor = bgColor)
    ) {             
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2
        )               
    }               
}

方案2：自定义轻量按钮（更推荐自适应场景） #

如果你不需要OutlinedButton的全部复杂动效，可直接使用Surface自定义按钮，没有任何默认尺寸约束，完全自适应内容大小，天然适配系统字体大小变化：

val bgColor = Color(0xFF2196F3) // 示例背景色，替换为你自己的定义
Row(modifier = Modifier.padding(vertical = 12.dp)) {
    Surface(
        onClick = {},
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(18.dp),
        color = bgColor,
        // 可选：添加点击涟漪效果
        indication = rememberRipple(color = Color.White),
        interactionSource = remember { MutableInteractionSource() }
    ) {
        Text(
            "apple",
            color = Color.White,
            style = MaterialTheme.typography.body2,
            // 直接控制文本和边框的内边距，灵活度更高
            modifier = Modifier.padding(horizontal = 8.dp, vertical = 3.dp)
        )
    }
}

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