轻松构建自定义分页体验：Jetpack Compose的TabRow和HorizontalPager携手并进

2023-03-31 16:45:42

Jetpack Compose：使用 TabRow 和 HorizontalPager 轻松创建分页界面

在 Android 开发中，创建美观且交互式的分页界面一直是一项挑战。但是，随着 Jetpack Compose 的出现，这一挑战变得不那么困难了。Jetpack Compose 提供了一系列强大的 UI 组件，其中 TabRow 和 HorizontalPager 组件专为构建分页界面而设计。

一、TabRow：可滚动的标签页

TabRow 组件创建一组水平滚动的标签页，每个标签页代表内容面板。添加 TabRow 组件只需在 XML 文件中添加 <androidx.compose.material.TabRow/> 即可。

<androidx.compose.material.TabRow(selectedTabIndex = selectedIndex, backgroundColor = Color.White) {
    tabs.forEach { tab ->
        Tab(
            text = { Text(text = tab.title) },
            selected = selectedIndex == tab.index,
            onClick = { selectedIndex = tab.index }
        )
    }
}

二、HorizontalPager：内容面板切换

HorizontalPager 组件负责在标签页之间切换内容面板。它的用法也很简单，只需要在 XML 文件中添加 <androidx.compose.material.HorizontalPager/> 即可。

<androidx.compose.material.HorizontalPager(state = pagerState) {
    tabs.forEach { tab ->
        Page(key = tab.index) {
            Text(text = "Page ${tab.index + 1}")
        }
    }
}

三、TabRow 与 HorizontalPager 的结合

将 TabRow 和 HorizontalPager 组件结合起来使用，可以创建功能强大的分页界面。只需将 HorizontalPager 组件放入 TabRow 组件内，即可实现标签页与内容面板的无缝切换。

<androidx.compose.material.TabRow(selectedTabIndex = selectedIndex, backgroundColor = Color.White) {
    tabs.forEach { tab ->
        Tab(
            text = { Text(text = tab.title) },
            selected = selectedIndex == tab.index,
            onClick = { selectedIndex = tab.index }
        )
    }
}

<androidx.compose.material.HorizontalPager(state = pagerState) {
    tabs.forEach { tab ->
        Page(key = tab.index) {
            Text(text = "Page ${tab.index + 1}")
        }
    }
}