HELLO WORLD--一起加油(🍺)!|

kingwzun

园龄:3年6个月粉丝:111关注:0

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,会导致滑动动画有问题
image

正确做法

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

image

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 中国大陆许可协议进行许可。

posted @   kingwzun  阅读(618)  评论(0编辑  收藏  举报
历史上的今天:
2021-11-27 ACM Greater New York 2017 补题
2021-11-27 C++ map按key或按value排序
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起