【问题标题】:Is there a way to make two way HorizontalPager with auto scroll?有没有办法通过自动滚动制作两种方式 Horizo​​ntalPager?
【发布时间】:2021-05-19 11:06:51
【问题描述】:

来自accompanist library 的 Horizo​​ntalPager 可以创建一个简单的 ViewPager;有没有办法在两端无限滑动?

@ExperimentalPagerApi
@Composable
fun AutoScrollPagerHorizontal(d: List<Stem>?) {
    var data: MutableList<Stem> = d?.toMutableList() ?: mutableListOf()

    if (data.isNullOrEmpty()) return
    val pageState = rememberPagerState(pageCount = data.size)
    HorizontalPager(
        state = pageState
    ) {
        Card(
            Modifier
                .height(240.dp)
                .padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp)
        ) {
            Image(
                painter = rememberGlidePainter(
                    request = data[it].icon,
                ),
                contentDescription = data[it].title,
                contentScale = ContentScale.FillBounds
            )
        }
    }
}

此代码正确生成 viewpager,但在到达数据的最后一个索引后不会滚动到第 0 个索引。

【问题讨论】:

    标签: kotlin horizontal-scrolling android-jetpack-compose


    【解决方案1】:

    您可以在可组合中使用这个 sn-p 来自动滚动寻呼机:

    LaunchedEffect(key1 = pagerState.currentPage) {
        launch {
            delay(3000)
            with(pagerState) {
                val target = if (currentPage < pageCount - 1) currentPage + 1 else 0
    
                animateScrollToPage(
                    page = target,
                    animationSpec = tween(
                        durationMillis = 500,
                        easing = FastOutSlowInEasing
                    )
                )
            }
        }
    }
    

    【讨论】:

    • 自动滚动部分还可以,我比较关心Horizo​​ntalPager的双向样式;知道如何进行吗?
    • animateScrollToPage() 中的animationSpec 在最新版本的Accompanist Pager 库中被移除。有没有办法手动自定义滚动效果?默认的滚动过渡很快,需要慢一点,但似乎没有出路。
    【解决方案2】:

    PointerInput 有助于构建双向寻呼机;下面是对我有用的 sn-p。

    Modifier.pointerInput(Unit) {
                        detectHorizontalDragGestures { change, dragAmount ->
                            change.consumeAllChanges()
                            when {
                                dragAmount < 0 -> {
                                    coroutineScope.launch { /* right */
                                        if (pageState.currentPage == data.lastIndex) {
                                            pageState.animateScrollToPage(0)
                                        } else {
                                            pageState.animateScrollToPage(pageState.currentPage + 1)
                                        }
                                    }
                                }
                                dragAmount > 0 -> { /* left */
                                    coroutineScope.launch {
                                        if (pageState.currentPage == 0) {
                                            pageState.animateScrollToPage(data.lastIndex)
                                        } else {
                                            pageState.animateScrollToPage(pageState.currentPage - 1)
                                        }
                                    }
                                }
                            }
                        }
                    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-09-11
      • 1970-01-01
      • 2022-09-25
      • 2021-08-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多