0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

关于DevEco Studio的预览功能介绍

科技绿洲 来源:HarmonyOS开发者 作者:HarmonyOS开发者 2022-05-25 09:45 次阅读

应用的开发过程中,往往需要多次调试和修改,如果支持实时预览,边改边看效果,所看即所得,可大大提升开发效率。为满足这一需求,DevEco Studio作为HarmonyOSOpenHarmony应用及服务开发配套的集成开发环境(IDE),提供了强大的预览功能,让开发者能够预览应用/服务在不同终端设备上的UI显示效果,不仅支持边开发边预览,还支持在预览过程中进行界面交互。下面,就带大家一起来了解DevEco Studio的预览功能。

一、多端设备预览

HarmonyOS作为分布式操作系统,支持运行在不同的终端设备上。为方便开发者查看应用/服务在不同终端设备上的UI布局和交互效果,DevEco Studio提供多端设备预览功能。

DevEco Studio的预览器支持自定义预览设备Profile(包含分辨率和语言等)。点击预览器右上角的

按钮,可以看到所有已定义的预览设备Profile。通过点击切换不同的预览设备Profile,可以查看不同终端设备上的预览效果。此外,打开Multi-profile preview开关,还可以同时查看多个终端设备上的预览效果。

poYBAGKNig-AajCxAABhOeNyaSQ151.png

图1 多端设备预览

二、双向预览

为帮助开发者提升开发效率,DevEco Studio提供双向预览功能,支持代码编辑器、预览器UI界面和组件树(Component tree)三者之间的联动。

选中预览器UI界面中的组件,则组件树上对应的组件将被选中,同时代码编辑器中的布局文件中对应的代码块高亮显示。这样,通过预览器的UI界面即可快速地定位到相应代码,让代码修改更加便利。

选中布局文件中的代码块,则在UI界面会高亮显示,组件树上的组件节点也会呈现被选中的状态。这样,通过选中代码块就能精准地查看对应的界面组件的预览效果,让预览更加精准、高效。

选中组件树中的组件,则对应的代码块和UI界面也会高亮显示。此外,如果修改了组件树中某一组件的属性,代码编辑器中对应的代码也会同步修改。

pYYBAGKNihqADFYdAAEbm2ecgDg679.png

图2 双向预览

三、实时预览

为了让开发者可以在应用/服务开发时快速查看预览效果,DevEco Studio提供实时预览功能。开发者添加或删除UI组件、并且使用快捷键Ctrl+S进行保存后,预览器会立即刷新预览结果。

pYYBAGKNii2AMtiIAAD_mGRkl1Y122.png

图3 实时预览

四、动态预览

动态交互也是应用/服务开发过程中非常重要的一个环节。为此,DevEco Studio提供动态预览功能,支持开发者在预览器的UI界面中进行交互操作,比如点击、跳转、滑动交互等,操作体验与在真机设备上的交互体验一致。

poYBAGKNijiABd_aAADIhUDMGR4912.png

图4 动态预览

至此,DevEco Studio的预览功能就介绍完了。需要注意的是,在使用DevEco Studio的预览器前,需确保Settings 》 SDK Manager 》 HarmonyOS Legacy SDK 》 Tools中已安装Previewer资源,同时建议Settings 》 SDK Manager 》 HarmonyOS Legacy SDK 》 Platforms中的JS SDK更新到最新版本。

