鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
OH_TPC18 小时前
【鸿蒙优选三方库】@react-native-ohos/react-native-screens:原生屏幕导航管理
华为·harmonyos·鸿蒙
昇腾知识体系21 小时前
Ascend950 Matmul 新范式:UB 输入(VECOUT/TSCM)、CV 直通通路与输出 LocalTensor
人工智能·华为·知识图谱
FrameNotWork1 天前
HarmonyOS应用《左右相册》 智感握姿实战:让操作按钮自动“站“到你拇指够得到的地方
华为·harmonyos
hacker7071 天前
DBeaver 鸿蒙 PC 适配全记录:在 HarmonyOS 桌面端原生重建一个通用数据库工具
数据库·华为·harmonyos
昇腾知识体系1 天前
昇腾 Atlas 800I A5 服务器:机型定位与部署入口
服务器·人工智能·华为·架构·知识图谱
hacker7071 天前
DBeaver Community 鸿蒙 PC 适配全记录:在 HarmonyOS PC 上运行原生数据库管理工具
数据库·华为·harmonyos
HwJack201 天前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
小雨青年1 天前
【HarmonyOS 7 平行视界深度实战】06 页面路由、返回栈与多层跳转怎么处理
华为·harmonyos