Jetpack Compose中不使用Pager实现Tab页面滑动切换的方法

方案一：使用AndroidX官方Foundation Pager（替代Accompanist） #

Accompanist的Pager组件已经被官方整合到androidx.compose.foundation:foundation-pager库中，这属于Jetpack官方组件，完全符合你不想依赖Accompanist的需求。

步骤1：添加依赖

在Module级别的build.gradle中引入官方Pager库：

implementation "androidx.compose.foundation:foundation-pager:1.6.0"

步骤2：实现Tab与Pager联动

@Composable
fun TabSwipePage() {
    val tabTitles = listOf("页面1", "页面2", "页面3")
    // 管理Pager状态，指定页面总数
    val pagerState = rememberPagerState(pageCount = { tabTitles.size })
    val coroutineScope = rememberCoroutineScope()

    Column {
        // Tab栏
        TabRow(
            selectedTabIndex = pagerState.currentPage,
            // 自定义指示器跟随Pager滑动
            indicator = { tabPositions ->
                TabRowDefaults.Indicator(
                    Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
                )
            }
        ) {
            tabTitles.forEachIndexed { index, title ->
                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = {
                        // 点击Tab时平滑滚动到对应页面
                        coroutineScope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    },
                    text = { Text(title) }
                )
            }
        }

        // 可滑动页面容器
        HorizontalPager(state = pagerState) { page ->
            when (page) {
                0 -> PageContent("页面1专属内容")
                1 -> PageContent("页面2专属内容")
                2 -> PageContent("页面3专属内容")
            }
        }
    }
}

// 页面内容组件
@Composable
fun PageContent(content: String) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = content, fontSize = 24.sp)
    }
}

方案二：完全自定义滑动逻辑（不依赖任何Pager库） #

如果不想使用任何Pager相关库，可以通过手势监听+状态控制实现滑动切换，核心是利用scrollable处理手势，同步Tab选中状态与页面显示。

@Composable
fun CustomSwipeTabPage() {
    val tabTitles = listOf("页面1", "页面2", "页面3")
    // 记录当前选中页面索引
    val currentPage = remember { mutableIntStateOf(0) }
    // 监听水平滑动手势
    val scrollState = rememberScrollableState { delta ->
        val screenWidth = LocalConfiguration.current.screenWidthDp.dp.toPx()
        // 设置切换阈值：滑动超过屏幕30%宽度触发页面切换
        val switchThreshold = screenWidth * 0.3f

        when {
            delta > switchThreshold && currentPage.value < tabTitles.size - 1 -> {
                currentPage.value += 1
            }
            delta < -switchThreshold && currentPage.value > 0 -> {
                currentPage.value -= 1
            }
        }
        0f // 重置滑动状态，避免持续滚动
    }

    Column {
        // Tab栏
        TabRow(selectedTabIndex = currentPage.value) {
            tabTitles.forEachIndexed { index, title ->
                Tab(
                    selected = currentPage.value == index,
                    onClick = { currentPage.value = index },
                    text = { Text(title) }
                )
            }
        }

        // 自定义滑动页面容器
        Box(
            modifier = Modifier
                .fillMaxSize()
                .scrollable(scrollState, Orientation.Horizontal)
        ) {
            // 根据当前索引控制页面显示/隐藏
            tabTitles.forEachIndexed { index, _ ->
                PageContent("页面${index + 1}内容")
                    .align(Alignment.Center)
                    .offset(
                        x = if (index == currentPage.value) 0.dp 
                        else if (index < currentPage.value) (-100).percent 
                        else 100.percent
                    )
                    .alpha(if (index == currentPage.value) 1f else 0f)
            }
        }
    }
}

方案二说明

• 优点：完全自主控制，无任何第三方或官方Pager依赖
• 缺点：需要自行处理滑动手势阈值、页面切换动画、状态同步，逻辑复杂度较高，不如官方Pager稳定，也缺少边缘回弹、页面预加载等成熟功能

内容的提问来源于stack exchange，提问作者Heleena Joy