diff --git a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md index be376f15d87030b456d52b4ecc60ce37ba96def3..9bc7dff91de54df9f66168e8bf0129784b0f01e3 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md +++ b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md @@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见[Column](../reference/arkui-ts/ts-container-column.md)。 -1. **删除画布原有模板组件。** +1. 删除画布原有模板组件。 打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示: ![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif) -2. **添加容器,设置Column容器的样式和属性。** +2. 添加容器,设置Column容器的样式和属性。 选中UI Control中的Column组件,将其拖至画布。点击右侧属性样式栏中的图标![zh-cn_image_0000001233048996](figures/zh-cn_image_0000001233048996.png)(General),设置Column组件的高度Height为100%,使其占满屏幕;点击右侧属性样式栏中的图标![zh-cn_image_0000001233368860](figures/zh-cn_image_0000001233368860.png)(Feature),设置Column组件的AlignItems样式为center,使得其子组件在水平轴上居中显示。操作如下所示: ![zh-cn_image_0000001277488977](figures/zh-cn_image_0000001277488977.gif) -3. **添加文本。** +3. 添加文本。 选中UI Control中的Text组件,将其拖至画布,再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277608813](figures/zh-cn_image_0000001277608813.png)(Feature),设置Text组件的Content属性为“this.message”(即“Hello World”);设置组件的FontSize样式为30fp,使得其文字放大;设置组件的TextAlign样式为center,使得组件文字居中显示。再选中画布上的Text组件,拖动放大。操作如下所示: ![zh-cn_image_0000001235731706](figures/zh-cn_image_0000001233528156.gif) -4. **添加按钮。** +4. 添加按钮。 选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001277728577](figures/zh-cn_image_0000001277728577.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277809337](figures/zh-cn_image_0000001277809337.png)(Feature),设置Button组件的Label属性为“Next”;设置Button组件的FontSize样式为25fp,使得其文字放大。操作如下所示: ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) -5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: +5. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示: ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) ## 构建第二个页面 -1. **创建第二个页面。** +1. 创建第二个页面。 在“**Project**”窗口,打开“**entry > src > main > ets > MainAbility**”,右键点击“**pages**”文件夹,选择“**New > Visual**”,命名为“**second**”,单击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下: ![zh-cn_image_0000001233368868](figures/zh-cn_image_0000001233368868.png) -2. **[删除画布原有模板组件。](#delete_origin_content)** +2. [删除画布原有模板组件。](#delete_origin_content) -3. **[添加容器,设置Column容器的样式和属性。](#add_container)** +3. [添加容器,设置Column容器的样式和属性。](#add_container) -4. **添加文本。** +4. 添加文本。 - 在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下: @@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif) -5. **添加按钮。** +5. 添加按钮。 选中UI Control中的Button组件,将其拖至画布,再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)(General),设置Button组件的Height为40vp;点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)(Feature),设置Button组件的Value属性为“Back”;设置组件的FontSize样式为25fp,使得其文字放大。操作如下所示: ![zh-cn_image_0000001280383937](figures/zh-cn_image_0000001277809361.gif) @@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。 -1. **第一个页面跳转到第二个页面。** +1. 第一个页面跳转到第二个页面。 在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。 - “**index.ets**”示例如下: @@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png) -2. **第二个页面返回到第一个页面。** +2. 第二个页面返回到第一个页面。 在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。 - “**second.ets**”示例如下: @@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png) -3. **打开index.visual或index.ets文件,点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示: +3. 打开index.visual或index.ets文件,点击预览器中的 ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) 按钮进行刷新。效果如下图所示: ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png)