如何在Jetpack Compose中固定显示7个ChartBar并检测高度变化？

问题1：保持水平内边距，屏幕内始终显示7个ChartBar #

不需要用Layout()和Measurables，直接通过计算宽度就能实现：

1. 计算单条宽度：先获取屏幕可用宽度，减去左右内边距的总和；如果需要条形之间的间距，还要减去所有间距的总宽度，最后除以7得到每个ChartBar的宽度。
2. 设置LazyRow内边距：给LazyRow添加contentPadding来保留水平内边距。

示例代码：

val configuration = LocalConfiguration.current
val screenWidthDp = configuration.screenWidthDp.dp
val horizontalPadding = 16.dp // 自定义水平内边距
val barSpacing = 4.dp // 条形之间的间距

// 计算单个条形的宽度：总可用宽度 = 屏幕宽度 - 左右内边距 - 6个间距（7个条有6个间隙）
val barWidth = (screenWidthDp - 2 * horizontalPadding - 6 * barSpacing) / 7

val scrollState = rememberLazyListState(0)

LazyRow(
    reverseLayout = true,
    state = scrollState,
    contentPadding = PaddingValues(horizontal = horizontalPadding),
    horizontalArrangement = Arrangement.spacedBy(barSpacing)
) {
    items(charts) { data ->
        ChartBar(
            modifier = Modifier.width(barWidth),
            data = data
        )
    }
}

问题2：滑动后检测新显示条形是否更高并触发动作 #

同样不需要自定义Layout()，利用LazyListState的滚动监听即可实现：

1. 记录历史最高值：用mutableStateOf保存之前显示的最高条形高度（或数据中的高度值）。
2. 监听可见项变化：通过snapshotFlow监听scrollState.layoutInfo.visibleItemsInfo的变化，获取当前可见的所有条形，计算最大值并和历史值比较，若更高则触发动作。

示例代码：

val scrollState = rememberLazyListState(0)
// 假设你的图表数据中有height字段，用来表示条形高度
var previousMaxHeight by remember { mutableStateOf(0f) }

LaunchedEffect(scrollState) {
    snapshotFlow { scrollState.layoutInfo.visibleItemsInfo }
        .distinctUntilChanged() // 仅当可见项变化时触发
        .collect { visibleItems ->
            // 从数据中获取当前可见条形的最大高度
            val currentMax = visibleItems.maxOfOrNull { charts[it.index].height } ?: 0f
            
            if (currentMax > previousMaxHeight) {
                // 这里写你要触发的动作，比如更新UI、调用业务逻辑方法
                // 示例：triggerAction()
                previousMaxHeight = currentMax // 更新历史最高值
            }
        }
}

// 下面是你的LazyRow代码
LazyRow(
    reverseLayout = true,
    state = scrollState,
    // ... 其他配置
) {
    items(charts) { data ->
        ChartBar(data = data)
    }
}

如果需要获取条形的实际绘制高度而非数据中的值，可以给每个ChartBar添加Modifier.onSizeChanged来记录高度，存入一个Map中，再在监听逻辑中从Map里取对应索引的高度进行比较。

是否需要用Layout()和Measurables？ #

不需要。这两个问题都可以通过Compose提供的现有API解决：宽度计算依赖LocalConfiguration和布局参数，滚动监听依赖LazyListState的状态流。Layout()和Measurables主要用于自定义复杂的布局规则，比如非常规的排列方式，当前场景完全用不到。

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