Jetpack Compose中的分页器Pager的使用
前言
如需以左右或上下方式浏览内容，您可以分别使用 HorizontalPager 和 VerticalPager可组合项。
这些可组合项的功能与视图系统中的 ViewPager类似。
官方文档:
https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/layouts/pager?hl=zh-cn
基本示例
// Display 10 items
val pagerState = rememberPagerState(pageCount = {
10
})
HorizontalPager(state = pagerState) { page ->
// Our page content
Text(
text = "Page: $page",
modifier = Modifier.fillMaxWidth()
)
}页面切换添加效果
该示例实现了切换时页面从半透明到不透明的效果。
import android.util.Log
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import com.xhkjedu.xh_control_appstore.vm.AppViewModel
import kotlin.math.absoluteValue
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MPager(appViewModel: AppViewModel, pagerState: PagerState, callback: (page: Int) -> Unit) {
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.Top,
beyondBoundsPageCount = 10,
) { page ->
Box(
Modifier
.fillMaxSize()
.graphicsLayer {
val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
alpha = 1f - pageOffset.coerceIn(0f, 1f)
}
) {
if (page == 0) {
AppListView(appViewModel.appList)
} else {
AppListView(appViewModel.appList2)
}
}
}
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
Log.i("Page change", "Page changed to $page")
callback(page)
}
}
}滚动到某页
无动画滚动
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
coroutineScope.launch {
pagerState.scrollToPage(5)
}
}, modifier = Modifier.align(Alignment.BottomCenter)) {
Text("Jump to Page 5")
}带动画滚动
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(5)
}
}, modifier = Modifier.align(Alignment.BottomCenter)) {
Text("Jump to Page 5")
}页面切换监听
val pagerState = rememberPagerState(pageCount = {
10
})
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
Log.d("Page change", "Page changed to $page")
}
}
VerticalPager(
state = pagerState,
) { page ->
Text(text = "Page: $page")
}页面指示器
val pagerState = rememberPagerState(pageCount = {
4
})
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxSize()
) { page ->
// Our page content
Text(
text = "Page: $page",
)
}
Row(
Modifier
.wrapContentHeight()
.fillMaxWidth()
.align(Alignment.BottomCenter)
.padding(bottom = 8.dp),
horizontalArrangement = Arrangement.Center
) {
repeat(pagerState.pageCount) { iteration ->
val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
Box(
modifier = Modifier
.padding(2.dp)
.clip(CircleShape)
.background(color)
.size(16.dp)
)
}
}项目实战
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MPager(appViewModel: AppViewModel, pagerState: PagerState, callback: (page: Int) -> Unit) {
HorizontalPager(
state = pagerState,
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.Top,
beyondBoundsPageCount = 2
) { page ->
Log.i("page", page.toString())
if (page == 0) {
AppListView(appViewModel.appList)
} else {
AppListView(appViewModel.appList2)
}
}
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
Log.i("Page change", "Page changed to $page")
callback(page)
}
}
}注意
默认情况下，分页器只会加载屏幕上显示的页面。如需在屏幕外加载更多页面，请将
beyondBoundsPageCount设置为大于零的值。
使用
val pagerState = rememberPagerState(
initialPage = 0,
initialPageOffsetFraction = 0f,
) {
// provide pageCount
2
}点击切换页面
val coroutineScope = rememberCoroutineScope()
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-03-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
