查看ArkUI预览效果
===========

ArkUI预览支持页面预览、组件预览、多断点预览和卡片预览，下图中左侧图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/07/v3/qWcvlkQ1SaOLgZjUIg7Xpw/zh-cn_image_0000002594634888.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=CE844BA1EC424F8F3F4AC5FB2EBB2E8ED116EECB31AAD014FBC454CDBA27666E)为页面预览，中间图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f0/v3/rybQ2XmdTIOQhyu3bikWMQ/zh-cn_image_0000002594474966.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=86E2CAD615B4B4719A009F6B207225AE1AFBAAA6C1B9E5593C66D00FFE6B253C)为组件预览，右侧图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2e/v3/8VWBrj9WT0OAPYolQdq-EQ/zh-cn_image_0000002594634886.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=5103704FD67394AE6E97978A2362FAC704A64FB1D9334111DA10572F8B57D4A4)为多断点预览，卡片预览在创建卡片文件后可直接预览。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/af/v3/6HADr0AORUOMGKXwv0qoEw/zh-cn_image_0000002594474964.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=5107C24849D4050955E88866FC41DABBF8B1EF6C4D4A6BA9ED0C1CEDCF110706)

#### 页面预览

ArkTS应用/元服务支持页面预览。页面预览通过在工程的ets文件头部添加@Entry实现。

@Entry的使用参考如下示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

#### 组件预览

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

@Preview的使用参考如下示例：

@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

以上示例的组件预览效果如下图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9e/v3/xFnq2PLQRVuFlpu6l0E06w/zh-cn_image_0000002594634894.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=08879B4B563D7C05C18D05782EDE4301AC830D9125DF26AD45CA3418D3236AAB "点击放大")

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

@Preview({
  title: 'Component1',  //预览组件的名称
  deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080,  //预览设备的宽度，单位：px
  height: 2340,  //预览设备的长度，单位：px
  colorMode: 'light',  //显示的亮暗模式，当前支持取值为light
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh\_CN',  //预览设备的语言，如zh\_CN、en\_US等
  orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: false  //设备的屏幕形状是否为圆形
})

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

@Component
struct Title {
  @Prop context: string; 
  build() {
    Text(this.context)
  }
}

建议按如下方式预览：

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

#### 多断点预览

从26.0.0 Beta1版本开始，ArkTS应用/元服务支持多断点预览，可以同时展示8个典型档位[断点](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout#section1532120147301)的预览画面。在多断点预览模式下，不支持实时预览和极速预览；如果图片太大或图片太多，预览时可能无法显示。

多断点预览通过在工程的ets文件头部添加@Entry实现，示例如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

以上示例的多断点预览效果如下图所示，会展示8个典型档位断点下的预览效果：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/83/v3/DBaXmI95T-CFxaRKOI7vxw/zh-cn_image_0000002594474968.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=1C021B11E296DB834FEFD99BB739B611104675E82DB40A35FC381E318E05BA06 "点击放大")

每个断点预览画面上均可点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/84/v3/IamRSSMuQRKqFTjkEaLjrA/zh-cn_image_0000002624994331.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=1DB6C134E37AF01DF3FEAB9669D9EE027167181E931E7F1CAEC9998EF3FB4203)查看该断点档位下的组件树。

支持代码编辑器、UI界面和组件树三者之间的联动：

*   选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
*   选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
*   选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。
*   不支持修改属性面板上的组件属性。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d4/v3/1f6R3r_1R1Gnr1U3jtMShg/zh-cn_image_0000002594634896.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=207DDCB1C1A014E6AF74410D721B109469BD0049D643D57D0C32187F5EFE63C5 "点击放大")

#### 卡片预览

创建卡片并选中卡片文件后，点击右侧边栏**Previewer**按钮即可预览卡片。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3b/v3/doFaox5-SgyH3LuXIHbhwg/zh-cn_image_0000002594634890.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=D48D74958CC91C62BA777C1729CC44A509D9CDEB10F04A70BCADF83FFD9042BA "点击放大")