Compose @Preview 中 @PreviewParameter使用

Compose @Preview预览视图,fun是不能直接传入参数,(modifier不在禁止列)如下:

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

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

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

    /**
     * Returns the number of elements in the [values] [Sequence].
     */
    val count get() = values.count()
}
//简单实现如,values是一个列表数据,传入多个就会生成多个预览视图
class ChatProvider : PreviewParameterProvider<String>{
    override val values: Sequence<String>
        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>中T的类型


image

如下修改就可以完成

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

class ChatProvider2 : PreviewParameterProvider<DbBean> {
    val dbBean1 = DbBean(1, "aa")
    val dbBean2 = DbBean(2, "bb")
    override val values: Sequence<DbBean>
        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)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容