如何在Jetpack Compose中实现随内容动态适配的圆形数字徽章

问题描述 #

需要实现一行显示5个包含0-99数字的圆形组件，要求圆形尺寸根据数字位数（如1比88占用空间小）和字体大小动态调整。当前常规字体下显示正常，但大字体时数字会溢出圆形容器或容器变形，现有代码如下：

@Composable
fun TestBadges(numbers: List<Int>, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        numbers.forEachIndexed { index, number ->
            Badge(
                number = number, modifier = Modifier.weight(1f),
            )
            if (index != numbers.size - 1) {
                BlueDivider()
            }
        }
    }
}

@Composable
private fun Badge(
    number: Int,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .aspectRatio(1f)
            .background(color = Color.Gray, shape = CircleShape),
        contentAlignment = Alignment.Center,
    ) {
        Text(
            text = number.toString(),
            style = MaterialTheme.typography.h4,
        )
    }
}

问题根源 #

现有代码使用weight(1f)强制徽章占满行内权重空间，再通过aspectRatio(1f)维持圆形，但这种固定拉伸的方式无法适配文本实际尺寸。大字体时文本超出容器边界，导致溢出或容器变形。

解决方案 #

核心思路是让圆形容器基于文本的实际尺寸动态调整大小，同时保证圆形比例和布局规则：

1. 动态适配文本尺寸的徽章组件 #

通过onTextLayout获取文本的实际宽高，让圆形容器的大小等于文本尺寸加上内边距，同时保证宽高一致维持正圆：

@Composable
private fun Badge(
    number: Int,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = MaterialTheme.typography.h4,
    internalPadding: Dp = 8.dp
) {
    var textSize by remember { mutableStateOf(IntSize.Zero) }

    Box(
        modifier = modifier
            .size(
                // 取宽高中较大值加双倍内边距，保证正圆且文本不贴边
                size = max(textSize.width.toDp(), textSize.height.toDp()) + internalPadding * 2
            )
            .background(color = Color.Gray, shape = CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = number.toString(),
            style = textStyle,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            onTextLayout = { layoutResult ->
                textSize = layoutResult.size
            }
        )
    }
}

2. 优化行布局 #

移除weight(1f)，让徽章自适应内容大小，通过horizontalArrangement控制间距，确保一行能放下5个组件：

@Composable
fun TestBadges(numbers: List<Int>, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier.fillMaxWidth().padding(horizontal = 16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        numbers.forEachIndexed { index, number ->
            Badge(number = number)
            if (index != numbers.size - 1) {
                // 调整分隔线尺寸适配徽章高度
                BlueDivider(modifier = Modifier.height(24.dp).width(1.dp))
            }
        }
    }
}

3. 大字体适配增强（可选） #

如果需要支持超大字体时自动缩小文本避免溢出，可以使用AutoSizeText替代普通Text：

AutoSizeText(
    text = number.toString(),
    style = textStyle,
    maxLines = 1,
    autoSizeMinTextSize = 12.sp,
    autoSizeMaxTextSize = textStyle.fontSize,
    autoSizeStepGranularity = 2.sp,
    onTextLayout = { layoutResult ->
        textSize = layoutResult.size
    }
)

说明 #

• 容器大小由文本尺寸+内边距决定，不同位数的数字会自动对应不同大小的圆形。
• max()函数确保容器始终是正圆，不会因文本宽高差异变成椭圆。
• 行布局通过SpaceEvenly保证5个徽章均匀分布在一行，同时保留合适的间距。

内容的提问来源于stack exchange，提问作者Martyna Maron