鸿蒙4.0开发笔记之DevEco Studio如何使用Previewer窗口预览器(一)

一、预览器作用

DevEco Studio预览器概况在HarmonyOS应用开发过程中,通过使用预览器,可以查看应用的UI效果,方便开发者实时查看应用的运行效果,随时调整代码。

二、打开Previewer预览器

1、正常启动

打开预览器的位置在DevEco Studio编辑界面的右上角部分,竖排文字的第二个选项卡则是Previewer,点击加载即可进入预览器,如下图:

2、预览器打开失败

报错1:

Cannot preview this file. Previews are available for files in .ets,

.js, .css, .hml, or .visual format, .json files of service widgets,

layout.xml, AbilitySlice.java, and Ability.java.

报错2:

Only files in a module can be previewed.

等相应的错误,原因是没有选中相应的ets文件。在鸿蒙4.0中,只有ets布局文件才能打开Previewer,查看相应的UI界面。我的解决方法当然就是选中index.ets文件,再点击Previewer,则成功加载。

三、Previewer相关操作

1、实时更新功能

这个功能抗以方便开发者实时查看应用的运行效果。通过编辑左侧代码区的相应代码,在右侧的Previewer预览器中则会时机更新。其原因是因为预览器插上了电,如下图:

当开启预览器时,系统默认设置是打开实时更新的,若要关闭,则可以点击红色箭头指向的图标,然后就会变成下面的状态,该状态下更改左侧代码不会实时更新Previewer中的UI界面。若需要重新连接,则可以点击刷新按钮或连接预览器按钮。

2、Inspector寻找代码段

点击两个T的按钮,则可以进入Inspector界面。

这个界面有三大功能。

(1)选定代码块,在Previewer中找到相对应的UI组件;

(2)选定某个UI组件,在代码中寻找到相对应的代码块;

(3)在组件树下,寻找各个组件之间的关系。

3、同时打开平板、折叠屏UI

都知道鸿蒙OS一个很大的优点就是多设备通用,这在编译和UI设计时省了很大力气。在DevEco Studio中的一个表现为可以在Previewer中同时查看自己的UI代码在不同设备中的呈现效果,启动图标如下图:

进入之后便可以看到折叠屏、手机、平板等设备,同时可以点击右上角的小开关,打开之后就可以把列表中的所有设备都呈现UI展示。

相关推荐
jackson凌3 分钟前
【Java学习笔记】【第一阶段项目实践】房屋出租系统(面向对象版本)
java·笔记·学习
卓律涤1 小时前
【找工作系列①】【大四毕业】【复习】巩固JavaScript,了解ES6。
开发语言·前端·javascript·笔记·程序人生·职场和发展·es6
梁下轻语的秋缘1 小时前
HarmonyOS:重构万物互联时代的操作系统范式
华为·重构·harmonyos
lpfasd1231 小时前
Flutter与Kotlin Multiplatform(KMP)深度对比及鸿蒙生态适配解析
flutter·kotlin·harmonyos
交叉编译之王 hahaha1 小时前
OpenHarmony 5.1.0 Release目录结构详细解析(3级目录)
arm开发·华为·harmonyos
love530love1 小时前
【笔记】记一次PyCharm的问题反馈
ide·人工智能·windows·笔记·python·pycharm
笑鸿的学习笔记2 小时前
虚幻引擎5-Unreal Engine笔记之Pawn与胶囊体的关系
笔记·ue5·虚幻
交叉编译之王 hahaha2 小时前
RK3568-鸿蒙5.1与原生固件-扇区对比分析
华为·harmonyos
HarmonyOS_SDK2 小时前
【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit (3)
harmonyos
孤寂大仙v3 小时前
【Linux笔记】——线程同步条件变量与生产者消费者模型的实现
linux·c++·笔记