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

Question

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

这是我当前的代码：

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