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

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

3天内不再提示

了解DevEco Studio的预览功能

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

一、多端设备预览

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

DevEco Studio的预览器支持自定义预览设备Profile(包含分辨率和语言等)。点击预览器右上角的520b4a14-dd55-11ec-ba43-dac502259ad0.png按钮,可以看到所有已定义的预览设备Profile。通过点击切换不同的预览设备Profile,可以查看不同终端设备上的预览效果。此外,打开Multi-profile preview开关,还可以同时查看多个终端设备上的预览效果。

5244e896-dd55-11ec-ba43-dac502259ad0.gif

图1 多端设备预览

二、双向预览

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

  • 选中预览器UI界面中的组件,则组件树上对应的组件将被选中,同时代码编辑器中的布局文件中对应的代码块高亮显示。这样,通过预览器的UI界面即可快速地定位到相应代码,让代码修改更加便利。
  • 选中布局文件中的代码块,则在UI界面会高亮显示,组件树上的组件节点也会呈现被选中的状态。这样,通过选中代码块就能精准地查看对应的界面组件的预览效果,让预览更加精准、高效。
  • 选中组件树中的组件,则对应的代码块和UI界面也会高亮显示。此外,如果修改了组件树中某一组件的属性,代码编辑器中对应的代码也会同步修改。

52a5b25c-dd55-11ec-ba43-dac502259ad0.gif

图2 双向预览

三、实时预览

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

52dafe58-dd55-11ec-ba43-dac502259ad0.gif

图3 实时预览

四、动态预览

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

531551c0-dd55-11ec-ba43-dac502259ad0.gif

图4 动态预览

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

审核编辑 :李倩


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

    关注

    37

    文章

    6818

    浏览量

    123319
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30166

原文标题:DevEco Studio强大的预览功能让开发效率大大提升!

文章出处:【微信号:HarmonyOS_Community,微信公众号:电子发烧友开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

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

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

    戈帅的《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 373次阅读
    <b class='flag-5'>DevEco</b> <b class='flag-5'>Studio</b>应用与服务体检工具介绍

    DevEco Studio Code Linter的使用指南

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

    了解Davinci预览引擎

    电子发烧友网站提供《了解Davinci预览引擎.pdf》资料免费下载
    发表于 10-15 09:56 0次下载
    <b class='flag-5'>了解</b>Davinci<b class='flag-5'>预览</b>引擎

    鸿蒙开发:创建PageAbility

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

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

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

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

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

    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 1141次阅读
    鸿蒙OS应用开发:【<b class='flag-5'>DevEco</b> <b class='flag-5'>Studio</b>3.0 和 3.1版本差异】

    安卓转鸿蒙竟如此丝滑

    你看这个**DevEco-Studio和Android Studio什么关系,就是双胞胎**。同样基于Intellj IDEA开发。
    的头像 发表于 03-25 22:27 343次阅读
    安卓转鸿蒙竟如此丝滑

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

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

    Simplicity Studio 5扩增功能支持以VS Code开发

    应用程序开发的支持。此一功能扩展可让开发人员在VSCode生态系统中构建、刷新和调试。用户可以使用VS Code作为主要的IDE,同时仍然能够使用熟悉和喜爱的项目配置图形界面。在Simplicity Studio中配置、设置和生成项目,来自Visual
    的头像 发表于 01-29 10:34 969次阅读
    Simplicity <b class='flag-5'>Studio</b> 5扩增<b class='flag-5'>功能</b>支持以VS Code开发

    鸿蒙OS 下载与安装软件

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

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

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