鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
yuqifang1 小时前
vue3+typescript+vite封装自己的UI组件库并上传至npm
vue.js·arkui
chenbin___3 小时前
鸿蒙(HarmonyOS)支持 useNativeDriver的详细说明(转自千问)
前端·javascript·react native·react.js·harmonyos
Georgewu5 小时前
【鸿蒙基础入门】概念理解和学习方法论说明
harmonyos
Georgewu5 小时前
【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解
harmonyos
木斯佳5 小时前
HarmonyOS 6实战:从视频编解码到渲染过程,一文了解鸿蒙音视频数据流向
harmonyos
一条咸鱼¥¥¥6 小时前
【运维笔记】华为防火墙远程接入用户开通与禁用方法
运维·网络·华为·远程用户
云_杰6 小时前
手把手教你玩转HDS沉浸光感效果
华为·harmonyos·ui kit
HwJack207 小时前
HarmonyOS 开发终结“盲盒式”调试:用 hiAppEvent 的 Watcher 接口拿捏应用行为监控
华为·harmonyos
互联网散修7 小时前
鸿蒙实战:用 want.param 实现视频播放器跨端迁移续播
华为·音视频·harmonyos·跨端迁移续播