如何从文本按钮中删除填充？答案

【问题标题】：How to remove padding from Text button?如何从文本按钮中删除填充？
【发布时间】：2021-09-08 06:33:05
【问题描述】：

我正在尝试从TextButton 中删除填充，但它不起作用。

TextButton(
    onClick = {},
    modifier = Modifier.padding(0.dp)
) {
    Text(
        " ${getString(R.string.terms_and_conditions)}",
        color = MaterialTheme.colors.primary,
        fontFamily = FontFamily(Font(R.font.poppins_regular)),
        fontSize = 10.sp,
    )
}

我也尝试在Modifier 属性中设置height 和size，但填充仍然存在

【问题讨论】：

标签： android kotlin android-jetpack-compose android-compose-button

【解决方案1】：

用CompositionLocalProvider 包裹TextButton 以覆盖LocalMinimumTouchTargetEnforcement 的值。这只会删除额外的边距，但不会修改硬编码的 defaultMinSize。

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    TextButton(
        onClick = {},
        contentPadding = PaddingValues(),
    ) {
        Text(
            "Button",
            color = MaterialTheme.colors.primary,
            fontSize = 10.sp,
        )
    }
}

【讨论】：

TextButton 使用的是Button，它使用Surface 包装内容，其中添加了modifier.minimumTouchTargetSize()。此修饰符使用LocalMinimumTouchTargetEnforcement。看看这里cs.android.com/androidx/platform/frameworks/support/+/…
确实，错过了那个。这仍然不会完全删除填充，只有 ButtonDefaults.MinHeight 和 minimumTouchTargetSize.height 之间的区别。

【解决方案2】：

您不能使用 padding 修饰符减少填充：tt 总是在现有填充的顶部添加额外的填充。有关修饰符顺序的更多详细信息，请参阅this reply。

您可以通过指定PaddingValues(0.dp) 来使用contentPadding 参数减少TextButton 填充，但这不会完全删除填充。

如果您需要完全移除填充，您可以使用 clickable 修饰符：

Text(
    "getString(R.string.terms_and_conditions",
    color = MaterialTheme.colors.primary,
    fontFamily = FontFamily(Font(R.font.neris_semi_bold)),
    fontSize = 10.sp,
    modifier = Modifier
        .clickable {
            // onClick()
        }
)

如果你想改变波纹的颜色，就像TextButton做的那样，你可以这样做：

.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(color = MaterialTheme.colors.primary),
) {
    
}

【讨论】：

【解决方案3】：

您可以通过更改 contentPadding 并应用固定大小来实现它：

TextButton(
    onClick = {},
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier.height(20.dp).width(40.dp)
) {
    Text(
        "Button",
        color = MaterialTheme.colors.primary,
        fontSize = 10.sp,
    )
}

【讨论】：