鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
YM52e10 小时前
鸿蒙ArkTS实战项目 - 门店陈列巡检台:巡检卡片与多列切换实现
学习·华为·harmonyos
lilian23311 小时前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
HwJack2017 小时前
UIAbility 生命周期全链路:从冷启动到热启动的实战笔记
笔记·华为·harmonyos
梦想不只是梦与想17 小时前
鸿蒙 AppGallery Connect:应用创建(二)
harmonyos·appgallery·创建应用
●VON19 小时前
芯笺 Markdown:面向 HarmonyOS PC 的本地优先 Markdown 编辑器
华为·编辑器·harmonyos·鸿蒙
世人万千丶19 小时前
鸿蒙项目实战 - 社区活动编排板:标签云布局算法与自动换行
学习·算法·华为·harmonyos·鸿蒙
YM52e21 小时前
鸿蒙ArkTS项目实战 - 门店陈列巡检台:完整代码与运行效果
学习·华为·harmonyos
贾伟康21 小时前
【中国方言题库|06】HarmonyOS ArkTS 闽南语与客家话实战:统一分库页面导航与空状态
harmonyos·arkts·arkui·router·空状态
贾伟康1 天前
【中国方言题库|07】HarmonyOS ArkTS 方言练习实战:推进题目、提交答案并同步统计
harmonyos·arkts·数据持久化·状态管理·arkui
深念Y1 天前
RIO-UL00(EMUI 4.1 / Android 6.0.1 / arm64)开机自启动 sshd
android·linux·华为·安卓·chroot·sshd·emui