什么是样本数据测试数据_撰写预览中的样本数据

什么是样本数据测试数据

This post was written for Compose 0.1.0.

这篇文章是为撰写0.1.0写的。

Jetpack Compose is Google’s new Android UI Toolkit, currently in development. If you already want to have a look, you can play around with it and learn some exciting new things!

Jetpack Compose是Google的新Android UI工具包，目前正在开发中。 如果您已经想看看，可以尝试一下并学习一些令人兴奋的新事物！

One area where Compose shines is previews. By annotating Composables with @Preview , you can preview the Composables inside Android Studio.

预览是Compose的一大亮点。 通过使用@Preview注释Composables，您可以在Android Studio中预览Composables。

This is very useful when working with e.g. Design Systems, or you just want to explore different variants of your UI components. But often, your Composables will take parameters, like our Project Composable.

当使用例如设计系统，或者您只想探索UI组件的不同变体时，这非常有用。 但是通常，您的Composables会带有参数，例如我们的Project Composable。

@Composable
fun Project(project: ZeplinProject, navigate: (screen: ZeplinScreen) -> Unit) {
    val nextScreen = ZeplinScreen.ScreenDetails(fakeScreen)
    val clickable = Modifier.clickable(onClick = { navigate(nextScreen) })
    ProjectCard(clickable) {
        Column(horizontalGravity = Alignment.CenterHorizontally) {
            VinkImage()
            Spacer(modifier = Modifier.height(6.dp))
            Text(text = project.name)
        }
    }
}

In these cases, you can’t use the Preview annotation on your Composable — after all, Compose doesn’t know where to obtain those parameters. One solution to this is to create “wrapper” Composables without any parameters.

在这些情况下，您将无法在Composable上使用Preview注释-毕竟，Compose不知道从何处获取这些参数。 一种解决方案是创建没有任何参数的“包装”可组合物。

@Preview("Project")
@Composable
fun ProjectPreview() {
    Project(project = fakeProject, navigate = previewNavigator)
}

This has one big downside: You will end up creating lots of preview Composables, cluttering your code.

这有一个很大的缺点：您最终将创建大量预览Composables，使代码混乱。

In other cases, you might have a list and want to provide some sample data.

在其他情况下，您可能需要一个列表，并希望提供一些示例数据。

With XML, supplying data for the preview was easily doable with the tools namespace.

使用XML，可以使用tools名称空间轻松地为预览提供数据。

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="First" />

救援的PreviewParameter (PreviewParameter to the Rescue)

Luckily, Jetpack Compose has the @PreviewParameter annotation. It can be applied to any parameter of a @Preview.

幸运的是，Jetpack Compose具有@PreviewParameter 批注 。 它可以应用于@Preview任何参数。

It needs PreviewParameterProvider , a simple interface which we can implement.

它需要PreviewParameterProvider ，这是我们可以实现的简单接口。

class FakeProjectProvider: PreviewParameterProvider<ZeplinProject> {
    override val values = fakeProjects.asSequence()
    override val count: Int = values.count()
}

Finally, we can use the @Preview annotation with our @PreviewParameter -annotated arguments.

最后，我们可以使用@Preview注释与我们@PreviewParameter -annotated参数。

@Preview
@Composable
fun Project(
  @PreviewParameter(FakeProjectProvider::class) project: ZeplinProject,
  navigate: (screen: ZeplinScreen) -> Unit = {}
) {
    ...
}

One caveat is that @PreviewParameter is only allowed on one parameter of a function, which is why we assign a default value to our second parameter.

一个警告是@PreviewParameter只允许在函数的一个参数上使用，这就是为什么我们将默认值分配给第二个参数的原因。

With this, previews become a lot more powerful in Compose. Let me know if this is useful in your day-to-day work and comment with any thoughts on this!

这样，预览在Compose中变得更加强大。 让我知道这对您的日常工作是否有用，并对此发表任何评论！

翻译自: https://medium.com/snapp-mobile/sample-data-in-compose-previews-bec32b62370f

什么是样本数据测试数据