Jetpack compose：在可兼容寻呼机中滑动页面时出现问题

Question

我正在使用 jetpack compose 构建一个注册页面，并在与 TabRow 链接的水平寻呼机中实现它，以分别显示注册和登录页面

但是当我滑动到另一个页面（登录或注册）时，只有在滑动偏移量超过屏幕宽度的大约 50% 后才会构建下一个页面，并且上一个页面将在另一个页面中呈现，如视频所示下面

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


     HorizontalPager(
     count = 2,
     state = tabRowState.pagerState,
     modifier = Modifier.fillMaxSize(),
     verticalAlignment = Alignment.Top
 ) {


    if(currentPage == 0){
        RegistrationPage()
    }else{
        LoginPage()
    }

  }
}

如何解决这个问题？

Answer 1

我建议使用包含不同视图元素的选项卡项目列表。 确保不要根据页面状态使用 if else 语句，因为页面状态仅在 50% 后发生变化，而是尝试创建始终可用的视图。

例如你可以这样做：

sealed class TabItem(var title: String, var color: Color, content: @Composable () -> Unit) {
    object Registration : TabItem("REGISTRATION", Color.Red, { /* you can add here your composable*/} )
    object Login : TabItem("LOGIN", Color.Blue, { /* you can add here your composable*/} )
}

用途：

@OptIn(ExperimentalPagerApi::class)
@Composable
fun MyScreen() {
    val pagerState = rememberPagerState()
    val tabs = listOf(TabItem.Registration, TabItem.Login)

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top
    ) {
        TabRow(
            selectedTabIndex = pagerState.currentPage,
            indicator = { positions ->
                TabRowDefaults.Indicator(
                    Modifier.pagerTabIndicatorOffset(pagerState, positions)
                )
            }
        ) {
            tabs.forEachIndexed { index, tab ->
                val isSelected = pagerState.currentPage == index
                Tab(
                    selected = isSelected,
                    text = {
                        Text(text = tab.title)
                    },
                    onClick = {}
                )
            }
        }
        HorizontalPager(
            count = tabs.size, 
            state = pagerState
        ) { page ->
            Box(modifier = Modifier
                .fillMaxSize()
                .background(tabs[page].color) // for the example, showing that both pages are rendered
            ){
                Text( modifier = Modifier.fillMaxWidth(), text = tabs[page].title)
            }
        }
    }
}

结果：

Answer 2

将

currentPage

替换为

page

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


  HorizontalPager(
     count = 2,
     state = tabRowState.pagerState,
     modifier = Modifier.fillMaxSize(),
     verticalAlignment = Alignment.Top
 ) { page -> 


    if(page == 0){
        RegistrationPage()
    } else {
        LoginPage()
    }

  }
}```