鸿蒙_使用DevEco Studio预览器

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

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

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

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

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