Compose中的预览@Preview与@PreviewParameter的使用

---

前言

阅读本文需要一定compose基础，如果没有请移步Jetpack Compose入门详解（实时更新）

本文介绍@Preview与@PreviewParameter注解的使用

---

一、@Preview

如果你构建了一个Compose项目，那么你的MainActivity中一定有一个默认的预览函数类似如下

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PlayComposeTheme {
        Greeting("Android")
    }
}

此时就算没有运行程序我们也可以在studio中预览

这是最简单的使用，我们点进@Preview的源码

参数：

• name-此预览的显示名称，允许在面板中识别它。

• group-此@Preview的组名称。这允许在UI中对它们进行分组，并仅显示其中一个或多个。

• apiLevel—呈现带注释的@Composable时使用的API级别

• widthDp—将在其中渲染带注释的@Composable的最大DP宽度。使用此选项可以限制渲染视口的大小。

• heightDp-将在其中渲染注释的@Composable的最大高度（以DP为单位）。使用此选项可以限制渲染视口的大小。

• locale-区域设置的当前用户首选项，对应于区域设置资源限定符。默认情况下，将使用默认文件夹。

• fontScale-用户首选字体的缩放因子，相对于基本密度缩放。

• showSystemUi-如果为true，将显示设备的状态栏和操作栏。@Composable将在完整活动的上下文中呈现。

• showBackground-如果为true，@Composable将使用默认背景色。

• backgroundColor-背景的32位ARGB颜色int，如果未设置，则为0

• uiMode—根据android.content.res.Configuration.uiMode的ui模式位掩码

• device—指示要在预览中使用的设备的设备字符串。请参阅设备中的可用设备。
  

我们将DefaultPreview改一下（ps：locale为设置不同的用户语言区域的参数；参数 uiMode 可接受任意 Configuration.UI_* 常量，并允许您相应地更改预览的行为。例如，您可以将预览设置为夜间模式，看看主题如何响应。本例中未体现）

@Preview(name = "name",
    group = "group",
    widthDp = 100,
    heightDp = 100,
    fontScale = 2f,
    backgroundColor = 0xFF00FF00,
    showBackground = true,
    showSystemUi = true,
    device = Devices.NEXUS_5
)
@Composable
fun DefaultPreview() {
    PlayComposeTheme {
        Greeting("Android")
    }
}

预览效果如下

注意点
showBackground 必须为true，backgroundColor 属性才生效，并且backgroundColor 是 ARGB Long，而不是 Color 值
同一个函数可以使用多个@Preview注解

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
@Composable
fun DefaultPreview() {
    PlayComposeTheme {
        Greeting("Android")
    }
}

二、@PreviewParameter

接下来我们尝试预览一个稍微复杂一点的布局

@Preview
@Composable
fun  NationalDayNoticeItemPreview(
    noticeName: String,
    modifier: Modifier = Modifier
){
    Row(
        modifier = Modifier, verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp),
            text = noticeName
        )
        IconButton(onClick = {}) {
            Icon(Icons.Filled.Close, contentDescription = "Close")
        }
    }
}

这时，@Preview注解就会爆红并提示

翻译过来就是预览中不支持具有非默认参数的可组合函数，除非它们用**@PreviewParameter**注释。
但是如果我们把 noticeName去掉，函数是不报错的，说明Modifier是可以作为参数传递进来的，这里的非默认参数指代的是Modifier

1.单个参数

@PreviewParameter注解的规范使用如下

先实现一个数据源PreviewParameterProvider

//简单实现如，values是一个列表数据，传入多个就会生成多个预览视图
class StringProvider : PreviewParameterProvider<String> {
    override val values: Sequence<String>
        get() = listOf("你要上班啦","你要上学啦").asSequence()
}

然后将NationalDayNoticeItemPreview更改为如下

@Preview
@Composable
fun  NationalDayNoticeItemPreview1(
    @PreviewParameter(StringProvider::class,1)noticeName: String,
    // onClose: () -> Unit,
    modifier: Modifier = Modifier
){
    Row(
        modifier = Modifier, verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp),
            text = noticeName
        )
        IconButton(onClick = {}) {
            Icon(Icons.Filled.Close, contentDescription = "Close")
        }
    }
}

预览成功

通过上面的例子我们可以看到，注解 @PreviewParameter的第一个参数为数据源的封装，第二个参数限制数据源个数

2.多个参数

但是如果我们要将IconButton中的onClick 也作为一个参数传递给这个预览函数，这时string的数据源就行不通了，而@PreviewParameter注解在每一个函数中只能使用一次，所以如果有多个参数就我们要自己封装一个数据源包含两个乃至多个参数
代码如下（示例）：

、、数据实体
data class NationalDayNoticeItemPreviewData(
    val noticeName :String,
    val onClose :() -> Unit
)

//初始化
class Provider : PreviewParameterProvider<NationalDayNoticeItemPreviewData> {
    private val noticeName = "你要上班啦"
    private val onClose = {

    }
    private val nationalDayNoticeItemPreviewData=NationalDayNoticeItemPreviewData(noticeName,onClose)

    override val values: Sequence<NationalDayNoticeItemPreviewData>
        get() {
           return listOf(nationalDayNoticeItemPreviewData).asSequence()
        }

}

然后将NationalDayNoticeItemPreview更改为如下

@Preview
@Composable
fun  NationalDayNoticeItemPreview2(
    @PreviewParameter(Provider::class,1)nationalDayNoticeItemPreviewData: NationalDayNoticeItemPreviewData,
    modifier: Modifier = Modifier
){
    Row(
        modifier = Modifier, verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp),
            text = nationalDayNoticeItemPreviewData.noticeName
        )
        IconButton(onClick = nationalDayNoticeItemPreviewData.onClose) {
            Icon(Icons.Filled.Close, contentDescription = "Close")
        }
    }
}

预览成功

---

查阅的资料
Compose @Preview 中 @PreviewParameter使用