Compose 中 HorizontalPager and VerticalPager

Jetpack Compose 中的 HorizontalPager 和 VerticalPager 是用于实现分页效果的组件，其中 HorizontalPager 用于水平分页，而 VerticalPager 用于垂直分页。它们允许您在应用程序中创建水平或垂直滚动的分页布局，类似于传统的 ViewPager。

1. 添加依赖项

在项目的 build.gradle 文件中添加以下依赖项：

dependencies {
    implementation "androidx.compose.foundation:foundation:<version>"
}

2. 使用 HorizontalPager

HorizontalPager 组件用于在水平方向上实现分页效果。

示例代码

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun HorizontalPagerExample() {
    val pagerState = rememberPagerState()

    HorizontalPager(
        count = 5,
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Page: $page",
                style = MaterialTheme.typography.h4,
                color = Color.White,
                modifier = Modifier.background(Color.Gray)
            )
        }
    }
}

3. 使用 VerticalPager

VerticalPager 组件用于在垂直方向上实现分页效果。

示例代码

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun VerticalPagerExample() {
    val pagerState = rememberPagerState()

    VerticalPager(
        count = 5,
        state = pagerState,
        modifier = Modifier.fillMaxSize()
    ) { page ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Page: $page",
                style = MaterialTheme.typography.h4,
                color = Color.White,
                modifier = Modifier.background(Color.Gray)
            )
        }
    }
}

4. 说明

• 在示例中，pagerState 是用来跟踪当前页面的状态。
• HorizontalPager 和 VerticalPager 的第一个参数是页面的数量。
• 在 lambda 中，您可以定义每个页面的内容，例如在示例中是一个带有页面号的文本框。

总结

HorizontalPager 和 VerticalPager 是 Jetpack Compose 中用于实现分页效果的重要组件。它们允许您创建水平或垂直的分页布局，并可以根据需要定义每个页面的内容。这些组件提供了简单而灵活的方式来实现分页 UI，适用于许多应用场景，如图片浏览器、教程页面等。