审核编辑:彭静
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 操作系统
    +关注

    关注

    37

    文章

    6814

    浏览量

    123308
  • 代码
    +关注

    关注

    30

    文章

    4782

    浏览量

    68546
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30155
收藏 人收藏

    评论

    相关推荐

    微软预览版Copilot Vision AI功能上线

    微软公司近日宣布,将面向美国地区的Copilot Pro用户推出预览版的Copilot Vision AI功能。这一创新功能旨在通过人工智能技术,进一步提升用户的网页浏览体验。 Copilot
    的头像 发表于 12-09 14:38 261次阅读

    戈帅的《HarmonyOS从入门到精通40例》DevEco Studio升级说明

    《HarmonyOS从入门到精通40例》DevEco Studio升级说明如附件*附件:《HarmonyOS从入门到精通40例》DevEco Studio升级说明.docx
    发表于 12-03 15:45

    DevEco Studio应用与服务体检工具介绍

    应用检测工具是开发者快速提升鸿蒙应用产品质量不可或缺的。因此,我们要向您推荐DevEco Studio应用与服务体检工具(AppAnalyzer)。当前已支持包括各种类型测试以及最佳实践测试,对于
    的头像 发表于 11-05 11:39 370次阅读
    <b class='flag-5'>DevEco</b> <b class='flag-5'>Studio</b>应用与服务体检工具<b class='flag-5'>介绍</b>

    DevEco Studio Code Linter的使用指南

    在当今对代码质量和规范性要求日益严格的环境中,开发者亟需强大的代码检查工具来应对挑战。DevEco Studio Code Linter正是这样一款工具,它通过提升代码质量、统一代码风格,并有效检测安全漏洞和潜在bug,为开发者提供了显著的优势,成为现代软件开发中不可或缺
    的头像 发表于 11-05 09:52 215次阅读

    鸿蒙开发:创建PageAbility

    通过DevEco Studio开发平台创建PageAbility时,DevEco Studio会在app.js/app.ets中默认生成onCreate()和onDestroy()方法
    的头像 发表于 06-18 09:36 251次阅读
    鸿蒙开发:创建PageAbility

    鸿蒙OS开发:【一次开发,多端部署】(工程管理)

    DevEco Studio的基本使用,请参考[DevEco Studio使用指南]。本章主要介绍如何使用
    的头像 发表于 05-16 16:07 1234次阅读
    鸿蒙OS开发:【一次开发,多端部署】(工程管理)

    Windows 11 Build 26200预览版AI Explorer功能有何革新?

    据Albacore消息来源透露,Windows 11 Build 26200预览版本包含了新功能——AI Explorer,其中包括屏幕捕捉、侧边栏岛屿、肩膀轻触、屏幕识别、意图引擎及探索覆盖层等功能
    的头像 发表于 04-23 10:43 708次阅读

    HarmonyOS开发学习:【DevEco Device Tool 安装配置(问题全解)】

    介绍如何在Windows主机上安装DevEco Device Tool工具。
    的头像 发表于 04-14 11:30 988次阅读
    HarmonyOS开发学习:【<b class='flag-5'>DevEco</b> Device Tool 安装配置(问题全解)】

    在e² studio中安装QE的流程介绍

    在e² studio中安装QE的流程介绍
    的头像 发表于 04-04 08:05 530次阅读
    在e² <b class='flag-5'>studio</b>中安装QE的流程<b class='flag-5'>介绍</b>

    DevEco Studio 环境下:模拟手机启动不成功

    DevEco Studio 环境下:模拟手机启动不成功, 可以听到模拟手机启动的声音,但启动界面一直是黑色,不能跳转至启动成功后的彩色界面。pc环境是Windows 10 ,8G内存
    发表于 03-27 16:25

    鸿蒙OS应用开发:【DevEco Studio3.0 和 3.1版本差异】

    DevEco Studio支持包括手机、平板、车机、智慧屏、智能穿戴、轻量级智能穿戴和智慧视觉设备的HarmonyOS应用/服务开发,预置了工程模板,可以根据工程向导轻松创建适应于各类设备的工程,并
    的头像 发表于 03-26 17:21 1140次阅读
    鸿蒙OS应用开发:【<b class='flag-5'>DevEco</b> <b class='flag-5'>Studio</b>3.0 和 3.1版本差异】

    鸿蒙DevEco Service开发准备与使用

    Serverless能力的调用。通过与元服务生态、HMS Core、AGC Serverless平台、DevEco Studio、开发者联盟生态市场等产品的深度打通,助力元服务快速开发与降本增效
    发表于 02-23 15:40

    DevEco Studio 4.1带来多种调试能力,助力鸿蒙原生应用开发高效调试

    目前,HarmonyOS NEXT星河预览版已经正式面向开发者开放申请,面向鸿蒙原生应用及元服务开发者提供的集成开发环境——DevEco Studio也迎来功能更细化的4.1版本。3年
    的头像 发表于 02-04 15:35 741次阅读

    鸿蒙OS 下载与安装软件

    运行环境要求 当前 DevEco Studio 只支持 Windows 版本,为保证 DevEco Studio 正常运行,建议您的电脑配置满足如下要求: 操作系统:Windows10
    的头像 发表于 01-25 18:38 5040次阅读
    鸿蒙OS 下载与安装软件

    鸿蒙开发-DevEco Studio Profiler工具进行帧率分析

    Frame Profiler概述 DevEco Studio内置Profiler分析调优工具,其中Frame分析调优功能,用于录制GPU数据信息,录制完成展开之后的子泳道对应录制过程中各个进程的帧数
    发表于 01-16 19:34