android - 如何在 Jetpack compose OutlinedButton 中删除或减少填充

Question

无法减少 OutlinedButton 中的巨大填充。尝试了 contentPadding、修饰符填充等。无法减少文本“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 中删除了高度 - 理想情况下，我希望它像“包装内容”。进行更改后，我仍然可以看到填充。底线我不希望指定任何绝对高度，以便它可以使用与系统设置不同的字体大小。

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),
        )               
    }               
}

Answer 1

Button有 default min size修饰符。这是根据 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",
    )
}