如何在Jetpack Compose中使用Pager创建不同内容的引导流？

没错，用when代码块是实现Pager差异化内容最直接的方案，配合pagerState.scrollToPage()可以轻松实现手动页面跳转。下面是针对你需求的完整实现示例：

先添加必要依赖 #

在模块级build.gradle.kts中引入Pager和Material3依赖：

dependencies {
    implementation("androidx.compose.foundation:foundation-pager:1.6.0")
    implementation("androidx.compose.material3:material3:1.2.1")
}

完整实现代码 #

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun UserOnboardingFlow() {
    val pagerState = rememberPagerState(pageCount = { 3 })
    val coroutineScope = rememberCoroutineScope()
    
    // 持久化保存用户输入状态，避免配置变更丢失
    var userName by rememberSaveable { mutableStateOf("") }
    var selectedGender by rememberSaveable { mutableStateOf("") }
    var isTermsAgreed by rememberSaveable { mutableStateOf(false) }
    val genderOptions = listOf("男", "女", "保密")
    
    Column(modifier = Modifier.fillMaxSize()) {
        // Pager主体内容区
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.weight(1f)
        ) { page ->
            when(page) {
                0 -> {
                    // 页面1：姓名输入
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(horizontal = 24.dp),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        Text(text = "请输入您的姓名", style = MaterialTheme.typography.headlineSmall)
                        Spacer(modifier = Modifier.height(24.dp))
                        OutlinedTextField(
                            value = userName,
                            onValueChange = { userName = it },
                            label = { Text("姓名") },
                            modifier = Modifier.fillMaxWidth()
                        )
                    }
                }
                1 -> {
                    // 页面2：性别选择下拉
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(horizontal = 24.dp),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        Text(text = "请选择您的性别", style = MaterialTheme.typography.headlineSmall)
                        Spacer(modifier = Modifier.height(24.dp))
                        
                        var dropdownExpanded by remember { mutableStateOf(false) }
                        ExposedDropdownMenuBox(
                            expanded = dropdownExpanded,
                            onExpandedChange = { dropdownExpanded = !dropdownExpanded }
                        ) {
                            OutlinedTextField(
                                value = selectedGender.ifEmpty { "请选择性别" },
                                onValueChange = {},
                                readOnly = true,
                                trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = dropdownExpanded) },
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .menuAnchor()
                            )
                            
                            ExposedDropdownMenu(
                                expanded = dropdownExpanded,
                                onDismissRequest = { dropdownExpanded = false }
                            ) {
                                genderOptions.forEach { option ->
                                    DropdownMenuItem(
                                        text = { Text(option) },
                                        onClick = {
                                            selectedGender = option
                                            dropdownExpanded = false
                                        }
                                    )
                                }
                            }
                        }
                    }
                }
                2 -> {
                    // 页面3：服务条款阅读
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(horizontal = 24.dp, vertical = 16.dp)
                    ) {
                        Text(text = "服务条款", style = MaterialTheme.typography.headlineSmall)
                        Spacer(modifier = Modifier.height(16.dp))
                        
                        // 可滚动的条款内容区
                        Box(
                            modifier = Modifier
                                .weight(1f)
                                .verticalScroll(rememberScrollState())
                        ) {
                            Text(
                                text = """
                                    1. 服务条款内容示例：您同意遵守本平台的所有规则与用户协议，不得利用服务从事违法违规活动。
                                    2. 隐私政策：我们将严格保护您的个人信息，仅用于提供服务及必要的业务处理，不会擅自泄露给第三方。
                                    3. 用户责任：您需确保提供的个人信息真实有效，若因虚假信息导致的后果由您自行承担。
                                    4. 服务变更：平台有权根据业务调整服务内容，变更前将通过合理方式通知用户。
                                    （此处省略更多条款内容...）
                                """.trimIndent(),
                                style = MaterialTheme.typography.bodyMedium,
                                lineHeight = 20.sp
                            )
                        }
                        
                        // 同意复选框
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            Checkbox(
                                checked = isTermsAgreed,
                                onCheckedChange = { isTermsAgreed = it }
                            )
                            Text(text = "我已阅读并同意以上服务条款")
                        }
                        
                        // 完成注册按钮
                        Button(
                            onClick = { /* 此处添加提交用户信息的逻辑 */ },
                            enabled = isTermsAgreed,
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(top = 16.dp)
                        ) {
                            Text("完成注册")
                        }
                    }
                }
            }
        }
        
        // 底部导航按钮栏
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            // 上一步按钮
            Button(
                onClick = {
                    coroutineScope.launch {
                        pagerState.scrollToPage(pagerState.currentPage - 1)
                    }
                },
                enabled = pagerState.currentPage > 0
            ) {
                Text("上一步")
            }
            
            // 下一步按钮（最后一页不显示）
            if (pagerState.currentPage < 2) {
                Button(
                    onClick = {
                        coroutineScope.launch {
                            pagerState.scrollToPage(pagerState.currentPage + 1)
                        }
                    },
                    // 校验当前页面输入是否完成
                    enabled = when(pagerState.currentPage) {
                        0 -> userName.isNotEmpty()
                        1 -> selectedGender.isNotEmpty()
                        else -> true
                    }
                ) {
                    Text("下一步")
                }
            }
        }
    }
}

关键实现说明 #

1. 差异化内容实现：通过when(page)分支判断当前页码，返回对应页面的Composable组件，完全支持不同结构的页面内容。
2. 手动页面跳转：scrollToPage()是挂起函数，需通过rememberCoroutineScope启动协程调用，实现按钮控制的页面切换。
3. 状态持久化：使用rememberSaveable保存用户输入状态，避免屏幕旋转等配置变更导致的数据丢失。
4. 输入校验：给下一步按钮添加启用条件，确保用户完成当前页面的必填项后才能进入下一页，提升流程合理性。

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