让LazyVerticalGrid子项根据固有最大宽度自动调整spanSize

需求明确 #

• 基于LazyVerticalGrid展示含文本的布局组件
• 文本固有最大宽度超过单列宽度时，子项自动占用2列及以上空间，优先保证文本单行显示，仅在空间不足时换行
• 排除FlowRow：无列对齐机制，无法保证子项宽度为「列宽+间距」的倍数

核心思路 #

要实现该效果，关键是在确定子项跨度（span）前，先获取文本/子项的固有宽度，再结合单列宽度计算所需跨列数。LazyVerticalGrid的spans参数支持自定义每个item的跨度，配合预测量文本宽度即可实现需求。

具体实现步骤 #

1. 计算单列实际可用宽度 #

先算出单列的有效宽度（总宽度扣除间距后平分到每一列）：

val columnCount = 3 // 网格总列数
val spacing = 16.dp // 列间距
val singleColumnWidth = (LocalConfiguration.current.screenWidthDp.dp - (columnCount - 1) * spacing) / columnCount

2. 预测量文本宽度并设置span #

利用TextMeasurer预测量文本宽度，再计算需要跨的列数，最后通过spans配置：

val textMeasurer = rememberTextMeasurer()

LazyVerticalGrid(
    columns = GridCells.Fixed(columnCount),
    horizontalArrangement = Arrangement.spacedBy(spacing),
    verticalArrangement = Arrangement.spacedBy(spacing),
    contentPadding = PaddingValues(16.dp)
) {
    val items = listOf("短文本", "较长的文本内容需要跨列显示", "超长长长长长长长长长的文本内容直接占满所有列")
    
    items(items) { item ->
        Text(
            text = item,
            fontSize = 16.sp,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
    
    spans {
        items.forEachIndexed { index, item ->
            // 预测量文本宽度（需与实际Text样式一致）
            val textWidth = with(LocalDensity.current) {
                textMeasurer.measure(
                    text = item,
                    style = TextStyle(fontSize = 16.sp)
                ).width.toDp()
            }
            // 计算跨列数：至少1列，最多不超过总列数
            val spanCount = maxOf(1, ceil(textWidth / singleColumnWidth).toInt())
                .coerceAtMost(columnCount)
            
            itemSpan(index, spanCount)
        }
    }
}

3. 复杂子项的处理 #

如果子项是包含Text的复杂Layout，可通过SubcomposeLayout提前测量整个子项的固有宽度，再计算span：

// 自定义可预测量的子项组件
@Composable
fun MeasurableItem(
    content: @Composable () -> Unit,
    onMeasure: (Dp) -> Unit
) {
    SubcomposeLayout { constraints ->
        val measurable = subcompose("content", content).first()
        val placeable = measurable.measure(constraints.copy(maxWidth = Constraints.Infinity))
        onMeasure(with(LocalDensity.current) { placeable.width.toDp() })
        layout(placeable.width, placeable.height) {
            placeable.place(0, 0)
        }
    }
}

在LazyVerticalGrid中使用时，先收集所有子项的宽度，再统一设置span（需注意状态管理避免重组循环）。

关键注意点 #

• 预测量时的文本样式（字体大小、字重、行高等）必须与实际子项完全一致，否则宽度计算会出现偏差
• 跨列数需限制在总列数范围内，避免出现布局异常
• layout()函数无法用于动态修改span：它属于测量布局阶段，而span是在布局前就需要确定的参数，因此无法在此阶段调整跨度

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