【鸿蒙HarmonyOS开发笔记】使用@Preview装饰器预览组件

概述

ArkTS应用/服务支持组件预览,要求compileSdkVersion8或以上。组件预览支持实时预览,不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现,在单个源文件中,最多可以使用10@Preview装饰自定义组件。


@Preview的使用参考如下示例

@Preview({title: 'FoodImage'
})
@Component
struct FoodImageDisplayPreview {build() {Flex() {FoodImageDisplay({ foodItem: getDefaultFoodData() })}}
}

以上示例的组件预览效果如下图所示:
在这里插入图片描述


组件预览默认的预览设备为Phone,若您想在不同的设备,或者不同的屏幕形状,或者不同设备语言等情况下的组件预览效果,可以通过设置@Preview的参数,指定预览设备的相关属性。若不设置@Preview的参数,默认的设备属性如下所示:

@Preview({title: 'Component1',  //预览组件的名称deviceType: 'phone',  //指定当前组件预览渲染的设备类型,默认为Phonewidth: 1080,  //预览设备的宽度,单位:pxheight: 2340,  //预览设备的长度,单位:pxcolorMode: 'light',  //显示的亮/暗模式,取值为light或darkdpi: 480,  //预览设备的屏幕DPI值locale: 'zh_CN',  //预览设备的语言,如zh_CN、en_US等orientation: 'portrait',  //预览设备的横竖屏状态,取值为portrait或landscaperoundScreen: false  //设备的屏幕形状是否为圆形
})

请注意,如果被预览的组件是依赖参数注入的组件,建议的预览方式是:定义一个组件片段,在该片段中声明将要预览的组件,以及该组件依赖的入参,并在组件片段上标注@Preview注解,以表明将预览该片段中的内容。例如,要预览如下组件:

@Component
struct Title {context: stringbuild() {Text(this.context)}
}

