Android Compose 使用Pager （with TabRow）-526互联

不同页显示不同内容

错误示范

 @Composable
    HorizontalPager(state = pagerState, modifier.fillMaxHeight(),beyondBoundsPageCount = 2,verticalAlignment=Alignment.Top) {
        if (pagerState.currentPage==0){//使用pagerState.currentPage，会导致滑动动画有问题
        }
        else if (pagerState.currentPage==1){
        }
    }

使用pagerState.currentPage，会导致滑动动画有问题

正确做法

@Composable
HorizontalPager(state = pagerState, modifier.fillMaxHeight(),beyondBoundsPageCount = 2,verticalAlignment=Alignment.Top) {page->//使用这里的page，而不是pagerState.currentPage
        if (page==0){
        }
        else if (page==1){
        }
}

一般如果是大页面，都是TabRow结合Pager一起使用。在compose中使两者产生联动很简单，对两者使用相同的元素即可。

@Composable
fun TestScreen(
    navController:NavController,
    modifier: Modifier,
) {
    //TabRow with Pager
    val pages = listOf("Main", "Field")
    val pagerState = rememberPagerState(pageCount = {pages.size}, initialPage = 0)//总页码，初始页码
//compose
    Scaffold() { contentPadding ->
        Column( modifier = modifier
            .fillMaxSize()
            .padding(contentPadding)
        ) {
            PrimaryTabRow(
                modifier = modifier
                    .fillMaxWidth(),
                selectedTabIndex = pagerState.currentPage,
            ) {
                pages.forEachIndexed { index, title ->
                    Tab(
                        text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) },
                        onClick = {
                            scope.launch {
                                pagerState.scrollToPage(index, 0f)//Tab被点击后让Pager中内容动画形式滑动到目标页
                            }
                        },
                        selected = (index == pagerState.currentPage)
                    )
                }
            }
            HorizontalPager(state = pagerState, modifier.fillMaxHeight(),beyondBoundsPageCount = 2,verticalAlignment=Alignment.Top) {page->
                if (page==0){
                }
               else if (page==1){
                }
            }
        }
}