[Android Compose] 拒绝闪烁！打造丝滑的聊天页面列表（仿微信效果）

前言：那个该死的"闪动"

最近在用 Jetpack Compose 开发一个聊天功能时，遇到一个非常经典的需求：进入页面，默认展示最底部的最新消息。

作为一个从 View 体系转过来的开发者，我第一反应写出了如下代码：

kotlin 复制代码

// ❌ 错误示范：直觉的做法
val listState = rememberLazyListState()

// 监听数据变化，一旦有数据就滚到底部
LaunchedEffect(messages) {
    if (messages.isNotEmpty()) {
        listState.scrollToItem(messages.lastIndex)
    }
}

LazyColumn(state = listState) {
    items(messages) { msg -> MessageItem(msg) }
}

代码写完一运行，功能确实实现了，但体验非常糟糕：

每次进入页面，列表会先显示顶部的历史消息（哪怕只有一瞬间），然后"唰"的一下跳到底部。这就是所谓的**"闪动"**（Flickering）。用户肉眼能明显捕捉到这个滚动的过程，显得 App 很卡顿、不精致。

为什么会闪动？

Compose 的渲染机制决定了 LaunchedEffect 是在组合（Composition）和布局（Layout）完成之后才执行的。

也就是说：

Compose 先绘制了列表的第一帧（默认从 index 0 开始，也就是顶部）。
绘制完成后，LaunchedEffect 启动，执行 scrollToItem。
列表瞬间跳转到底部。

虽然这个过程很快，但只要先渲染了顶部，用户就能看见。

业界标准解法：`reverseLayout = true`

其实，像微信、Telegram、WhatsApp 这些主流聊天软件，它们的列表逻辑在底层是**"倒着"**来的。

在 Compose 的 LazyColumn 中，有一个神奇的参数叫 reverseLayout。

Kotlin

kotlin 复制代码

LazyColumn(
    reverseLayout = true, // ✨ 魔法开关
    // ...
)

原理解析

当 reverseLayout = true 时，LazyColumn 的坐标系发生了翻转：

起始点（Start） 变成了屏幕的底部。
列表延伸方向 变成了 从下往上。
Index 0 的 Item 会被渲染在最底部。

这意味着：我们不需要手动写任何滚动代码！

因为列表的"头"就在底部，数据加载进来时，默认渲染的就是"头"，也就是底部。这直接从根源上消灭了"先渲染顶部再滚动"的时间差。

最佳实践代码

要实现这个方案，唯一需要注意的就是数据的顺序。

通常后端返回的数据是按时间正序排列的： $旧消息, ..., 新消息$ 。

但在 reverseLayout 模式下，底部是 Index 0。为了让最新消息显示在底部，我们需要让最新消息成为列表的第一个元素。

方案 A：在 UI 层反转数据（推荐简单场景）

Kotlin 复制代码

@Composable
fun ChatScreen(messages: List<Message>) {
    // 假设 messages 是 [Old -> New]
    
    LazyColumn(
        reverseLayout = true, // 1. 翻转布局，底部为起点
        modifier = Modifier.fillMaxSize()
    ) {
        // 2. 翻转数据源
        // 这样 Index 0 (底部) 拿到的就是 List 的最后一个元素 (最新消息)
        items(messages.reversed()) { message ->
            MessageItem(message)
        }
    }
}

方案 B：数据源直接倒序（推荐复杂场景）

如果在 ViewModel 层维护的数据本身就是 [New -> Old] 的顺序（很多 IM SDK 分页拉取历史消息时也是这个顺序），那在 UI 层连 reversed() 都不用调，直接传进去即可，性能更好。

带来的额外好处

使用 reverseLayout = true 不仅仅解决了闪动问题，还有两个巨大的体验提升：

接收新消息的动画更自然：

当新消息到来时，实际上是往列表的 index 0 插入数据。在 UI 上表现为：新消息直接出现在底部，旧消息被平滑地顶上去。这完全符合直觉，且自动获得 Compose 的 ItemPlacement 动画支持。
键盘顶起体验更好：

当输入法弹出时，因为布局是靠底部的，内容会更自然地随着键盘一起上移，通常不需要复杂的 WindowInsets 调整就能获得不错的效果。

总结

不要试图用 scrollTo 去对抗渲染机制。在做聊天、日志控制台这类"关注底部最新数据"的功能时，请立刻想到：

Thinking in Reverse: 把列表倒过来，世界就清净了。