如何在Jetpack Compose Navigation中用PreviewParameter预览带NavController的界面

API 探路者

2026-9-24

解决方案

问题根因

你当前预览无内容的核心原因是自定义的FakeNavController作为PreviewParameterProvider，其values属性返回了空序列，预览环境无法获取到可用的NavController实例。

推荐实现方案

方案1：直接用官方提供的`rememberNavController`生成预览实例（最简方案）

不需要自定义PreviewParameterProvider，直接在预览函数中生成无实际跳转能力的测试用NavController即可满足绝大多数界面预览需求：

@Preview
@Composable
fun HomeViewPreview() {
    // 预览环境下生成默认空实现的NavController实例
    val fakeNavController = rememberNavController()
    HomeView(fakeNavController)
}

方案2：自定义PreviewParameterProvider实现（适用于多状态批量预览场景）

如果你需要传递多个自定义配置的NavController实例做多状态预览，可以按以下方式实现Provider：

class FakeNavControllerProvider : PreviewParameterProvider<NavController> {
    override val values = sequenceOf(
        NavHostController(LocalContext.current).apply {
            // 可选配置：指定当前目的地、参数，模拟特定页面的导航状态
            setBackStackEntry(
                NavBackStackEntry.create(
                    context = LocalContext.current,
                    destination = NavDestination("home").apply { id = R.id.home },
                    arguments = null
                )
            )
        }
    )
}

@Preview
@Composable
fun Preview(
    @PreviewParameter(FakeNavControllerProvider::class) fakeNavController: NavController
) {
    HomeView(fakeNavController)
}