- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
原文地址: Jetpack Compose学习(15)——Pager组件的使用(对标ViewPager)-Stars-One的杂货小窝 。
从名字可以看出,Pager这个就是ViewPager的替代产物 。
在Jetpack Compose里的,Pager根据方向,主要分为2个组件: VerticalPager HorizontalPager 。
这2个,一个是默认占满高度,一个是默认占满宽度,可以自行通过Modifier来修改尺寸 。
val pagerState = rememberPagerState(pageCount = {
2
})
HorizontalPager(state = pagerState){pageIndex->
//这里写你的页面内容,根据下标自动切换不同页面
when (pageIndex) {
0 -> {
Box(modifier=Modifier) {
}
}
else -> {
Box(modifier=Modifier) {
}
}
}
}
这里Pager的属性有些多,我挑些常用的属性来进行说明
fun HorizontalPager(
state: PagerState,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues(0.dp),
pageSize: PageSize = PageSize.Fill,
beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
pageSpacing: Dp = 0.dp,
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
flingBehavior: TargetedFlingBehavior = PagerDefaults.flingBehavior(state = state),
userScrollEnabled: Boolean = true,
reverseLayout: Boolean = false,
key: ((index: Int) -> Any)? = null,
pageNestedScrollConnection: NestedScrollConnection = PagerDefaults.pageNestedScrollConnection(
state,
Orientation.Horizontal
),
snapPosition: SnapPosition = SnapPosition.Start,
pageContent: @Composable PagerScope.(page: Int) -> Unit
)
表明当前Pager容器的状态,通过rememberPagerState来进行创建 。
此对象有以下几个常用的属性和方法
currentPage:与贴靠位置最近的页面。默认情况下,贴靠位置位于布局的开头.
settledPage:未运行任何动画或滚动时显示的页码。这与 currentPage 属性不同,因为如果网页足够接近固定位置,currentPage 会立即更新,但 settledPage 会保持不变,直到所有动画都运行完毕.
targetPage:滚动动作的建议停止位置 。
scrollToPage(pageIndex) 无动画指定滚动到指定页面下标(需要配合开启一个协程使用) 。
animateScrollToPage(pageIndex) 带动画指定滚动到指定页面下标(需要配合开启一个协程使用) 。
val coroutineScope = rememberCoroutineScope()
coroutineScope.launch {
// Call scroll to on pagerState
pagerState.scrollToPage(5)
}
感觉应该不用多说什么,和LazyRow等组件一样,用来设置内边距的 。
默认情况下,HorizontalPager 和 VerticalPager 分别占据整个宽度或整个高度.
可以将 pageSize 变量设置为使用 PageSize.Fixed、PageSize.Fill(默认)或自定义大小计算.
如,在HorizontalPager固定每个页面的宽度,使用PageSize.Fixed(300.dp) 。
接收一个整数,默认为0,即表示: 默认情况下,Pager只会在屏幕上加载可见的页面.
如需在屏幕外加载更多页面,请将 beyondBoundsPageCount 设置为大于零的值 。
用来控制是否允许用户滚动的一个boolean数值 。
接收一个dp数值, 每个页面item的间隔距离 。
这个是比较常见的效果了,如下图所示
代码如下
val pagerState = rememberPagerState(pageCount = {
4
})
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp) { page -> // Our page content
val bgColor = when (page) {
0 -> {
Color.Blue
}
1 -> {
Color.Yellow
}
else -> {
Color.LightGray
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(bgColor))
}
Spacer(modifier = Modifier.height(16.dp))
CustomIndicator(pagerState)
}
如果想自动轮播的效果,可以使用副作用函数配合,如下代码
val pagerState = rememberPagerState(pageCount = {
3
})
LaunchedEffect(Unit) {
while (true){
//间隔1s跳转到下一个页面
delay(1000)
if (pagerState.currentPage ==pagerState.pageCount-1) {
//重置的话,跳转不使用动画
pagerState.scrollToPage(0)
}else{
pagerState.animateScrollToPage(pagerState.currentPage+1)
}
}
}
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
HorizontalPager(state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp) { page -> // Our page content
val bgColor = when (page) {
0 -> {
Color.Blue
}
1 -> {
Color.Yellow
}
else -> {
Color.LightGray
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(bgColor))
}
Spacer(modifier = Modifier.height(16.dp))
CustomIndicator(pagerState)
}
/**
* 指示器布局,与[HorizontalPager]
*
* @param pagerState pager的状态
* @param modifier
* @param activeColor 选中颜色
* @param inactiveColor 未选中颜色
* @param indicatorWidth 单个指示器的宽度
* @param indicatorHeight 单个指示器的高度
* @param spacing 每个指示器间隔
* @param indicatorShape 指示器的形状
*
* @sample CustomIndicatorSample
*/
@Composable
fun CustomIndicator(
pagerState: PagerState,
modifier: Modifier = Modifier,
activeColor: Color = MaterialTheme.colorScheme.primary,
inactiveColor: Color = Color.LightGray,
indicatorWidth: Dp = 10.dp,
indicatorHeight: Dp = 5.dp,
spacing: Dp = 5.dp,
indicatorShape: Shape = CircleShape,
) {
val spacingPx = LocalDensity.current.run { spacing.roundToPx() }
Box(
modifier = modifier, contentAlignment = Alignment.CenterStart
) {
Row(
horizontalArrangement = Arrangement.spacedBy(spacing),
verticalAlignment = Alignment.CenterVertically,
) {
val indicatorModifier = Modifier.background(color = inactiveColor, shape = indicatorShape)
//不能活动的索引的点
repeat(pagerState.pageCount) {
Box(
indicatorModifier.size(
indicatorWidth, indicatorHeight
)
)
}
}
//计算偏移量
val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffsetFraction).coerceIn(
0f, (pagerState.pageCount - 1).coerceAtLeast(0).toFloat()
) //可以活动的索引点
Box(Modifier
.offset {
IntOffset(
x = (spacingPx * scrollPosition + indicatorWidth.roundToPx() * scrollPosition).toInt(), y = 0
)
}
.size(width = indicatorWidth, height = indicatorHeight)
.background(
color = activeColor,
shape = indicatorShape,
))
}
}
//使用示例
@Composable
private fun CustomIndicatorSample() {
val pagerState = rememberPagerState(pageCount = {
10
})
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
HorizontalPager(state = pagerState) { page ->
Text("page=$page")
}
CustomIndicator(pagerState)
}
}
效果不太好描述,直接上动图 。
添加一个Modifier的扩展方法,然后给Pager里的Item使用即可 。
fun Modifier.carouselTransition(page: Int, pagerState: PagerState) =
graphicsLayer {
val pageOffset =
((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
val transformation =
lerp(
start = 0.7f,
stop = 1f,
fraction = 1f - pageOffset.coerceIn(0f, 1f)
)
alpha = transformation
scaleY = transformation
}
示例
val pageState = rememberPagerState(){3}
Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
HorizontalPager(state = pageState, contentPadding = PaddingValues(horizontal = 32.dp), pageSpacing = 16.dp, snapPosition = SnapPosition.Center) { page -> // Our page content
val bgColor = when (page) {
0 -> {
Color.Blue
}
1 -> {
Color.Yellow
}
else -> {
Color.LightGray
}
}
Box(modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.carouselTransition(page,pageState)
.background(bgColor))
}
}
最后此篇关于JetpackCompose学习(15)——Pager组件的使用(对标ViewPager)的文章就讲到这里了,如果你想了解更多关于JetpackCompose学习(15)——Pager组件的使用(对标ViewPager)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
介绍篇 什么是MiniApis? MiniApis的特点和优势 MiniApis的应用场景 环境搭建 系统要求 安装MiniApis 配置开发环境 基础概念 MiniApis架构概述
我正在从“JavaScript 圣经”一书中学习 javascript,但我遇到了一些困难。我试图理解这段代码: function checkIt(evt) { evt = (evt) ? e
package com.fastone.www.javademo.stringintern; /** * * String.intern()是一个Native方法, * 它的作用是:如果字
您会推荐哪些资源来学习 AppleScript。我使用具有 Objective-C 背景的传统 C/C++。 我也在寻找有关如何更好地开发和从脚本编辑器获取更快文档的技巧。示例提示是“查找要编写脚本的
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
关闭。这个问题不符合 Stack Overflow guidelines 。它目前不接受答案。 想改善这个问题吗?更新问题,以便堆栈溢出为 on-topic。 6年前关闭。 Improve this
我是塞内加尔的阿里。我今年60岁(也许这是我真正的问题-笑脸!!!)。 我正在学习Flutter和Dart。今天,我想使用给定数据模型的列表(它的名称是Mortalite,请参见下面的代码)。 我尝试
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
学习 Cappuccino 的最佳来源是什么?我从事“传统”网络开发,但我对这个新框架非常感兴趣。请注意,我对 Objective-C 毫无了解。 最佳答案 如上所述,该网站是一个好地方,但还有一些其
我正在学习如何使用 hashMap,有人可以检查我编写的这段代码并告诉我它是否正确吗?这个想法是有一个在公司工作的员工列表,我想从 hashMap 添加和删除员工。 public class Staf
我正在尝试将 jQuery 与 CoffeScript 一起使用。我按照博客中的说明操作,指示使用 $ -> 或 jQuery -> 而不是 .ready() 。我玩了一下代码,但我似乎无法理解我出错
还在学习,还有很多问题,所以这里有一些。我正在进行 javascript -> PHP 转换,并希望确保这些做法是正确的。是$dailyparams->$calories = $calories;一条
我目前正在学习 SQL,以便从我们的 Magento 数据库制作一个简单的 RFM 报告,我目前可以通过导出两个查询并将它们粘贴到 Excel 模板中来完成此操作,我想摆脱 Excel 模板。 我认为
我知道我很可能会因为这个问题而受到抨击,但没有人问,我求助于你。这是否是一个正确的 javascript > php 转换 - 在我开始不良做法之前,我想知道这是否是解决此问题的正确方法。 JavaS
除了 Ruby-Doc 之外,哪些来源最适合获取一些示例和教程,尤其是关于 Ruby 中的 Tk/Tile?我发现自己更正常了 http://www.tutorialspoint.com/ruby/r
我只在第一次收到警告。这正常吗? >>> cv=LassoCV(cv=10).fit(x,y) C:\Python27\lib\site-packages\scikit_learn-0.14.1-py
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be
我是一名优秀的程序员,十分优秀!