目录

UI Preview

DevEco Studio provides the UI preview function, which allows you to view the UI effect and adjust the page layout at any time. You can preview both pages and components. The icon on the left in Figure 1 indicates page preview, while the icon on the right indicates component preview.

Due to differences between the operating system and real devices, the preview effect may vary from the actual device performance. The preview is for reference only. Verify the actual performance on real devices.

Figure 1 Preview icons

Page Preview

Both ArkTS applications and atomic services support page preview. Page preview is achieved by adding the @Entry decorator to the custom component in the project's .ets file, allowing you to view the current UI page effect.

In addition to basic page preview, the following enhanced features are available:

[h2]Instant Preview

When modifying component attributes, you can view changes immediately without pressing Ctrl+S. Instant preview is enabled by default. To disable it, click in the Previewer's upper right corner.

Instant preview is not supported in the following scenarios:

  • Components that are not displayed
  • Adding or deleting components
  • Components containing private variables or untyped controllers
  • Components using the decorators such as @Builder, @Style, and @Extend.
  • Components importing external components or modules via import
  • Modifying state variables

Figure 2 shows the demonstration.

Figure 2 Instant preview demonstration

[h2]Inspector Two-way Preview

Bidirectional synchronization between the .ets file and Previewer is supported. Click the Previewer icon to enable this feature.

When this feature is enabled, the code editor, UI preview, and component tree become interconnected:

  1. Selecting a component in the Previewer highlights the corresponding component in the component tree and the relevant code block in the editor.

  2. Selecting a code block in the editor highlights the corresponding component in both the Previewer and component tree.

  3. Selecting a component in the component tree highlights the corresponding code block and Previewer component.

  4. In the Previewer, you can modify editable properties or styles via the component's property panel. Changes made in the preview are automatically synced to the code editor and immediately refresh the previewer. Similarly, source code modifications in the editor also trigger an instant preview update, along with updated component tree information and property details.

Figure 3 shows the demonstration.

Figure 3 Inspector two-way preview demonstration

Component Preview

ArkTS apps/atomic services support the component preview feature. Component preview is implemented by adding the @Preview decorator before a custom component. In a single source file, you can use up to 10 @Preview decorators to decorate custom components. Launch method:

During component preview, the default attributes of the @Preview decorator are used. For details, see PreviewParams. You can configure @Preview parameters to specify device attributes, including device type and screen shape.

Example of using the @Preview decorator:

@Entry
@Preview
@Component
struct ComponentPreviewOne {
  build() {
    Column() {
      Text('this is component previewer One')
        .height(80)
        .fontSize(30)
      // Replace $r('app.media.startIcon') with the image resource file you use.
      Image($r('app.media.startIcon'))
        .height(300)
        .width(300)
    }
  }
}

@Preview
@Component
struct ComponentPreviewTwo {
  build() {
    Column() {
      Text('this is component previewer Two')
        .height(80)
        .fontSize(30)
        .fontColor(Color.Pink)
      // Replace $r('app.media.startIcon') with the image resource file you use.
      Image($r('app.media.startIcon'))
        .height(300)
        .width(300)
    }
  }
}

Figure 4 shows the demonstration.

Figure 4 Component preview effect

Dynamic Resolution Adjustment

Applications and atomic services can run on various devices with different screen resolutions, shapes, and sizes. The Previewer supports dynamic resolution changes, allowing you to check UI layouts and interactions across different devices. To use this feature: After starting page preview, click in the upper right corner and drag the selection box to adjust the screen size dynamically.

Figure 5 shows the demonstration.

Figure 5 Dynamic resolution adjustment effect