HarmonyOS开发环境DevEco Studio预览器使用指南
HarmonyOS开发环境DevEco Studio预览器使用指南
本文将详细介绍HarmonyOS开发环境DevEco Studio中预览器的使用方法，包括实时预览、动态预览、组件预览、双向预览和多设备预览等功能。通过本文的学习，开发者可以更好地利用预览器提高开发效率。
1. 前言
前面，我们已经学习了如何创建工程，并对工程有了一个基本了解。同时还学习了关于代码编辑的一些相关技巧和功能，帮助我们在使用 DevEco Studio 的时候，能更加高效的完成开发。
那么这节课我们来了解预览器的使用。
2. 实时预览
首先我们来学习下预览器的实时预览。
打开项目的某一个页面，然后再 IDE 右边工具栏中点击
Previewer
，即可展开预览器。
在开发过程中，编写界面 UI 代码的时候 :
- 如果修改了组件的属性，预览器则会以亚秒级的速度刷新预览结果。
- 如果添加或删除了 UI 组件，敲击
Ctrl+S
进行保存后，预览器就会立即刷新预览结果。
例如这个案例中，我们去修改text组件的文本内容，在输入或删除内容的同时，预览器会同步显示预览结果。
也可以增加一个新的
text
组件，增加后敲击
Ctrl+S
进行保存，新增的
text
组件也会立即展示在预览器上。
3. 动态预览
了解了实时预览后，我们来学习下动态预览。
在预览器界面，我们可以对应用进行如单击、跳转、滑动等一系列操作，这种界面交互效果与运行在真机设备上是一致的。
在
《第二章、DevEco Studio的使用》02 - 构建ArkTS应用
文章中，我们就实现了在预览器当中点击按钮，实现不同页面之前的跳转。
如果代码中涉及到网络、数据库、传感器等功能的开发，则可以使用模拟器或真机进行调试。
4. 组件预览
我们不止可以预览整个页面，还可以通过在组件上添加
@Preview
注解，实现在单个原文件中对单个组件或组件组合的预览。
例如当前
Index
页面由两个组件构成，一个组件显示
Hello World
和一个
跳转按钮
，另一个组件显示
下半部分内容
。我们给这两个组件添加
@Preview
注解，添加
@Preview
注解后敲击
Ctrl+S
进行保存。
示例代码如下 :
// Index.ets
// 导入异常模块
import { BusinessError } from '@kit.BasicServicesKit';
import { router } from '@kit.ArkUI';
@Preview
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
// 使用文本组件
Text("Hello World")
.fontSize(50) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
// 添加按钮组件，以响应用户点击
Button() {
Text('跳转')
.fontSize('24fp')
.fontColor(Color.Red)
// Text('跳转') //设置按钮名称
// .fontSize(20) //设置按钮名称字体大小
// .fontWeight(FontWeight.Bold) //设置按钮字体加粗
}
.newExtend()
.onClick(() => {
console.info(`Succeeded in clicking the 'Next' button.`);
// 跳转到 Second 页面
router.pushUrl({ url: 'pages/Second' }).then(() => {
console.info('Succeeded in jumping to the second page.');
}).catch((err: BusinessError) => {
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`);
});
})
}
.width('100%')
}
.height('100%')
}
}
@Extend(Button)
function newExtend() {
// 添加按钮组件，以响应用户点击
.type(ButtonType.Capsule) //设置按钮类型
.margin({ top: 20 }) //设置按钮上外边距为20
.backgroundColor('#0D9FFB') //设置按钮背景颜色
.width('40%') //设置按钮宽度
.height('5%') //设置按钮高度
}
@Preview
@Component
struct Message {
build() {
Row() {
Column() {
// 使用文本组件
Text("下半部分内容")
.fontSize(20) //设置字体大小
.fontWeight(FontWeight.Bold) //设置字体加粗
}.width('100%')
}.height('50%')
}
}
点击预览器内的组件预览图标
可以看到预览器对这两个组件分别进行了预览
单个原文件中最多可以使用十个
@Preview
注解装饰自定义组件。
完整动画图演示 :
5. 双向预览
接下来来了解一下双向预览。首先打开双向预览功能，我们可以看到代码编辑器、UI 界面和Component Tree，三者之间的
联动
。
例如当我们选中编辑器中的代码快时，UI 界面和组件数上的组件节点将会高亮显示。
当我们选中预览器 UI 界面中的组件时，编辑器中对应的代码块和组件数上的组件节点也会高亮显示。
同样，选中组件数上的组件节点时，对应的代码块和 UI 界面也会高亮显示。
还可以在组件的属性面板中修改组件的属性，修改后预览器会
自动同步到代码编辑器中修改原码
并
实时刷新 UI 界面
。
例如我们选中
跳转
按钮，可以看到按钮的各个属性。接着将按钮的背景颜色修改为
绿色
。
6. 多设备预览
了解了双向预览后，我们来学习一下如何进行多设备的预览。
因不同设备的屏幕分辨率、形状、大小等不同，我们需要在不同的设备上查看应用的 UI 布局和交互效果。
此时便可以使用多端设备预览器功能查看不同设备上的运行效果。
首先确认在
module.json5
文件中的
deviceTypes
字段中配置了多种设备，比如对于当前工程，配置了
phone
、
tablet
、
2in1
三种设备。
接下来，打开多设备预览的开关，就可以看到多个设备的预览效果，每个设备都是支持实时预览和动态预览的。
多设备预览开启后的预览界面 :
7. 课程总结
这节课，给大家介绍了预览器的使用，掌握预览器使用，主要也是为了后续提高开发效率。
首先，介绍了如何查看工程的预览效果，包括实时预览和动态预览。然后，介绍了如何使用
@Preview
注解实现在单个原文件中对单个组件或组件组合的预览。另外，还给大家介绍了如何开启双向预览，并在预览器中修改组件属性。最后，介绍了多设备的预览效果。
这节课就介绍到这里，谢谢各位观看！！！