鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
贾伟康29 分钟前
【化学实验室|20】HarmonyOS ArkTS AppGallery 发布复查实战:核对包名、版本、设备、素材和离线声明
软件测试·移动开发·harmonyos·arkts·arkui
Flutter_OH29 分钟前
Flutter OH 应用构建与运行指导
harmonyos
Flutter_OH30 分钟前
Flutter OHOS Flutter Engine 异步创建与销毁说明文档
harmonyos
特立独行的猫A4 小时前
仓颉语言cj-tauri 框架开发鸿蒙应用指南:从建工程到鸿蒙PC实战
harmonyos
贾伟康4 小时前
【化学实验室|19】HarmonyOS ArkTS 回归测试实战:覆盖启动、空数据、异常输入和重复点击
软件测试·移动开发·harmonyos·arkts·arkui
熊猫钓鱼>_>5 小时前
精准碰一碰近场分享与拖拽投送实战:把文件“碰“进另一台设备【鸿蒙心迹】
开发语言·华为·harmonyos·鸿蒙·openharmony
三掌柜6666 小时前
06|鸿蒙7·端侧AI实战:提示注入,守住指令边界
人工智能·华为·harmonyos
HarmonyOS_SDK9 小时前
【HarmonyOS SDK Skills】快速适配鸿蒙窗口智感旋转能力
harmonyos
马剑威(威哥爱编程)10 小时前
【HarmonyOS 7 小艺智能体实战】02:动工前的清单——账号、资质、工具链一次备齐
人工智能·华为·harmonyos