悠扬随风 发表于 2024-9-27 09:34:15

DevEco Studio界面预览

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

        在开辟界面过程中,如果添加或删除了UI组件,您只需Ctrl+S举行生存,然后预览器就会立即刷新预览结果。如果修改了组件的属性,则预览器会及时(亚秒级)刷新预览结果,到达极速预览的效果(当前版本极速预览仅支持ArkTS组件)。 
        及时预览默认开启,如果不需要及时预览,请单击预览器右上角按钮,关闭及时预览功能。
        https://i-blog.csdnimg.cn/direct/8302c8b93adb499781cd898ef996037a.png
2、动态预览

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

        组件预览支持及时预览,不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现,在单个源文件中,最多可以使用10个@Preview装饰自定义组件。
        组件预览按钮:https://i-blog.csdnimg.cn/direct/32691dd11742472f8642124bd0790114.png 
@Entry
@Preview
@Component
struct TitlePreview {
build() {
    Button() {
      Text('组件预览')
      .fontSize(30)
      .fontColor('#FFFFFF')
      .fontWeight(FontWeight.Bold)
    }
    .type(ButtonType.Capsule)
    .margin({
      top: 20
    })
    .backgroundColor('#0D9FFB')
    .width('40%')
    .height('5%')   //在该片段中声明将要预览的组件Title,以及该组件依赖的入参 {context: 'MyTitle'}
}
}         https://i-blog.csdnimg.cn/direct/b9c34653cc1445bbb2e1c2aced46c4e5.png 
4、双向预览

        DevEco Studio提供HarmonyOS应用/服务的UI预览界面与源码文件间的双向预览功能,支持ets文件与预览器界面的双向预览。使用双向预览功能时,需要在预览器界面单击图标https://i-blog.csdnimg.cn/direct/babee2af4625434196f8f01856ca0e8b.png打开双向预览功能。 开启双向预览功能后,支持编辑器、UI界面和Component Tree组件树三者之间的联动。
        https://i-blog.csdnimg.cn/direct/818bcdf3543643adb5a19f2fa36c0c66.pnghttps://i-blog.csdnimg.cn/direct/cac88bd1b79c4b98b86ba516bcb0e1dd.pnghttps://i-blog.csdnimg.cn/direct/136f3f3993c74c30bc0a847862be23d2.png
        在预览界面还可以通过组件的属性面板修改可修改的属性或样式,在预览界面修改后,预览器会主动同步到编辑器中修改源码,并及时的刷新UI界面;同样的,如果在编辑器中修改源码,也会及时刷新UI界面,并更新组件树信息及组件属性。 
5、多装备预览

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: DevEco Studio界面预览