如何在 Jetpack compose OutlinedButton 中删除或减少填充答案

【问题标题】：How to remove or reduce padding in Jetpack compose OutlinedButton如何在 Jetpack compose OutlinedButton 中删除或减少填充
【发布时间】：2021-09-13 01:51:06
【问题描述】：

无法减少 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),
        )               
    }               
}

【问题讨论】：

删除Text中的height(10.dp)修饰符设置。
谢谢，@liveAnyway。这有帮助。但是，一旦我删除所有绝对高度值，我仍然会看到填充，知道吗？

标签： android material-ui android-jetpack-compose android-jetpack-compose-button

【解决方案1】：

Button 有 default min size 修饰符。这是根据材料指南完成的，因此按钮很容易被点击。如果控件尺寸太小，用户可能会遇到问题，请在更改此参数时考虑到这一点。

您可以通过应用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",
    )
}

【讨论】：

按钮周围仍然会有额外的填充。要完全删除它，请检查stackoverflow.com/a/70031001/1502079

【解决方案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
        )
    }

【讨论】：