鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
Junerver3 天前
把 DevEco Code 的 HarmonyOS 开发能力装进口袋——harmonyos-dev-skill
harmonyos
程序猿追3 天前
那个右下角的小数字怎么“卡”住我打字——我用 HarmonyOS 自己写了一个字数限制输入框
pytorch·华为·harmonyos
古德new3 天前
鸿蒙PC使用electron迁移:Joplin Electron 桌面适配全记录
华为·electron·harmonyos
世人万千丶3 天前
桌面便签小应用 - HarmonyOS ArkUI 开发实战-TextArea与Flex布局-PC版本
华为·harmonyos·鸿蒙·鸿蒙系统
慧海灵舟3 天前
AGenUI 鸿蒙端实战踩坑录:从 Column 布局消失到异步组件宽度为 0
华为·harmonyos
yuegu7773 天前
HarmonyOS应用<节气通>开发第33篇:状态管理实战
华为·harmonyos
YM52e3 天前
买菜计算器小应用 - HarmonyOS ArkUI 开发实战-PC版本
学习·华为·harmonyos·鸿蒙·鸿蒙系统
阿捏利3 天前
系列总览-鸿蒙科普系列完全指南
华为·harmonyos
小雨下雨的雨3 天前
HarmonyOS ArkUI训练营入门-组件掌握系列-Animation 动画效果实现-PC版本
学习·华为·harmonyos·鸿蒙
yuegu7773 天前
HarmonyOS应用<节气通>开发第32篇:ArkTS语法快速入门——从TypeScript到声明式UI的完整指南
harmonyos