在 ChatGPT 这类对话页里一次回答通常不是一次性插入完整列表，而是同一条回答内容持续追加、同一个列表项不断变高。

这篇文章主要目标是：当列表处于自动贴底状态时最终一项每次内容更新、重组、高度变化，都能自然跟随到底部；当使用者进入自由滑动状态时最终一项继续更新也不应该把当前位置重新拉回底部。

这篇文章记录了实现这一目标的迭代过程：先从正向视觉的自动滚动开始，再尝试 LazyColumn 反向视觉。接下来用 snapshotFlow + scrollBy 做布局后的补偿，最终演进到一个基于 LazyLayout 的双锚点列表 AnchorLazyColumn。

背景的观点是。使用者痛点汇总

普通列表通常以“顶部”为视觉起点：新数据插入后只要保持当前首个可见项不变，使用者就不会感觉跳动。但 ChatGPT 类流式回答列表的关键点在最终一项：

1. 内容不足一屏时从顶部自然摆放。
2. 内容超过一屏后默认贴住底部。
3. 自动贴底状态下 — 最终一项重组变高时 viewport 同步跟随底部，不出现帧间空隙、追赶感或跳动。
4. 使用者向上滚动后 — 当前位置被锁定；底部继续追加也不抢夺视角。
5. 使用者滚回底部后 — 列表恢复自动跟随。

这类需求很容易被误解成“每次数据变化都滚到底部”。真正要解决的是高度变化和滚动跟随的时序： "最终一项先变高、下一帧再滚动" ——如果两者在不同帧完成，就会出现追赶感或跳动。

四个方案概览

This iteration can be split into four solutions:

1. 正向视觉 + rememberAutoScrollListState： 最终一项更新后再触发滚到底部。按理说，
2. Laz​​yColumn 反向视觉： 使用 reverseLayout。让最终一项高度变化更自然地发生在视觉底部。
3. s​napshotFlow + scrollBy： 继续使用正向视觉，在布局完成后根据最终一项尺寸补偿滚动。
4. A​nchorLazyColumn： 放弃布局后的补偿，把底部锚定和位置锁定放进 LazyLayout 的测量阶段。

The first three solutions all build on LazyColumn,differing only in scrolling strategy and visual direction. The fourth solution treats “anchor” as part of list’s own layout contract.

阶段 ：正向视觉 + rememberAutoScrollListState

The most direct implementation is to keep natural data order,list placed forward。n scroll to bottom when data changes:

val listState = rememberAutoScrollListState(
trigger = outputs.size to isStreaming,)
LazyColumn {
items { index ->
OutputItem
}
if ) {
item {
OutputItem
}
}
}

The helper rememberAutoScrollListState

@Composable
fun rememberAutoScrollListState(
listState: LazyListState = rememberLazyListState,enabled: Boolean = true,trigger: Any?): LazyListState {
var autoScroll = enabled
val isAtBottom by remember {
derivedStateOf { listState.isFullyScrolledToBottom }
}
LaunchedEffect {
if {
autoScroll = true
}
}
LaunchedEffect {
if {
listState.scrollToBottom
}
}
return listState
}

The scrolling logic relies on measuring layout info and possibly animating:

suspend fun LazyListState.scrollToBottom {
val lastIdx = layoutInfo.totalItemsCount - 1
if return
val delta = calculateBottomScrollDelta)
if {
animateScrollToItem
return
}
if {
animateScrollToItem
}
}

This approach is simple but problematic: last item recomposes and grows before list scrolls down again. Height change and scrolling happen in separate frames,producing a jumpy feel.

阶段 ：LazyColumn 反向视觉

The second solution uses reverseLayout=true so that items appear at bottom visually:

LazyColumn(
state = listState,reverseLayout = true,){
if ){
item{
OutputItem
}
}
for{
val sourceIndex=outputs.lastIndex - offset
item{
OutputItem
}
}
}

This mitigates jumpy behavior during streaming growth but still suffers when user is freely scrolling: as long as last item remains visible,its height changes can still drag viewport downward.

阶段 ：snapshotFlow + scrollBy

The third approach returns to normal orientation but listens for height changes on last item instead of just triggering a scroll after each data change.

• Use animateContentSize for height animation so that measurement sees real size.
• After layout finishes capture snapshotFlow of last item's size.
• If it overflows bottom edge apply scrollBy compensation.

LazyColumn(
state=listState,modifier=Modifier
.stickToBottom(
listState=listState,enabled=followLatest,)
.autoScrollAware(
onUserInteracted={followLatest=false},onUserInteractionEnd={
followLatest=listState.isFullyScrolledToBottom
},)。){
items{index->
OutputItem
}
}
`autoScrollAware` detects user touch interactions to toggle auto‑scroll mode.
`stickToBottom` monitors last visible item's size after layout and adjusts `scrollBy` accordingly.
This reduces obvious jumps but still has a timing gap because height change happens before scroll adjustment.

缺陷不足 


补偿时机天然偏晚 – layout finishes first n snapshotFlow reads new size – thus “height change → n scroll” sequence introduces small lag or chase effect under rapid updates or low frame rates.

Switch 娱乐ween “follow” and “lock” states isn’t a simple boolean – you risk re‑scrolling back to bottom every time you update data which steals user's position from history view.

Inertia/fling handling becomes tricky – custom drag handlers don’t propagate natural fling physics unless you use standard scrolling containers which don’t allow measurement‑time anchoring.


从新方案来看，双锚点 AnchorLazyColumn 


User Pain Point #1: Your chat always jumps when new lines appear while you’re reading older messages – this hurts focus.

User Pain Point #2: You want instant follow‑bottom during typing but also want to pause that when exploring conversation history without being pulled back automatically.

The core idea: move anchoring into measurement rar than post‑layout compensation.
kotlin
enum class AnchorMode{
Bottom,// viewport locked at bottom – ideal for streaming output.
Locked // viewport stays where user left it – ideal for browsing history.
}
@Composable
fun rememberAnchorLazyListState: AnchorLazyListState =
remember{ AnchorLazyListState }
val state=rememberAnchorLazyListState
AnchorLazyColumn(
modifier=Modifier.fillMaxSize,state=state,){
items{
OutputItem
}
 if){
unstableItem{
OutputItem
}
}


}


The key part lies in measureBottom & measureLocked functions inside AnchorLazyLayout. In Bottom mode each pass measures from end toward top until enough space fills viewport – any height increase immediately shifts placement within same frame so no separate scroll command needed. When user drags upward anchor switches to Locked mode recording current firstVisibleIndex & offset. Subsequent updates do not affect that position unless user returns to bottom again – n automatic switch back occurs.

迭代流程 



. 保留 LazyColumn → 用 animateContentSize,snapshotFlow+scrollBy 补偿高度 → 能解决部分追尾问题，但仍有帧间差距。• 第一步先验证“高度变化后要跟随到底部”是正确方向。话说回来，• 后置补偿始终晚于布局 → 可见追赶感。按理说，• 原因是“底部锚定太晚”。必须在同一次 measure pass 内确定位置。• 改为自定义测量并从末尾往前测量即实现 Bottom 锚定。• 当使用者滑动 → 切到 Locked 并记录首个可见索引与裁剪偏移。• 回到底部则恢复 Bottom 再触发 flush。


 


快速搭建

kts

internal fun MeasureResult.measureImpl{…} 

// see full source above

请问还有什么想进一步改进的吗？