Android Compose 使用Pager (with TabRow)
Pager
基本内容看官方吧:Android Compose 中的分页器
不同页显示不同内容
错误示范
@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){ } }
Pager with TabRow
一般如果是大页面,都是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){ } } } }
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/17860503.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2021-11-27 ACM Greater New York 2017 补题
2021-11-27 C++ map按key或按value排序