Android Compose HorizontalPager嵌套LazyRow滚动卡顿问题求助

问题描述 #

在Compose的HorizontalPager组件中嵌套LazyRow时，切换Pager页面会出现明显的横向滚动卡顿。无论是使用官方ExperimentalFoundationApi中的HorizontalPager，还是Accompanist Pager库，甚至升级到Compose 1.4.0-beta02版本，该问题依然存在。

复现代码：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagerScreen() {
    HorizontalPager(pageCount = 2) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(if (it == 0) Color.Blue else Color.Red)
        ) {
            Text(text = "Pager: $it", modifier = Modifier.padding(20.dp), color = Color.White)

            LazyRow(contentPadding = PaddingValues(10.dp)) {
                items(12) {
                    Image(
                        painter = painterResource(id = R.drawable.ic_launcher_background), 
                        contentDescription = null,
                        modifier = Modifier
                            .padding(10.dp)
                            .size(80.dp)
                    )
                }
            }
        }
    }
}

问题演示：

卡顿原因分析 #

1. 页面重建与状态丢失：HorizontalPager默认仅缓存当前页面（beyondBoundsPageCount默认0），切换页面时非当前页面会被销毁，再次切换回来时LazyRow需要重新创建滚动状态、重新测量布局，带来额外性能开销。
2. 滚动事件冲突：Pager的横向滚动动画与LazyRow的触摸事件处理存在优先级冲突，导致输入事件被重复拦截与处理，引发卡顿。
3. 布局优化过度：Pager在页面切换时会对非当前页面应用透明度、缩放等变换，触发LazyRow的频繁重绘与重新布局。

源码级修复方案 #

1. 优化页面缓存策略 #

修改HorizontalPager的默认缓存参数，或者在其核心实现中调整页面缓存逻辑：
找到Pager.kt中HorizontalPager函数的定义，将默认的beyondBoundsPageCount从0改为1，确保前后页面都被缓存，避免频繁重建：

@Composable
fun HorizontalPager(
    pageCount: Int,
    state: PagerState = rememberPagerState(pageCount = pageCount),
    modifier: Modifier = Modifier,
    reverseLayout: Boolean = false,
    beyondBoundsPageCount: Int = 1, // 修改默认值为1
    pageSpacing: Dp = 0.dp,
    userScrollEnabled: Boolean = true,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    pageContent: @Composable PagerScope.(page: Int) -> Unit
) {
    // 原有实现代码...
}

如果需要更彻底的缓存，还可以修改Pager组件中页面的可见性判断，让非当前页面保持布局状态而非销毁。

2. 修复滚动事件冲突 #

在Pager的滚动事件处理中添加嵌套滚动拦截，确保LazyRow的滚动事件优先被处理。找到Pager组件中scrollable修饰符的实现，修改PointerInputScope的事件逻辑：

// 在Pager的scrollable修饰符中添加嵌套滚动支持
Modifier.scrollable(
    state = scrollableState,
    orientation = Orientation.Horizontal,
    enabled = userScrollEnabled,
    reverseDirection = reverseLayout,
    flingBehavior = flingBehavior,
    interactionSource = interactionSource
).nestedScroll(rememberNestedScrollInteropConnection())

或者直接在源码中为每个页面的根布局添加nestedScroll修饰符，确保嵌套滚动事件被正确分发。

3. 避免非当前页面的过度布局变换 #

修改Pager中对非当前页面的alpha、scale等变换逻辑，仅在页面完全离开视野时才应用这些优化，而不是在滚动过程中频繁修改：
找到Pager组件中页面的布局修饰符代码，调整变换的触发条件：

// 原有代码可能会根据pageOffset设置alpha
val alpha = animateFloatAsState(
    targetValue = if (pageOffset != 0f) 0.8f else 1f
).value
// 修改为仅当页面完全切换后才调整透明度
val alpha = if (state.currentPage != page) 0.8f else 1f

这样可以避免滚动过程中LazyRow频繁重绘。

验证效果 #

修改后重新编译Compose库或自定义Pager组件，使用原复现代码测试，页面切换时的卡顿现象会明显缓解，LazyRow的滚动状态也能保持稳定。

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