Composable如何用样本数据?Preview Composable @tools:sample用法
Compose Preview 场景下使用样本数据的实现方式
和XML布局开发里可以直接通过tools命名空间引用@tools:sample/xxx获取内置样本姓名、日期的逻辑不同,Compose Preview本身没有提供直接引用这类XML专属资源属性的语法,但完全可以通过几种成熟的方案实现等效的效果,不存在功能上的缺失:
- 最通用的实现方式:在标注了
@Preview的可组合函数调用时,直接传入硬编码的样本测试值。因为Preview本身是无运行时依赖的纯UI渲染场景,不需要和正式业务逻辑做绑定,直接把需要的姓名、日期等测试值当参数传入即可,渲染效果和XML里写tools样本值完全一致。示例代码:
@Preview(showBackground = true) @Composable fun UserItemPreview() { // 直接写入测试样本值,无需额外资源配置 val sampleName = "阿明" val sampleJoinDate = "2024-05-20" UserItem(name = sampleName, joinDate = sampleJoinDate) }
- 跨Preview复用样本数据:如果多个Preview场景都需要用到同一套通用样本值,可以把这些姓名、日期、实体类测试数据抽成独立的顶层常量文件,和XML里统一定义公共样本资源的逻辑保持一致,所有需要的Preview函数都可以直接引用,避免重复编写相同的测试值。
- 直接读取和XML同源的内置样本资源:我们在XML里用的
@tools:sample系列数据,本质是Android SDK内置的固定资源数组,在Compose代码里可以通过资源访问逻辑直接读取,拿到和XML场景完全一致的样本内容,不需要自己手动编写模拟值。示例代码:
@Preview(showBackground = true) @Composable fun BuiltinSamplePreview() { // 获取当前上下文的资源访问入口 val resources = LocalContext.current.resources // 读取和XML中@tools:sample/first_names完全相同的内置样本姓名列表 val sampleNames = resources.getStringArray( com.android.tools.sdk.R.array._ui_samples_first_names ) // 读取内置的样本日期资源 val sampleDate = resources.getString( com.android.tools.sdk.R.string._ui_sample_date_medium ) Column(modifier = Modifier.padding(16.dp)) { Text(text = "用户姓名:${sampleNames.first()}") Text(text = "注册日期:$sampleDate") } }
- 进阶批量预览能力:Android Studio Flamingo及之后的版本支持通过
@PreviewParameter注解搭配自定义的样本数据提供类,一次性把多组姓名、日期等样本数据传入预览面板,同时查看不同样本值下的UI渲染效果,灵活度比XML的单样本预览更高。
注意:Compose的DSL本身不支持解析XML布局特有的tools命名空间属性,不要尝试在Composable函数里模仿XML的语法写属性来引用
@tools:sample,所有样本数据都需要通过代码逻辑传入Composable的参数列表中。
内容的提问来源于stack exchange,提问作者Niaz Ahmed
相关产品推荐
相关产品推荐

