Jetpack Compose: как избежать исчезновения текста кнопки, когда размер кнопки маленький?

Question

Я пытаюсь создать небольшую пользовательскую кнопку, которая может отображать числовое значение от 0 до 99 в виде текста. В зависимости от размера шрифта текст исчезает с кнопки, если размер кнопки слишком мал, даже если место еще остается. Как пройти эти ограничения и показать числа внутри кнопки, несмотря на небольшой размер?

Это мой текущий код:

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

При этом размере кнопки текст исчезает.

Answer 1

В имеет значение по умолчанию 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,
    )
}