使用 PreviewParameter NavController 在 android jetpack 组合导航中预览“屏幕”答案

【问题标题】：Preview a "screen" in android jetpack compose navigation with a PreviewParameter NavController使用 PreviewParameter NavController 在 android jetpack 组合导航中预览“屏幕”
【发布时间】：2021-11-28 18:39:52
【问题描述】：

我发现了 android Cetpack Compose（和 Navigation），并尝试以 navController 作为参数显示视图的预览。

为了实现，我使用PreviewParameter，我没有错误，但预览窗口中没有显示任何内容。

有人知道如何将假的NavController 实例传递给 Composable 吗？

class FakeNavController : PreviewParameterProvider<NavController> {
    override val values: Sequence<NavController>
        get() {}
}

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

【问题讨论】：

标签： kotlin android-jetpack-compose android-jetpack-navigation

【解决方案1】：

PreviewParameter 用于创建具有不同数据的同一视图的多个预览。您应该从values 返回所需的值。在您的示例中，您没有返回任何内容，这就是它不起作用的原因（在我的情况下它甚至没有构建）。

这不会帮助您模拟导航控制器，因为您仍然需要以某种方式创建它才能从 values 返回。我认为这是不可能的。

您可以传递一个处理程序，在这种情况下您不需要模拟它：

@Composable
fun HomeView(openOtherScreen: () -> Unit) {
    
}
// your Navigation view
composable(Destinations.Home) { from ->
    HomeView(
        openOtherScreen = {
            navController.navigate(Destinations.Other)
        },
    )
}

【讨论】：

感谢您的帮助。我的问题是显示一个以 NavController 作为参数的屏幕预览。因为我的屏幕在另一个文件中，我不知道如何处理它。但是您的回答有助于我理解 PreviewParameter 的用途。最好的尊重

【解决方案2】：

最后，我声明了一个可以为空的 NavController，它可以工作了。

@Composable
fun HomeView(navController: NavController?) {
    Surface {
        Column(
            modifier = Modifier
                .padding(all = 4.dp)
        ) {
            Text(
                text = "Home View",
                style = MaterialTheme.typography.body2
            )

            Spacer(modifier = Modifier.height(8.dp))

            Button(onClick = { navController?.navigate("lineRoute") }) {
                Text(text = "nav to Line view")
            }
        }
    }
}


@Preview
@Composable
fun Preview (){
    HomeView(null)
}

【讨论】：

嗨，有办法注入模拟导航控制器来测试预览中的导航吗？
这不起作用，甚至没有特别意义，因为我们假设使用预览参数来显示视图的不同状态

【解决方案3】：

您不必将其设为可为空并将 null 传递给它。你只需要传递这个：rememberNavController()

@Preview
@Composable
fun Preview() {
    HomeView(rememberNavController())
}

【讨论】：