如下所示是两个函数

@Composable
private fun WaterCounter(modifier: Modifier = Modifier) {
    val count = 0
    Text(
        text = "You've had $count glasses of water",
        modifier = modifier.padding(all = 16.dp)
    )
}

@Preview(showBackground = true)
@Composable
private fun PreviewWaterCounter() {
    WaterCounter()
}

那么,如果我们向Water Counter添加@Preview个注释,这不是更好吗?这将节省一些代码行,并且既可以作为预览,也可以作为小部件使用.

推荐答案

对于像您发布的代码这样的简单情况,拥有单独的可组合预览似乎有点太多了,但考虑一下这个场景,其中有2个带有非默认参数的组合,

@Composable
fun PersonBiography(
    details: Data,
    otherParameters : Any?
) {
    Box(
        modifier = Modifier.background(Color.Red)
    ) {
        Text(details.dataValue)
    }
}

@Composable
fun AccountDetails(
    details: Data
) {
    Box(
        modifier = Modifier.background(Color.Green)
    ) {
        Text(details.dataValue)
    } 
}

它们都需要相同的数据类,第一个有一个额外的参数.如果我必须预览它们,我必须 destruct 它们的签名,只是为了预览而为它们分配缺省值.

@Preview
@Composable
fun PersonBiography(
    details: Data = Data(dataValue = ""),
    otherParameters : Any? = null
) { … }

@Preview
@Composable
fun AccountDetails(
    details: Data = Data(dataValue = "")
) { … }

一个很好的解决办法是有2个单独的预览合成组件,并利用PreviewParameterProvider个组件拥有一个可重复使用的实用程序,它可以提供我需要的参数的实例.

class DetailsPreviewProvider : PreviewParameterProvider<Data> {
    override val values = listOf(Data(dataValue = "Some Data")).asSequence()
}

@Preview
@Composable
fun PersonBiographyPreview(@PreviewParameter(DetailsPreviewProvider::class) details: Data) {
    PersonBiography(
        details = details,
        // you may also consider creating a separate provider for this one if needed
        null
    )
}

@Preview
@Composable
fun AccountDetailsPreview(@PreviewParameter(DetailsPreviewProvider::class) details: Data) {
    AccountDetails(details)
}

enter image description here

或者,如果PreviewParameterProvider有点太多,您可以简单地创建一个可组合的预览,您可以在其中创建和提供模拟数据.

@Preview
@Composable
fun AccountDetailsPreview() {
    val data = Data("Some Account Information")
    AccountDetails(data)
}

enter image description here

使用这些方法中的任何一种,您都不需要打破实际的Composable的 struct ,只是为了大致了解它是什么样子.

Android相关问答推荐

在Android Studio中陷入了不兼容的Gradle版本的循环

Android Compose Lazy柱形实时UI更改

如何在Reaction Native中显示Google Map iFrame?

处理Room数据库中的嵌套实体

如何从URI中获取图像大小

如何在android库中关联应用程序链接?

当 Jetpack Compose 中的第一个文本很长时,将省略号添加到第一个文本

错误:无法安装应用程序:INSTALL_PARSE_FAILED_MANIFEST_MALFORMED (React-Native-Android-Studio)

Jetpack Compose 绘制范围内的动画

Jetpack Compose with Paging 3 发出太多网络请求

DatePickerDialog (Android/Kotlin) 的两个问题

NFC getNdefMessage 在 Android 13 上写入标签后返回 null

Hilt 依赖注入重复绑定错误

Android Jetpack Compose - 每次文本字段值更改时,可组合函数都会重新组合

Kotlin 调用带参数的函数 Any is xxx ||任何 yyy 都不起作用

运行一次 kotlin 流,但在下游收到两次

对话框中的内容不可见

android 13 版本是否会影响 android 12 目标应用程序

新安装 Expo Go 的 android 设备上的 sdk 46.0.0 (@snack/sdk.46.0.0) 出错

未使用的内容填充参数