Jetpack Compose：当按钮尺寸较小时如何避免按钮文本消失？

Question

我正在尝试创建一个自定义按钮，它很小并且可以显示 0 到 99 之间的数值作为文本。根据字体大小，当 Button 的大小设置得太小时，文本将从 Button 中消失，即使仍有空间。尽管尺寸很小，但我如何通过这些限制并在 Button 内显示数字？

这是我当前的代码：

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}

在此按钮大小下，文本消失。

Answer 1

Button

有一个默认的

contentPadding

，它在容器和内容之间内部应用。
默认值 (

ButtonDefaults.ContentPadding

) 是：

private val ButtonHorizontalPadding = 16.dp
private val ButtonVerticalPadding = 8.dp

您可以覆盖它，将

contentPadding = PaddingValues(0.dp)

之类的内容添加到

Button

:

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp),
    contentPadding = PaddingValues(0.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}