如何在 ScrollableTabRow 中让指示器跟随 HorizontalPager 滚动？

2024-03-15 17:51:04

在 ScrollableTabRow 中让指示器跟随 HorizontalPager 滚动

问题陈述

Jetpack Compose 的 ScrollableTabRow 提供了一种直观的方式来创建可滚动的选项卡布局。而 HorizontalPager 允许在页面之间水平滑动。但是，默认情况下，ScrollableTabRow 的指示器只会在切换选项卡时移动，而不是跟随 HorizontalPager 的滚动。本文将深入探讨如何解决这个问题，让指示器与 HorizontalPager 同步移动。

解决方案

要使指示器跟随 HorizontalPager 移动，我们需要自定义指示器的偏移量。可以使用 Modifier.tabIndicatorOffset 修饰符，它允许将指示器偏移到指定的距离。此外，我们需要监听 HorizontalPager 的状态变化，以便在滚动时更新指示器的偏移量。可以通过使用 PagerState.currentPage 属性来获取当前页面的索引。

实现步骤

以下步骤将指导你实现此解决方案：

理解 TabRowDefaults.SecondaryIndicator 函数： 此函数负责绘制 ScrollableTabRow 的指示器。它接受一个 positions 参数，其中包含每个选项卡的偏移量。
自定义指示器偏移： 使用 Modifier.tabIndicatorOffset 修饰符自定义指示器的偏移量。此修饰符允许将指示器偏移到 positions[pagerState.currentPage] 处的距离，其中 pagerState.currentPage 表示当前页面索引。
监听 HorizontalPager 状态： 通过订阅 PagerState.currentPageStateFlow 属性，监听 HorizontalPager 的状态变化。每当页面发生更改时，它都会发出一个新值，用于更新指示器的偏移量。

代码示例

以下代码示例展示了如何实现指示器跟随 HorizontalPager 滚动：

@Composable
fun MyCustomScrollableTabRow(
    selectedTabIndex: State<Int>,
    pagerState: PagerState,
    data: List<String>
) {
    ScrollableTabRow(
        selectedTabIndex = selectedTabIndex.value,
        indicator = { positions ->
            TabRowDefaults.SecondaryIndicator(
                Modifier.tabIndicatorOffset(positions[pagerState.currentPage])
            )
        },
        modifier = Modifier.fillMaxWidth()
    ) {
        data.forEachIndexed { index, title ->
            Tab(
                text = { Text(title, maxLines = 1) },
                selected = selectedTabIndex.value == index,
                onClick = {
                    pagerState.animateScrollToPage(index)
                }
            )
        }
    }
    
    HorizontalPager(state = pagerState, modifier = Modifier.fillMaxWidth()) { page ->
        // Show the page
    }
}