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