Jetpack Compose Horizontal Pager页面切换异常问题求助

我使用Jetpack Compose构建注册页面，通过HorizontalPager关联TabRow分别展示注册页与登录页。但滑动切换页面（登录/注册）时，目标页面需滑动超过约50%屏幕宽度才会构建，且前一页会在目标页区域显示，代码如下：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun RegistrationHorizontalPageView() {
    val tabRowState = viewModel<TabRowViewModel>()

    HorizontalPager(
        count = 2,
        state = tabRowState.pagerState,
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.Top
    ) { currentPage ->
        if(currentPage == 0){
            RegistrationPage()
        }else{
            LoginPage()
        }
    }
}

解决方案 #

1. 开启预加载机制 #

HorizontalPager默认仅组合当前可见页面，通过设置offscreenLimit参数可以提前预加载相邻页面，避免滑动时的构建延迟。将该值设为1即可预加载左右各一个页面：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun RegistrationHorizontalPageView() {
    val tabRowState = viewModel<TabRowViewModel>()

    HorizontalPager(
        count = 2,
        state = tabRowState.pagerState,
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.Top,
        offscreenLimit = 1 // 预加载相邻页面
    ) { currentPage ->
        when(currentPage) {
            0 -> RegistrationPage()
            1 -> LoginPage()
            else -> {}
        }
    }
}

2. 确保子页面占满全屏 #

前一页内容泄露到目标页区域，大概率是因为子页面没有填充整个Pager的可用空间。需要给RegistrationPage和LoginPage的根布局添加Modifier.fillMaxSize()：

@Composable
fun RegistrationPage() {
    Column(
        modifier = Modifier.fillMaxSize(), // 强制占满全屏
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 页面内容
    }
}

@Composable
fun LoginPage() {
    Column(
        modifier = Modifier.fillMaxSize(), // 强制占满全屏
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 页面内容
    }
}

3. 验证PagerState初始化 #

确保ViewModel中的PagerState初始化正确，避免初始状态异常影响Pager行为：

class TabRowViewModel : ViewModel() {
    val pagerState = PagerState(initialPage = 0)
}

内容的提问来源于stack exchange，提问作者zero.one