Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
6aa31006
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
6aa31006
编写于
5月 16, 2022
作者:
葛
葛亚芳
提交者:
Gitee
5月 16, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/quick-start/start-with-ets-low-code.md.
Signed-off-by:
N
@ge-yafang
<
geyafang@huawei.com
>
上级
f7885b73
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
13 addition
and
13 deletion
+13
-13
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
+13
-13
未找到文件。
zh-cn/application-dev/quick-start/start-with-ets-low-code.md
浏览文件 @
6aa31006
...
@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -50,43 +50,43 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见
[
Column
](
../reference/arkui-ts/ts-container-column.md
)
。
第一个页面内有一个容器、文本和一个按钮,通过Column、Text和Button组件来实现。其中,Column为沿垂直方向布局的容器组件,具体使用请见
[
Column
](
../reference/arkui-ts/ts-container-column.md
)
。
1.
**删除画布原有模板组件。**
<a
name=
"delete_origin_content"
></a>
1.
删除画布原有模板组件。
<a
name=
"delete_origin_content"
></a>
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
打开index.visual文件,选中画布中的组件,单击鼠标右键,选择Delete删除画布原有模板组件。操作如下所示:
!
[
zh-cn_image_0000001233208980
](
figures/zh-cn_image_0000001233208980.gif
)
!
[
zh-cn_image_0000001233208980
](
figures/zh-cn_image_0000001233208980.gif
)
2.
**添加容器,设置Column容器的样式和属性。**
<a
name=
"add_container"
></a>
2.
添加容器,设置Column容器的样式和属性。
<a
name=
"add_container"
></a>
选中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,使得其子组件在水平轴上居中显示。操作如下所示:
选中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
)
!
[
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组件,拖动放大。操作如下所示:
选中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
)
!
[
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,使得其文字放大。操作如下所示:
选中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
)
!
[
zh-cn_image_0000001235732402
](
figures/zh-cn_image_0000001233208988.gif
)
5.
**在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。**
第一个页面效果如下图所示:
5.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
第一个页面效果如下图所示:
!
[
zh-cn_image_0000001235892798
](
figures/zh-cn_image_0000001233049004.png
)
!
[
zh-cn_image_0000001235892798
](
figures/zh-cn_image_0000001233049004.png
)
## 构建第二个页面
## 构建第二个页面
1.
**创建第二个页面。**
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Visual**
”,命名为“
**second**
”,单击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001233368868
](
figures/zh-cn_image_0000001233368868.png
)
!
[
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”,示例如下:
-
在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下:
...
@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -109,7 +109,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可


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,使得其文字放大。操作如下所示:
选中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
)
!
[
zh-cn_image_0000001280383937
](
figures/zh-cn_image_0000001277809361.gif
)
...
@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -119,7 +119,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
**第一个页面跳转到第二个页面。**
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
-
“
**index.ets**
”示例如下:
-
“
**index.ets**
”示例如下:
...
@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -150,7 +150,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可


2.
**第二个页面返回到第一个页面。**
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。需同时处理ets文件及visual文件。
-
“
**second.ets**
”示例如下:
-
“
**second.ets**
”示例如下:
...
@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可
...
@@ -180,7 +180,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可


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
)
!
[
zh-cn_image_0000001233528192
](
figures/zh-cn_image_0000001233528192.png
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录