Jetpack Compose自定义文本列表问题：Row无法随内容自适应

核心问题分析 #

• LazyColumn 用法错误：你在LazyColumn的单个item里通过forEach渲染所有MegaCard，这会把所有卡片一次性加载到一个列表项中，既失去了LazyColumn的懒加载特性，还会导致布局计算异常。
• Row 未处理内容溢出：Row默认不支持自动换行，当itemList元素过多时，内容会超出屏幕范围，表现为“无法随内容自动扩展”。
• GameCircle 绘制逻辑问题：drawCircle使用size.maxDimension作为半径，会让圆形过大，超出文字实际范围，进一步挤压布局空间。

修复后的代码 #

1. 修正 LazyColumn 列表项渲染方式 #

用items替代单个item+forEach，让LazyColumn正确实现懒加载：

@Composable
fun NumberList(viewModel: HomeViewModel) {
    val gameList = viewModel.numberList

    LazyColumn(
        modifier = Modifier.padding(top = 24.dp),
        content = {
            items(gameList) { item ->
                MegaCard(item = item)
            }
        })
}

2. 让卡片内元素适配内容（二选一） #

方案A：自动换行（推荐）

使用FlowRow实现元素自动换行（需依赖androidx.compose.foundation:foundation-layout库）：

@Composable
fun MegaCard(item: String) {
    val itemList = item.split("-")
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(horizontal = 16.dp, vertical = 4.dp)
    ) {
        FlowRow(
            modifier = Modifier.padding(3.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            itemList.forEach { number ->
                GameCircle(number)
            }
        }
    }
}

方案B：横向滚动

给Row添加滚动支持，适合元素数量不多的场景：

@Composable
fun MegaCard(item: String) {
    val itemList = item.split("-")
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(horizontal = 16.dp, vertical = 4.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(3.dp)
                .horizontalScroll(rememberScrollState()),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            itemList.forEach { number ->
                GameCircle(number)
            }
        }
    }
}

3. 修正 GameCircle 圆形绘制逻辑 #

调整半径计算，让圆形刚好包裹文字：

@Composable
fun GameCircle(number: String) {
    val megaColor = colorResource(id = R.color.mega_green)
    Text(
        modifier = Modifier
            .padding(8.dp)
            .drawBehind {
                val radius = size.minDimension / 2
                drawCircle(
                    color = megaColor,
                    radius = radius
                )
            },
        text = number,
        style = MaterialTheme.typography.body2,
        color = Color.White,
        fontSize = 18.sp
    )
}

额外优化建议 #

• 若使用FlowRow，需在build.gradle中添加依赖：implementation "androidx.compose.foundation:foundation-layout:${compose_version}"（替换为你的Compose版本）。
• 通过spacedBy设置元素间距，提升整体视觉舒适度。

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