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

Question

我正在尝试创建一个自定义按钮，该按钮很小并且可以将 0 到 99 之间的数值显示为文本。根据字体大小，当 Button 的大小设置得太小时，文本将从 Button 中消失，即使仍然存在 space。尽管 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,
    )
}