建议按如下方式预览:

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {build() {Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title,以及该组件依赖的入参 {context: ’MyTitle’}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法---矩阵的乘法及其运用

相信我们都做过一个题叫斐波那契数列,对于一般的题,n的取值范围通常在1000以内,但是如果你遇到的是下面这题呢? 斐波那契数列 - 洛谷 发现了吗?我的n取值范围连long long都会爆出,所以下面我们通过矩阵乘法…

张驰咨询:光伏产业新质生产力提升咨询方案

光伏产业新质生产力提升咨询方案 一、光伏行业目前发展现状及特点 1、高度竞争 2、技术驱动 3、绿色发展 二、光伏发展新质生产力面临的痛点 1、成本压缩与效率提升并存挑战 2、新技术应用与推广难度 3、国际贸易摩擦影响 4、市场需求波动大 5、政策与补贴依赖性 三、…

第2章 辐射度、光度和色度学基本理论

一、前言 辐射度学(radiology)是一门以整个电磁波段(electromagnetic band)的电磁辐射能(electromagnetic radiation energy)测量为研究对象的科学。计算机图形学中涉及的辐射度学,则集中于整个…

ARM.day8

1.自己设置温度湿度阈值,当温度过高时,打开风扇,蜂鸣器报警 2.当湿度比较高时,打开LED1灯,蜂鸣器报警 main.c #include "si7006.h" #include "CH1.h" #include "led.h" // 延时函数in…

【Redis】高频面试题

提供五种常见的数据类型:String(字符串),Hash(哈希),List(列表),Set(集合)、Zset(有序集合) 文章目录 1、为什…

融云:社交泛娱乐出海,地区和赛道如何选?

“出海是这个时代给我们的机遇。”这是当前很多互联网出海人的心声。 走过跌宕起伏的 16 年出海历程,中国出海人现在面对与此前截然不同的市场环境,很多地区蓝海不再,也有不少赛道变得拥挤。 一体两面,如今的社交泛娱乐出海也已…

【TB作品】430单片机,单片机串口多功能通信,Proteus仿真

文章目录 题目功能仿真图程序介绍代码、仿真、原理图、PCB 题目 60、单片机串口多功能通信 基本要求: 设计一串口通信程序,波特率38400,通过RS232与PC机通信。 自动循环发送数据串(设计在程序中) 接收并存储和显示该数据串 在发送端定义10个ASCII码键0-9 按键发送单字节,PC机接…

Redis的安装与启动

一、Linux环境安装&启动Redis 1. 安装步骤 第一步:在官网下载好Redis安装包,上传到Linux中并进行解压到相应(如/opt/software/)目录中;(注意:完成了第二步后,即安装了C/C语言…

「媒体宣传」财经类媒体邀约资源有哪些?-51媒体

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 财经类媒体邀约资源包括但不限于以下几类: 商业杂志和报纸:可以邀请如《财经》、《新财富》、《经济观察报》等主流商业杂志和报纸。这些媒体通常具有较强的品牌影…

54、Qt/对话框、事件机制相关学习20240325

一、完善对话框,点击登录按钮,如果账号和密码匹配,则弹出信息对话框,给出提示”登录成功“,提供一个Ok按钮,用户点击Ok后,关闭登录界面,跳转到其他界面 如果账号和密码不匹配&#…

Android 8.1 预置应用开机自启动

Android 8.1 预置应用开机自启动 近来接到项目需求,要求将预置应用设置为开机自启动,具体修改参照如下: 方法一: /packages/apps/Launcher3/src/com/android/launcher3/model/LoaderTask.java private void loadWorkspace() {i…

Machine Learning机器学习之随机森林(Random Forests)

目录 前言: 思想与原理: 随机森林分类效果与什么因素有关: 经典的随机森林算法: 一、构建经典随机森林算法 1、思路 2、步骤: 3、代码实现 二、随机森林算法应用 建模步骤 Python代码实现(完整代码&#xf…

36.网络游戏逆向分析与漏洞攻防-游戏网络通信数据解析-数据解码器的实现

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 如果看不懂、不知道现在做的什么,那就跟着做完看效果 内容参考于:易道云信息技术研究院VIP课 上一个内容:35.登录成功数据…

Embedding模型提升效果的方法之一:Whitening和pooling

0. 前言 Embedding模型的主流框架基本上分为三类——基于bert结构的,基于GPT结构的和基于T5结构的,当然这些结构都是Transformer的变形。对于Embedding模型,使用bert结构目前看是最好的。有篇论文论文对基于bert的Embedding模型和基于GPT的E…

P3393 逃离僵尸岛 bfs +最短路

P3393 逃离僵尸岛 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:bfs处理出高收费城市,将价格作为点权,将点权当作边权跑最短路。由于到达 v v v,且 v v v不是终点,那么还要再走这个时候需要在该点休息&#xf…

集合(下)Map集合的使用

文章目录 前言一、Map接口二、Map接口的实现类 1.HashMap类2.TreeMap类总结 前言 Map集合没有继承Collection接口,不能像List集合和Set集合那样直接使用Collection接口的方法。Map集合其自身通过以key到value的映射关系实现的集合,也有相应的许多方法。类…

前端实现导出xlsx功能

1.安装xlsx插件 npm install xlsx 2.示例 import XLSX from xlsx;// 示例数据 const data [[Name, Age, Country],[Alice, 25, USA],[Bob, 30, Canada],[Charlie, 28, UK] ];// 创建一个 Workbook 对象 const wb XLSX.utils.book_new(); const ws XLSX.utils.aoa_to_sheet…

前端理论总结(js)——reduce相关应用方法

按属性对object分类 let peple[{name:Alice,age:21},{name: Mex, age: 20},{name:Jane,age:20} }function groupBy (objectArray, property) {return objectArray.reduce(function(pre, cur){let keycur[property]if(!pre[key]){pre[key][]}pre[key].push(cur)return pre},{})…

CCCorelib 点云RANSAC拟合球体(CloudCompare内置算法库)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 RANSAC是一种随机参数估计算法。RANSAC从样本中随机抽选出一个样本子集,使用最小方差估计算法对这个子集计算模型参数,然后计算所有样本与该模型的偏差,再使用一个预先设定好的阈值与偏差比较,当偏差小于阈值时…

CUMT linux操作系统课程设计 任务2

先说题目: 调试Linux内核的启动过程,并在Linux 0.11内核进入保护模式之前添加提示信息 //这里吐槽一下,学校发的文档让你用断点去查看运行根本无法操作,报错如下: 所以别管这个报错,先跟着我来 第一题,调试…