如何預覽具有非空類型參數的可組合項？

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", {}, {}, {})
}