如何删除或减少 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有默认的最小尺寸修饰符。这是根据材质指南完成的，以便轻松点击按钮。如果控件尺寸太小，用户可能会在点击时遇到问题，更改此参数时请考虑到这一点。

您可以通过应用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 contentPadding = PaddingValues(0.dp)：

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