鸿蒙_使用DevEco Studio预览器

我们的第一个鸿蒙应用项目创建好后,开发工具默认生成了一个Index.ets页面,其结构如下,其中Index为页面名称,其他都是固定用法,而且需要注意的是build内只能包含一个根组件,我们一般放布局组件如横向Row、竖向Column,还有自动生成的相对布局RelativeContainer等,在内部再放其他UI组件。

复制代码
@Entry //页面入口
@Component //组件
struct Index {
  build() {
    //页面内容
  }
}

那么我们对页面内代码进行的修改应该如何看到效果呢,DevEco Studio自带了一个预览器功能,在右侧找到小眼睛的图标,点一下即可打开预览器,正常页面(由@Entry修饰)或添加了@Preview修饰的组件,大部分可以支持预览。

下图就是预览器的工具栏,我们把鼠标放上去后可以看到相应的功能名称,大家可以随便点点看看会发生什么变化,慢慢熟悉预览器的操作即可。

需要注意的是,如果代码内有错误,需要修复错误后才可以正常预览,修复错误后如果预览器没有变化,可以点击重新加载,或点击两次小眼睛图标(关闭、重新打开)重新触发预览即可。

相关推荐
2501_9197490318 分钟前
华为鸿蒙桌面时钟与悬浮时钟APP—小羊时钟
华为·harmonyos
HwJack201 小时前
【共创稿事节】HarmonyOS 7空间交互综述:视线、头部、手势的协同
数码相机·交互·harmonyos
李游Leo2 小时前
HarmonyOS 7 ArkUI + Window Kit:折叠屏编辑页的键盘避让快照与焦点恢复时序【鸿蒙心迹】
华为·计算机外设·harmonyos
李游Leo3 小时前
HarmonyOS 7 HSP + Localization Kit:共享组件资源导出、语言回退与相对路径失效诊断【鸿蒙心迹】
harmonyos
m0_738185823 小时前
Flutter 鸿蒙化实战:flutter_nfc_kit 适配 OpenHarmony,NFC 读写一步到位
flutter·华为·harmonyos·鸿蒙
垆边人似月.3 小时前
华为机考题:字符个数统计
数据结构·算法·华为
李游Leo4 小时前
HarmonyOS 7 TaskPool + Node-API + zstd:Native 批量压缩任务的主线程隔离、进度回传与资源收口【鸿蒙心迹】
java·华为·harmonyos
李游Leo4 小时前
HarmonyOS ArkUI Navigation + GridRow:折叠态切换后的双栏路由恢复与返回栈收敛【鸿蒙心迹】
华为·harmonyos
HwJack204 小时前
【共创稿事节】HarmonyOS 7是3DGS 端侧重建:空间建模类应用的设计机会
3d·华为·harmonyos
传奇开心果编程4 小时前
【ArkUI进阶练中学】第5课:编译优化与包体积进
学习·ui·华为·harmonyos