如何在Jetpack Compose中禁用HorizontalPager的页面切换动画

要实现点击标签切换页面无动画，同时防止WebView因页面重建重载，只需从切换方式和页面缓存两个方面调整：

1. 禁用切换动画：使用无动画的页面跳转方法 #

默认点击Tab时如果调用animateScrollToPage会触发过渡动画，改用scrollToPage即可实现瞬间无动画切换。需要在Tab的点击事件中通过协程调用该方法。

2. 避免WebView重载：设置足够大的页面缓存 #

HorizontalPager默认只会缓存当前页面前后各1个页面（offscreenLimit = 1），切换到距离较远的页面时，之前的页面会被销毁重建。设置offscreenLimit为页面总数-1（这里是3），即可让所有页面保持在内存中，不会被销毁。

修改后的完整代码示例 #

@Composable
fun TabPagerScreen() {
    val coroutineScope = rememberCoroutineScope()
    val pagerState = rememberPagerState(pageCount = 4)

    Column(modifier = Modifier.padding(bottom = 0.dp)) {
        HorizontalPager(
            state = pagerState,
            flingBehavior = PagerDefaults.rememberPagerFlingConfig(pagerState),
            verticalAlignment = Alignment.CenterVertically,
            horizontalAlignment = Alignment.CenterHorizontally,
            dragEnabled = false,
            offscreenLimit = 3, // 缓存全部4个页面，防止销毁重建
            modifier = Modifier.fillMaxSize()
        ) { pagePosition ->
            when (pagePosition) {
                0 -> GuideScreen()
                1 -> WebViewScreen()
                2 -> WebViewScreen()
                3 -> MineScreen()
            }
        }

        TabRow(
            selectedTabIndex = pagerState.currentPage,
            modifier = Modifier.fillMaxWidth(),
            backgroundColor = Color.White,
            indicator = {},
            divider = {}
        ) {
            // 替换为你的实际Tab内容
            listOf("指南", "网页1", "网页2", "我的").forEachIndexed { index, title ->
                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = {
                        coroutineScope.launch {
                            // 无动画跳转目标页面
                            pagerState.scrollToPage(index)
                        }
                    },
                    text = { Text(title) }
                )
            }
        }
    }
}

为什么之前的方法不可行 #

你之前尝试重复实现HorizontalPager的方式，会导致整个Pager组件重建，内部所有子页面都会重新初始化，因此WebView会反复重载。而通过上述调整，既保留了Pager的组件状态，又通过缓存避免了页面销毁，同时实现了无动画切换。

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