鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
心中有国也有家26 分钟前
AtomGit Flutter 鸿蒙客户端:初始化流水线
学习·flutter·华为·harmonyos
在书中成长28 分钟前
HarmonyOS 小游戏《对战五子棋》开发第30篇 - TwoPlayerPage双人对战(二):状态栏与玩家指示器
harmonyos
爱吃大芒果1 小时前
ArkUI V2 状态管理极简教程,手写待办清单 Demo
华为·harmonyos
水龙吟啸1 小时前
华为2026.6.17机考选择题+编程题【速刷敲黑板】
人工智能·深度学习·算法·华为
ujainu小2 小时前
帧率协议栈:13变量揭秘60Hz性能分析
华为·harmonyos
花开彼岸天~9 小时前
15 Button 组件与交互反馈设计:按压动画与呼吸脉冲
华为·交互·harmonyos·鸿蒙系统
ZZZMMM.zip15 小时前
基于鸿蒙HarmonyOS NEXT开发AI英语口语应用:智能口语练习新体验与鸿蒙Flutter框架跨端实
人工智能·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
心中有国也有家16 小时前
AtomGit Flutter 鸿蒙客户端:白噪音场景的视觉设计
学习·flutter·华为·harmonyos
最爱老式锅包肉16 小时前
《HarmonyOS技术精讲-ArkGraphics 2D(方舟2D图形服务)》第九篇:数据可视化——柱状图与饼图的绘制实战
华为·信息可视化·harmonyos
心中有国也有家16 小时前
AtomGit Flutter 鸿蒙客户端:呼吸练习的完整生命周期
学习·flutter·华为·harmonyos