Jetpack Compose：如何实现含未知数量项的可展开/折叠FlowRow视图？

你的现有方案性能差的核心原因是：靠onSizeChanged触发重组来调整显示项数，每次布局变化都会重复计算和重组，项多的时候必然产生大量无效操作；而heightIn只是限制了布局尺寸，FlowRow仍然会渲染所有子项，只是被裁剪，根本没减少渲染开销。

优先选SubcomposeLayout，而非自定义Layout #

• SubcomposeLayout的优势：它支持分阶段布局——先部分子项布局，拿到尺寸数据后再决定是否继续布局剩余项。刚好适配你“折叠状态下只渲染100dp高度内的项”的需求，能从根源上避免无效的子项渲染和重组。
• 自定义Layout的劣势：如果用自定义Layout，你得自己实现FlowRow的换行逻辑，相当于重写一遍FlowRow的核心功能，工作量大且容易出错。SubcomposeLayout可以复用现成的FlowRow布局逻辑，只在子项加载阶段做控制，成本低很多。

核心实现思路 #

1. 展开状态：直接subcompose所有子项，用标准FlowRow完成布局即可。
2. 折叠状态：
   • 逐步subcompose单个子项，测量其尺寸；
   • 模拟FlowRow的换行逻辑，累加行高，直到总高度超过100dp时停止subcompose剩余项；
   • 只对已subcompose的项进行布局，确保总高度不超过上限。

简化版代码示例 #

@Composable
fun CollapsibleFlowRow(
    items: List<String>,
    expanded: Boolean,
    collapsedMaxHeight: Dp = 100.dp,
    modifier: Modifier = Modifier,
    content: @Composable (String) -> Unit
) {
    val collapsedMaxHeightPx = with(LocalDensity.current) { collapsedMaxHeight.toPx() }
    
    SubcomposeLayout(modifier) { constraints ->
        if (expanded) {
            // 展开状态：直接渲染全部子项
            val flowRow = subcompose("Expanded") {
                FlowRow {
                    items.forEach { content(it) }
                }
            }.first()
            val placeable = flowRow.measure(constraints)
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        } else {
            // 折叠状态：逐步加载子项直到高度超限
            var totalHeight = 0
            val placeables = mutableListOf<Placeable>()
            var currentIndex = 0
            val maxWidth = constraints.maxWidth

            while (currentIndex < items.size && totalHeight <= collapsedMaxHeightPx) {
                val item = subcompose("Item_$currentIndex") {
                    content(items[currentIndex])
                }.first()
                val placeable = item.measure(constraints.copy(minWidth = 0))
                
                // 简化的换行判断：当前行放不下就换行累加高度
                if (placeables.sumOf { it.width } + placeable.width > maxWidth) {
                    totalHeight += placeable.height
                } else if (placeables.isEmpty()) {
                    totalHeight += placeable.height
                }
                
                placeables.add(placeable)
                currentIndex++
            }

            val finalHeight = minOf(totalHeight, collapsedMaxHeightPx.toInt())
            layout(maxWidth, finalHeight) {
                var xPos = 0
                var yPos = 0
                placeables.forEach { placeable ->
                    if (xPos + placeable.width > maxWidth) {
                        xPos = 0
                        yPos += placeable.height
                        if (yPos > finalHeight) return@forEach
                    }
                    placeable.place(xPos, yPos)
                    xPos += placeable.width
                }
            }
        }
    }
}

注意：示例中的换行逻辑是简化版，要实现和官方FlowRow完全一致的换行规则，可以参考官方FlowRow的源码来完善高度计算逻辑，这样能更精准地控制折叠状态下的显示项数。

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