LazyRow滚动至末尾触发ViewPager翻页问题及解决方案尝试

问题描述 #

我有一个包含两个页面的ViewPager，每个页面内有展示任务列表的LazyColumn，LazyColumn顶部是任务排序选项的LazyRow。当LazyRow滚动到末尾时，ViewPager会跟着滚动到下一页，这不是我想要的效果。

已尝试方案及问题 #

我试过两种方案，大部分时候能阻止滚动，但偶尔仍会出现轻微滚动：

• 定义顶层可变状态变量viewPagerShouldScroll，并在LazyRow内通过interactionSource监听状态：

LaunchedEffect(key1 = lazyRowState.interactionSource){
    lazyRowState.interactionSource.interactions.collect{
        viewPagerShouldScroll = it !is DragInteraction.Start
    }
}

• 使用viewPagerShouldScroll = !lazyListState.isScrollInProgress，但当LazyRow滚动到最后可见项时该方案无效。

可靠解决方案 #

方案1：通过pointerInput拦截横向触摸事件 #

直接监听LazyRow的横向拖动事件，当LazyRow已滚动到边界时，消费触摸事件阻止其传递给ViewPager：

val lazyRowState = rememberLazyListState()

LazyRow(
    state = lazyRowState,
    modifier = Modifier
        .pointerInput(Unit) {
            detectHorizontalDragGestures { change, dragAmount ->
                val canScrollLeft = lazyRowState.canScrollBackward
                val canScrollRight = lazyRowState.canScrollForward

                // 向右拖动且已到最右，或向左拖动且已到最左时，消费事件
                if ((dragAmount > 0 && !canScrollRight) || (dragAmount < 0 && !canScrollLeft)) {
                    change.consume()
                }
            }
        }
) {
    // 排序选项项
    items(sortOptions) { option ->
        // 选项UI实现
    }
}

方案2：使用nestedScroll自定义滚动行为 #

通过嵌套滚动连接，在滚动事件传递给LazyRow前判断边界，拦截无效滚动：

val lazyRowState = rememberLazyListState()
val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            if (available.x != 0f) {
                val canScrollRight = lazyRowState.canScrollForward
                val canScrollLeft = lazyRowState.canScrollBackward

                // 已到边界时，消费横向滚动偏移
                return if ((available.x > 0 && !canScrollRight) || (available.x < 0 && !canScrollLeft)) {
                    available.copy(y = 0f)
                } else {
                    Offset.Zero
                }
            }
            return Offset.Zero
        }
    }
}

LazyRow(
    state = lazyRowState,
    modifier = Modifier.nestedScroll(nestedScrollConnection)
) {
    // 排序选项项
}

方案说明 #

这两种方法从触摸/滚动事件拦截入手，直接阻止边界处的滚动事件传递给上层ViewPager，相比状态变量方案，避免了状态同步延迟或判断不准确的问题，能彻底解决偶尔触发翻页的情况。

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