如何在 Android Jetpack Compose 中創建可組合的多個預覽？

Question

一個 Android Jetpack 組合可能有參數，最好有一個組合的多個預覽，看看它如何與不同的 arguments 一起工作。 讓我們以一個簡單的可組合為例：

@Composable
fun GreetingText(name: String) {
    Text("Hello $name!")
}

預覽可能如下所示：

@Preview
@Composable
fun GreetingTextPreview() {
    GreetingText("John")
}

如何在不創建多個預覽的情況下使用不同的名稱預覽組合？

Answer 1

單預覽可組合

一種直接的方法是在單個預覽中組合多個可組合項，例如：

@Preview(showBackground = true)
@Composable
fun GreetingTextPreview() {
    Column {
        val names = remember {
            arrayOf("John", "D'Artagnan")
        }

        for (name in names) {
            GreetingText(name)
        }
    }
}

結果：

使用 PreviewParameter 進行多個預覽

例如，如果可組合項太大，將多個可組合項組合到一個預覽中可能不方便。 另一種方法是使用PreviewParameter ，這樣您將獲得單獨的預覽：

class NameProvider: PreviewParameterProvider<String> {
    override val values: Sequence<String> = sequenceOf(
        "John",
        "Albert Einstein"
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingTextPreview(
    @PreviewParameter(NameProvider::class) name: String
) {
    GreetingText(name)
}

結果：

但請記住，每個預覽組合只能有一個@PreviewParameter 。