如何删除或减少 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 中删除了高度 - 理想情况下我希望它像“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),
        )               
    }               
}

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

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

如何删除或减少 Jetpack 中的填充 compose OutlinedButton

How to remove or reduce padding in Jetpack compose OutlinedButton

android

material-ui

android-jetpack-compose

android-jetpack-compose-button