说实话，从传统的 Android View 体系迁移到 Jetpack Compose，这种体验就像是把一辆开了五年的燃油车换成了一辆特斯拉——虽然动力geng强了但一开始你可Neng会找不到刹车在哪里。以前咱们搞个 Banner 轮播，那是信手拈来ViewPager2 往那一摆，Adapter 一写，完事。但现在到了 Compose 的世界，一切dou变得声明式了你会发现，原本那个熟悉的 ViewPager 不见了取而代之的是 HorizontalPager。

hen多刚上手 Compose 的朋友，在第一次尝试实现无限轮播时dou差点把键盘给敲碎。为什么？因为 Compose 的状态管理逻辑和以前完全不一样。你不Neng再直接去操作 View 的位置，而是得通过 State 去驱动 UI 的变化。今天咱们就抛开那些枯燥的官方文档，用Zui接地气的方式，聊聊怎么用 Compose 打造一个既丝滑又支持无限循环、自动播放的动态 Banner。

在追求“无限循环”这种高级功Neng之前，咱们得先学会走路。HorizontalPager 是 Compose 中用于横向滑动的组件，它的作用类似于 RecyclerView 或者是以前的 ViewPager。但它的用法要简单得多，你甚至不需要写什么 Adapter。

咱们先从Zui基础的开始：假设你手里有几张本地图片，想让他们Neng左右滑动。这事儿在 Compose 里也就是几行代码的事。你需要一个 `pagerState` 来记住当前滑到了哪一页，然后把这个 state 传给 HorizontalPager。

@Composable
fun SimpleBannerDemo {
    // 假设咱们有三张图片
    val imageRes = listOf
    // 记住当前页面的状态
    val pagerState = rememberPagerState
    HorizontalPager(
        state = pagerState,
        modifier = Modifier.fillMaxWidth.height // 随便定个高度
    ) { page ->
        // 这里的 page 就是当前索引
        Image(
            painter = painterResource,
            contentDescription = null,
            modifier = Modifier.fillMaxSize,
            contentScale = ContentScale.Crop
        )
    }
}

kan到了吧？不需要 Adapter，不需要 ViewHolder，就这么简单。Ru果你想换成竖向的滑动，把 `HorizontalPager` 换成 `VerticalPager` 就行了简直不要太方便。不过咱们实际开发中，图片大多是从网上拉取的，这时候就得请出 Coil 这个老伙计了。Coil 对 Compose 的支持非常友好，用 `AsyncImage` 替换掉上面的 `Image`，传入 URL，一切搞定。

好了简单的滑动谁dou会。但 Banner 的灵魂咱们Ke以通过设置一个巨大的 Integer.MAX_VALUE 来欺骗用户，但在 Compose 的 HorizontalPager 里这招虽然也Neng用，但总觉得不够优雅。

咱们换个思路。HorizontalPager 本身并不直接支持“无限”这个概念，它就是一个列表。那我们Neng不Neng在数据源上Zuo点手脚？

假设我们有数据 。为了实现无限循环，我们Ke以把这个列表“”成 。 * 当用户滑到Zui开头的 C时我们偷偷帮他瞬间跳转到中间那个 C。 * 当用户滑到Zui末尾的 A时我们偷偷帮他瞬间跳转到中间那个 A。

这就需要我们在数据源的头尾各加一个“替身”。所以HorizontalPager 的总页数应该是 `images.size + 2`。而在渲染的时候，我们需要Zuo一个索引映射，把 HorizontalPager 的 index 转换成真实数据的 index。

@Composable
fun InfiniteBanner {
    val realImages = listOf
    // 实际上我们构建了一个比原数据多2个item的列表
    val pagerState = rememberPagerState
    HorizontalPager(
        state = pagerState,
        modifier = Modifier.fillMaxWidth.height
    ) { page ->
        // 核心逻辑：把 pager 的 index 映射回真实数据的 index
        val realIndex = when  {
            0 -> realImages.size - 1 // 第0个位置显示Zui后一张图
            realImages.size + 1 -> 0 // Zui后一个位置显示第一张图
            else -> page - 1 // 中间的位置减1
        }
        Image(
            painter = painterResource,
            contentDescription = null,
            modifier = Modifier.fillMaxSize,
            contentScale = ContentScale.Crop
        )
    }
}

Ru果你直接照着上面的代码写，你会发现一个hen尴尬的现象：当你滑到边界时虽然逻辑上我们想让它瞬间跳转，但屏幕上可Neng会出现一瞬间的白屏或者闪烁，体验极差。

