如何确定Jetpack Compose FlowRow溢出时实际可见的Chip

问题描述 #

我使用Accompanist Compose Foundation提供的FlowRow构建UI，配置了maxLines = 3和FlowRowOverflow.expandIndicator处理溢出场景：当Chip数量超出可视空间时，部分Chip会被隐藏，替换为“展开”按钮。目前需要在运行时准确判断哪些Chip是实际显示给用户的（未被溢出隐藏、位于“更多”按钮之前的项）。

尝试过两种方案但均失效：

• 通过Chip的onTextLayout回调收集宽度，估算可容纳的项，但溢出时不可见的Chip不会触发该回调，导致状态失效；
• 用状态列表跟踪触发onTextLayout的Chip，同样因为不可见Chip无回调而无法获取完整数据。

官方FlowRowAPI未提供获取可见项的回调或索引列表，需要一种可靠、符合Compose状态驱动风格、能适配布局/数据动态变化的解决方案。

示例代码：

FlowRow(
    maxLines = 3,
    overflow = FlowRowOverflow.expandIndicator { /* 展开按钮逻辑 */ }
) {
    chipList.forEach { chip ->
        Chip(
            text = chip,
            onTextLayout = { /* 尝试收集宽度用于估算 */ }
        )
    }
}

可行解决方案：基于SubcomposeLayout预测量计算可见范围 #

核心思路是利用Compose的SubcomposeLayout先预测量所有Chip和溢出指示器的尺寸，再模拟FlowRow的换行逻辑，结合maxLines和可用空间计算出能显示的Chip数量。这种方式能准确获取可见项，且完全遵循Compose的状态驱动范式。

实现代码 #

@Composable
fun TrackableFlowRow(
    chipList: List<String>,
    maxLines: Int = 3,
    onVisibleChipsChanged: (List<String>) -> Unit,
    overflowIndicator: @Composable () -> Unit,
    content: @Composable (String) -> Unit
) {
    val overflowIndicatorSize = remember { mutableStateOf(IntSize.Zero) }
    val chipSizes = remember(chipList) { mutableMapOf<String, IntSize>() }

    SubcomposeLayout { constraints ->
        // 1. 预测量溢出指示器尺寸
        val overflowPlaceables = subcompose("overflow") { overflowIndicator() }
            .map { it.measure(constraints.copy(minWidth = 0, minHeight = 0)) }
        overflowIndicatorSize.value = overflowPlaceables.firstOrNull()?.size ?: IntSize.Zero

        // 2. 预测量所有Chip的尺寸
        val chipPlaceables = subcompose("chips") {
            chipList.forEach { chip ->
                Box(modifier = Modifier.onGloballyPositioned {
                    chipSizes[chip] = it.size
                }) {
                    content(chip)
                }
            }
        }.map { it.measure(constraints.copy(minWidth = 0, minHeight = 0)) }

        // 3. 模拟FlowRow换行逻辑，计算可见Chip数量
        var currentLineWidth = 0
        var currentLineCount = 1
        var visibleChipCount = 0
        val availableWidth = constraints.maxWidth

        for (i in chipList.indices) {
            val chipWidth = chipSizes[chipList[i]]?.width ?: chipPlaceables[i].width
            if (currentLineWidth + chipWidth > availableWidth) {
                currentLineCount++
                currentLineWidth = chipWidth
                if (currentLineCount > maxLines) break
            } else {
                currentLineWidth += chipWidth
            }
            visibleChipCount++
        }

        // 检查最后一行是否能放下溢出指示器，放不下则减少一个可见Chip
        val hasOverflow = visibleChipCount < chipList.size
        if (hasOverflow) {
            val lastLineRemaining = availableWidth - currentLineWidth
            val overflowWidth = overflowIndicatorSize.value.width
            if (lastLineRemaining < overflowWidth) {
                visibleChipCount--
            }
        }

        // 更新可见Chip列表
        val visibleChips = chipList.take(visibleChipCount)
        LaunchedEffect(visibleChips) {
            onVisibleChipsChanged(visibleChips)
        }

        // 4. 布局可见Chip和溢出指示器
        layout(constraints.maxWidth, constraints.maxHeight) {
            var x = 0
            var y = 0
            var lineHeight = 0

            // 放置可见Chip
            for (i in 0 until visibleChipCount) {
                val placeable = chipPlaceables[i]
                if (x + placeable.width > availableWidth) {
                    y += lineHeight
                    lineHeight = 0
                    x = 0
                }
                placeable.placeRelative(x, y)
                x += placeable.width
                lineHeight = maxOf(lineHeight, placeable.height)
            }

            // 放置溢出指示器
            if (hasOverflow) {
                overflowPlaceables.firstOrNull()?.let { placeable ->
                    if (x + placeable.width > availableWidth) {
                        y += lineHeight
                        x = 0
                    }
                    placeable.placeRelative(x, y)
                }
            }
        }
    }
}

使用方式 #

var visibleChips by remember { mutableStateOf(emptyList<String>()) }

TrackableFlowRow(
    chipList = chipList,
    maxLines = 3,
    onVisibleChipsChanged = { visibleChips = it },
    overflowIndicator = {
        Chip(text = "更多", onClick = { /* 展开逻辑 */ })
    }
) { chip ->
    Chip(text = chip, onClick = { /* Chip点击事件 */ })
}

// 直接使用visibleChips即可获取当前显示的Chip列表
Text(text = "当前可见Chip：${visibleChips.joinToString()}")

方案优势 #

• 准确性：通过预测量所有子项尺寸，完全复现FlowRow的布局逻辑，计算结果精准；
• Compose原生风格：基于SubcomposeLayout实现，遵循状态驱动，自动适配数据更新、屏幕旋转等动态场景；
• 灵活性：可根据需求调整换行规则、溢出指示器的尺寸计算逻辑，适配不同布局场景；
• 低耦合：不依赖AccompanistFlowRow的内部实现，避免API变更带来的兼容性问题。

备选方案：基于坐标判断（可靠性较低） #

如果坚持使用AccompanistFlowRow，可以尝试通过Modifier.onGloballyPositioned监听FlowRow和每个Chip的坐标，判断Chip是否在可视范围内。但这种方法存在局限性：溢出被隐藏的Chip可能不会被布局，导致onGloballyPositioned不触发，无法获取坐标。

示例代码：

val flowRowBounds = remember { mutableStateOf(Rect.Zero) }
val chipBoundsMap = remember(chipList) { mutableMapOf<String, Rect>() }

FlowRow(
    maxLines = 3,
    overflow = FlowRowOverflow.expandIndicator { /* ... */ },
    modifier = Modifier.onGloballyPositioned {
        flowRowBounds.value = it.boundsInWindow()
    }
) {
    chipList.forEach { chip ->
        Chip(
            text = chip,
            modifier = Modifier.onGloballyPositioned {
                chipBoundsMap[chip] = it.boundsInWindow()
            }
        )
    }
}

// 计算可见Chip（仅适用于未被完全隐藏的Chip）
val visibleChips = chipList.filter { chip ->
    chipBoundsMap[chip]?.let { flowRowBounds.value.contains(it.center) } ?: false
}

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