如何在Jetpack Compose OutlinedButton中删除或减少填充

Question

无法减小OutlinedButton中巨大的填充。尝试使用contentPadding、modifier padding等方法，但无法减小文本“apple”的填充。有什么建议吗？我应该使用其他类型的组合组件吗？

OutlinedButton(     
    onClick = {},       
    border = BorderStroke(1.dp, Color.White),
    shape = RoundedCornerShape(12.dp),
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier 
        .background(bgColor)
        .height(24.dp)      
        .padding(all = 0.dp),
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)) {
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.height(10.dp).padding(vertical = 0.dp), //.background(bgColor),
        )               
    }

在 @liveAnyway 给出的答案之后，我进行了更新（谢谢！），这似乎有所帮助。然后我也从 OutlinedButton 中删除了 height - 理想情况下我希望它像“wrap-content”一样。一旦我进行了更改，仍然可以看到填充。总之，我不希望指定任何绝对高度，以便它可以适应来自系统设置的不同字体大小。

Row(modifier = Modifier.padding(vertical = 12.dp)) {
    OutlinedButton( 
        onClick = {}, 
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(18.dp),
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier
            .background(bgColor)
            .padding(all = 0.dp),
        colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)
    ) {             
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.padding(vertical = 0.dp),
        )               
    }               
}

- rysv

---

在Text中删除height(10.dp)修饰符设置。 - liveAnyway

谢谢，@liveAnyway。那很有帮助。但是，一旦我删除所有绝对高度值，仍然会看到填充，你有什么想法吗？ - rysv

Answer 1

Button 默认使用 最小尺寸限制修饰符。这是根据 Material 设计指南完成的，以便按钮易于点击。如果控件尺寸太小，用户可能无法点击，更改此参数时请考虑到这一点。

你可以通过应用 defaultMinSize 修饰符来覆盖它。将忽略 0.dp，但从 1.dp 开始，您将获得所需的结果：

OutlinedButton(
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(),
    modifier = Modifier
        .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
) {
    Text(
        "Apple",
    )
}

---

另外，您可以设计自己的按钮，而不受这些限制的影响：

Surface(
    onClick = {

    },
    shape = MaterialTheme.shapes.small,
    color = bgColor,
    contentColor = MaterialTheme.colors.primary,
    border = ButtonDefaults.outlinedBorder,
    role = Role.Button,
) {
    Text(
        "Apple",
    )
}

- Phil Dukhov

---

按钮周围仍会有额外的填充。要完全删除它，请查看 https://dev59.com/t1EG5IYBdhLWcg3wRIid#70031001。 - vovahost

哇，真是让人惊讶。为什么有人会编写一个在默认最小尺寸为0.dp时默默忽略它，但却允许1.dp的代码呢？从实际效果来看，这两者都存在同样的问题。这浪费了我一个小时的时间。 - undefined

Answer 2

您需要更改minHeight（默认大小为MinWidth = 64.dp和MinHeight = 36.dp），并使用contentPadding = PaddingValues（0.dp）删除contentPadding：

 OutlinedButton(
        onClick = {},
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(12.dp),
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier.defaultMinSize(
                minWidth = ButtonDefaults.MinWidth,
                minHeight = 10.dp
         )
    ) {
        Text(
            "apple",
            style = MaterialTheme.typography.body2
        )
    }

- Gabriele Mariotti