如何预览具有非空类型参数的可组合项？

Question

@Composable
fun VerifyScreen(
    email: String,
    navigator: DestinationsNavigator
) {
// .. 

}


@Composable
@Preview
fun VerifyScreenPreview() {
    VerifyScreen("you@re.awesome", null)
}

Null 不能是非空类型 DestinationsNavigator 的值

当然，您可以通过添加问号来更改类型，但如果这不是一个选项怎么办？

navigator: DestinationsNavigator?

Answer 1

您可以使用库提供的EmptyDestinationsNavigator

@Composable
@Preview
fun VerifyScreenPreview() {
    VerifyScreen("you@re.awesome", EmptyDestinationsNavigator)
}

Answer 2

不鼓励将NavController或类似的东西传递给您的可组合项，请参阅文档。 如果您遵循建议，您只需从Preview中传递空的 lambda（或更多）

传递应由可组合项触发以进行导航的 lambda，而不是 NavController 本身。

这样做的问题是，当您的 Composable 中需要大量 lambda 时，它看起来不太好。 一种选择是不预览如此大的 Composable 作为一个整体，而是预览 ui 的一些较小部分。 另一种选择是为您可以从预览中模拟的DestinationsNavigator创建一些界面。

Answer 3

您可以使用此模式

@Composable
fun VerifyScreen(
    email: String,
    navigator: DestinationsNavigator
) {
    VerifyScreenContent(
        email = email,
        navigator = {
            //...
        },
        navigator2 = {
            //...
        },
        navigator3 = {
            //...
        },
    )
}

@Composable
fun VerifyScreenContent(
    email: String,
    navigator: () -> Unit,
    navigator2: () -> Unit,
    navigator3: () -> Unit,
) {
// .. 

}


@Composable
@Preview
fun VerifyScreenContentPreview() {
    VerifyScreen("you@re.awesome", {}, {}, {})
}