《第二章、DevEco Studio的使用》04 - 预览器使用介绍

1. 前言

如果您想观看完整的系列教程，不妨移步到我的《HarmonyOS Next 应用开发教程》专栏中，进行仔细查阅 : https://blog.csdn.net/qq_35163541/category_12723932.html

前面，我们已经学习了如何创建工程，并对工程有了一个基本了解。同时还学习了关于代码编辑的一些相关技巧和功能，帮助我们在使用 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注解实现在单个原文件中对单个组件或组件组合的预览。另外，还给大家介绍了如何开启双向预览，并在预览器中修改组件属性。最后，介绍了多设备的预览效果。

这节课就介绍到这里，谢谢各位观看！！！