鸿蒙_使用DevEco Studio预览器

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

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

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

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

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

相关推荐
xyccstudio18 小时前
将 libsmb2 集成到 HarmonyOS ArkTS 项目
harmonyos
HwJack201 天前
HarmonyOS 6APP开发之摸透ArkUI FrameNode
华为·harmonyos
丁常彦-自媒体-常言道1 天前
AI驱动医改走深走实,华为持续打造医疗通用AI新引擎
人工智能·华为
炜宏资料库1 天前
组织效能提升模型项目沟通 (含华为举例)
华为·职场发展
广然1 天前
eNSP Pro 实战:华为交换机堆叠,两台变一台
服务器·网络·华为
求学中--1 天前
状态管理一文通:@State、@Prop、@Link、@Provide/Consume全解析
人工智能·小程序·uni-app·wpf·harmonyos
求学中--1 天前
ArkUI组件库完全指南:从基础组件到自定义装饰器
低代码·华为·小程序·uni-app·harmonyos
●VON1 天前
鸿蒙原生APP开发实战指南:三套低成本AI辅助方案全解析
人工智能·华为·chatgpt·大模型·harmonyos·image
枫叶丹41 天前
【HarmonyOS 6.0】Data Augmentation Kit 智慧化数据检索 C 接口解析:向量化、知识检索与知识问答
c语言·开发语言·华为·harmonyos
慢慢向上的蜗牛1 天前
Atlas300I推理卡驱动适配Linux 6.12+内核
linux·c++·人工智能·华为·驱动·底层开发·ascend