这是为什么呢？因为我们监听的是 `currentPage`。这个属性非常敏感，只要你的手指稍微动一下它可Neng就变了。Ru果我们在这个时候执行 `scrollToPage`，就会打断当前的动画，导致视觉上的跳跃。

这里有个小窍门：别用 `currentPage`，改用 `settledPage`。`settledPage` 只有在页面完全静止下来之后才会geng新。我们利用这个特性，在页面停稳的瞬间，Ru果发现它是在“替身”位置上，就悄无声息地把它拨回到正主位置。因为是在静止时跳转，用户根本察觉不到。

LaunchedEffect {
    // 只有当页面停稳了我们才去检查是不是在边界
    if  {
        // 在Zui左边的替身，跳转到倒数第二张
        pagerState.scrollToPage
    } else if  {
        // 在Zui右边的替身，跳转到第二张
        pagerState.scrollToPage
    }
}

加上这段逻辑，你的无限循环就Yi经有模有样了而且非常丝滑，完全kan不出破绽。

现在的 Banner Yi经支持手动无限滑动了但咱们平时见到的 Banner dou是会自己动的。这就需要用到 Compose 的副作用 API：`LaunchedEffect`。

我们Ke以启动一个协程，在里面搞个死循环，每隔几秒钟就发个指令让 Banner 翻页。这里要注意，得用 `animateScrollToPage` 而不是 `scrollToPage`，前者有滑动动画，后者是瞬移，咱们要的是那种优雅的过渡效果。

LaunchedEffect {
    while  {
        delay // 停留3秒
        // 计算下一页的索引，这里要处理边界，虽然无限循环逻辑Yi经处理了大部分情况
        // 但为了安全起见，还是取个模比较稳妥
        val nextPage =  % pagerState.pageCount
        pagerState.animateScrollToPage
    }
}

不过这里有个小坑，Ru果用户正在用手滑动，结果定时器触发了页面就会自己跳走，这体验肯定是不行的。所以geng严谨的Zuo法是加一个 `isAutoPlay` 的状态，或者在用户交互时暂停自动轮播。这就留给大家自己去探索了毕竟代码写太满，就没意思了。

一个没有指示器的 Banner 是没有灵魂的。用户得知道现在滑到哪了还剩多少页。指示器的逻辑其实和图片渲染的逻辑有点像，也是要Zuo索引映射。

因为我们的 HorizontalPager 有两个额外的“替身”页面所以指示器的数量应该等于真实数据的数量，而不是 `pagerState.pageCount`。我们需要根据当前的 `currentPage` 算出指示器应该高亮哪一个。

通常的Zuo法是写一个 Row，里面放几个小圆点。通过 `pagerState.currentPage` 来计算哪个圆点该变色。这里有个细节，当页面在滑动过程中，指示器是不是也应该有个渐变的过程？这就涉及到 `pagerState.currentPageOffset` 的使用了不过为了保持代码简洁，咱们先只Zuo简单的选中高亮。

// 这里的逻辑和图片索引映射是一样的
val indicatorIndex = when  {
    0 -> realImages.size - 1
    realImages.size + 1 -> 0
    else -> pagerState.currentPage - 1
}
Row(
    modifier = Modifier.wrapContentWidth.align,
    horizontalArrangement = Arrangement.spacedBy
) {
    realImages.forEachIndexed { index, _ ->
        val color = if  Color.White else Color.Gray
        Box(
            modifier = Modifier
                .size
                .background
        )
    }
}

Compose 虽然强大，但Ru果不注意，性Neng也会翻车。HorizontalPager 默认只会加载屏幕可见范围内的页面。但为了实现“预加载”，让用户滑过去的时候图片Yi经准备好了我们Ke以设置 `beyondViewportPageCount`。

比如设置 `beyondViewportPageCount = 1`，这样系统就会额外加载当前页左右各一页的内容。对于网络图片来说这点预加载Neng显著提升用户体验，避免滑动时kan到图片加载的占位符。

从 XML 到 Compose，这不仅仅是语法的改变，geng是思维方式的转变。以前我们是在“拼装”视图，现在我们是在“描述”状态。用 Compose 写 Banner，一开始可Neng会觉得别扭，没有现成的轮子，但当你理清了 State 和 UI 的关系，搞懂了 `settledPage` 和 `currentPage` 的区别，你会发现，其实比以前写 Adapter 要清爽得多。

希望这篇文章Neng帮你解决在 Compose 开发中遇到的 Banner 难题。别怕报错，多试几次你会发现声明式 UI 的魅力所在。Ru果你有geng骚气的操作，欢迎在评论区交流，咱们一起进步。