DevEco Studio界面预览

        DevEco Studio提供了及时预览、动态预览、组件预览、双向预览和多装备预览的功能，下面，简单的介绍一下，各功能的使用。
1、及时预览

        在开辟界面过程中，如果添加或删除了UI组件，您只需Ctrl+S举行生存，然后预览器就会立即刷新预览结果。如果修改了组件的属性，则预览器会及时（亚秒级）刷新预览结果，到达极速预览的效果（当前版本极速预览仅支持ArkTS组件）。 
        及时预览默认开启，如果不需要及时预览，请单击预览器右上角按钮，关闭及时预览功能。
        

2、动态预览

        在预览器界面，可以在预览器中操作应用/服务的界面交互动作，如单击、跳转、滑动等，与应用/服务运行在真机装备上的界面交互体验同等。 
3、组件预览

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

 

1. @Entry
2. @Preview
3. @Component
4. struct TitlePreview {
5.   build() {
6.     Button() {
7.       Text('组件预览')
8.         .fontSize(30)
9.         .fontColor('#FFFFFF')
10.         .fontWeight(FontWeight.Bold)
11.     }
12.     .type(ButtonType.Capsule)
13.     .margin({
14.       top: 20
15.     })
16.     .backgroundColor('#0D9FFB')
17.     .width('40%')
18.     .height('5%')   //在该片段中声明将要预览的组件Title，以及该组件依赖的入参 {context: 'MyTitle'}
19.   }
20. }

复制代码

        

 
4、双向预览

        DevEco Studio提供HarmonyOS应用/服务的UI预览界面与源码文件间的双向预览功能，支持ets文件与预览器界面的双向预览。使用双向预览功能时，需要在预览器界面单击图标

打开双向预览功能。 开启双向预览功能后，支持编辑器、UI界面和Component Tree组件树三者之间的联动。
        

        在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会主动同步到编辑器中修改源码，并及时的刷新UI界面；同样的，如果在编辑器中修改源码，也会及时刷新UI界面，并更新组件树信息及组件属性。 
5、多装备预览

        DevEco Studio支持HarmonyOS分布式应用/服务开辟，同一个应用/服务可以运行在多个装备上。在HarmonyOS分布式应用/服务的开辟阶段，因不同装备的屏幕分辨率、外形、巨细等不同，开辟者需要在不同的装备上检察应用/服务的UI布局和交互效果，此时便可以使用多端装备预览器功能，方便开辟者在应用/服务开辟过程中，随时检察不同装备上的界面显示效果。
        

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。