Compose @Preview 中 @PreviewParameter使用

Compose @Preview预览视图，fun是不能直接传入参数，（modifier不在禁止列）如下：

@Preview
@Composable
fun HelloChat(
   base:String
){
    Text(text = base)
}

就会报错，并推荐你使用@PreviewParameter，使用这个注解需要先实现PreviewParameterProvider接口

interface PreviewParameterProvider {
    /**
     * [Sequence] of values of type [T] to be passed as @[Preview] parameter.
     */
    val values: Sequence

    /**
     * Returns the number of elements in the [values] [Sequence].
     */
    val count get() = values.count()
}
//简单实现如，values是一个列表数据，传入多个就会生成多个预览视图
class ChatProvider : PreviewParameterProvider{
    override val values: Sequence
        get() = listOf("aa","bb").asSequence()
}

image

使用如下

@Preview
@Composable
fun HelloChat(
    @PreviewParameter(ChatProvider::class) base:String,
    modifier: Modifier= Modifier
        .fillMaxWidth()
        .height(40.dp)
){
    Text(text = base)
}

//在Activity中使用如下
HelloChat("Test")

经测试@PreviewParameter只支持生成一个，如果有多个参数可以修改PreviewParameterProvider中T的类型

image

如下修改就可以完成

data class DbBean(
    val value: Int,
    val desc: String
)

class ChatProvider2 : PreviewParameterProvider {
    val dbBean1 = DbBean(1, "aa")
    val dbBean2 = DbBean(2, "bb")
    override val values: Sequence
        get() = listOf(dbBean1, dbBean2).asSequence()
}

@Preview
@Composable
fun HelloChat(
    @PreviewParameter(ChatProvider2::class) dbBean: DbBean,
    modifier: Modifier = Modifier
        .fillMaxWidth()
        .height(40.dp)
) {
    Text(text = dbBean.desc)
}