如何在 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。

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

How to create multiple previews of a composable in Android Jetpack Compose?

android

android-jetpack

android-jetpack-compose

单个预览可组合

使用 PreviewParameter 进行多次预览