如何在 Android Jetpack Compose 中创建可组合的多个预览？

Question

一个 Android Jetpack 组合可能有参数，最好有一个组合的多个预览，看看它如何与不同的参数一起工作。让我们以一个简单的可组合为例：

@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。