Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
6a49287c
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6a49287c
编写于
11月 23, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
2cc84540
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
52 addition
and
36 deletion
+52
-36
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+51
-35
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+1
-1
未找到文件。
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @
6a49287c
# 创建简单视图
在这一小节中,
以食物详情页的开发为例,学习如何通过容器组件Stack、Flex和基础组件Image、Text,构建用户自定义组件,完成图文并茂的食物介绍页开发
。
在这一小节中,
我们将开始食物详情页的开发,学习如何通过容器组件Stack、Flex和基础组件Image、Text,构建用户自定义组件,完成图文并茂的食物介绍
。
在创建页面前,请先创建eTS工程,FA模型请参考
[
创建FA模型的eTS工程
](
../
/quick-start/start-with-ets-fa.md#创建ets工程
)
,Stage模型请参考
[
创建Stage模型的eTS工程
](
../quick-start/start-with-ets-stage
.md#创建ets工程
)
。
在创建页面前,请先创建eTS工程,FA模型请参考
[
创建FA模型的eTS工程
](
../
quick-start/start-with-ets-stage.md#创建ets工程
)
,Stage模型请参考
[
创建Stage模型的eTS工程
](
..//quick-start/start-with-ets-fa
.md#创建ets工程
)
。
## 构建Stack布局
1.
创建食物名称。
在index.ets文件中,创建Stack组件,将Text组件放进Stack组件的花括号中,使其成为Stack组件的子组件。Stack组件
可以包含一个或多
个子组件。
在index.ets文件中,创建Stack组件,将Text组件放进Stack组件的花括号中,使其成为Stack组件的子组件。Stack组件
为堆叠组件,可以包含一个或多个子组件,其特点是后一个子组件覆盖前一
个子组件。
```
ts
@
Entry
@
Component
...
...
@@ -26,9 +26,9 @@
```
!
[
zh-cn_image_0000001214128687
](
figures/zh-cn_image_0000001214128687.png
)
2.
食物图片展示。
创建Image组件,指定Image组件的
的url,即图片的资源url。由于Stack的堆叠特性,为了让Text组件在Image组件上方显示,所以要先声明Image组件后声明Text组件。图片资源放在resources下的rawfile文件夹内,使用
`$rawfile('filename')`
的形式引用rawfile下的filename文件。当前
`$rawfile`
仅支持在Image控件中
引用图片资源。
创建Image组件,指定Image组件的
url,Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用
`$rawfile('filename')`
的形式,filename为rawfile目录下的文件相对路径。当前
`$rawfile`
仅支持Image控件
引用图片资源。
```
ts
@
Entry
...
...
@@ -46,7 +46,7 @@
```
!
[
zh-cn_image_0000001168410342
](
figures/zh-cn_image_0000001168410342.png
)
![
zh-cn_image_0000001168410342
](
figures/zh-cn_image_0000001168410342.png
)
3.
通过资源访问图片。
除指定图片路径外,也可以使用引用媒体资源符$r引用资源,需要遵循resources文件夹的资源限定词的规则。右键resources文件夹,点击New
>
Resource Directory,选择Resource Type为Media(图片资源)。
...
...
@@ -93,9 +93,9 @@
}
```
![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png)
!
[
zh-cn_image_0000001214210217
](
figures/zh-cn_image_0000001214210217.png
)
5.
设置食物图片和名称
对齐方式。设置Stack布局的对齐方式为底部起始端对齐,即
设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样,都是框架提供的内置枚举类型。
5.
设置食物图片和名称
布局。设置Stack的对齐方式为底部起始端对齐,Stack默认为居中对齐。
设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样,都是框架提供的内置枚举类型。
```
ts
@
Entry
...
...
@@ -114,9 +114,9 @@
}
```
![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png)
!
[
zh-cn_image_0000001168728872
](
figures/zh-cn_image_0000001168728872.png
)
6.
调整Text组件的外边距margin
。通过margin调整组件与其他组件四个方向的间距。margin的
设置方式如下:
6.
调整Text组件的外边距margin
,使其距离左侧和底部有一定的距离。margin是简写属性,可以统一指定四个边的外边距,也可以分别指定。具体
设置方式如下:
1.
参数为Length时,即统一指定四个边的外边距,比如margin(20),即上、右、下、左四个边的外边距都是20。
2.
参数为{top?: Length, right?: Length, bottom?: Length, left?:Length},即分别指定四个边的边距,比如margin({ left: 26, bottom: 17.4 }),即左边距为26,下边距为17.4。
...
...
@@ -139,9 +139,11 @@
}
```
![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png)
!
[
zh-cn_image_0000001213968747
](
figures/zh-cn_image_0000001213968747.png
)
7.
组件封装引用。将上面相对独立的ui单元封装为@Component,语义化组件名称为FoodImageDisplay。创建页面入口组件为FoodDetail,在FoodDetail中创建Column,设置水平方向上居中对齐alignItems(HorizontalAlign.Center),并通过FoodImageDisplay()引用ui组件。
7.
调整组件间的结构,语义化组件名称。创建页面入口组件为FoodDetail,在FoodDetail中创建Column,设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay,为FoodDetail的子组件。
Column是子组件竖直排列的容器组件,本质为线性布局,所以只能设置交叉轴方向的对齐。
```
ts
@
Component
...
...
@@ -175,7 +177,7 @@
开发者可以使用Flex弹性布局来构建食物的食物成分表,弹性布局在本场景的优势在于可以免去多余的宽高计算,通过比例来设置不同单元格的大小,更加灵活。
1.
创建ContentTable组件,
并在页面入口组件FoodDetail中引用该
组件。
1.
创建ContentTable组件,
使其成为页面入口组件FoodDetail的子
组件。
```
ts
@
Component
...
...
@@ -194,7 +196,7 @@
}
@
Component
struct
ContentTable
{
// 创建ContentTable组件
struct
ContentTable
{
build
()
{
}
}
...
...
@@ -212,7 +214,10 @@
}
```
2.
通过Flex组件展示食物热量。创建Flex组件,高度为280,上、右、左内边距为30,包含三个Text子组件分别代表类别名(Calories),含量名称(Calories)和含量数值(17kcal)。Flex组件默认为水平排列方式。
2.
创建Flex组件展示Tomato两类成分。
一类是热量Calories,包含卡路里(Calories);一类是营养成分Nutrition,包含蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)。
先创建热量这一类。创建Flex组件,高度为280,上、右、左内边距为30,包含三个Text子组件分别代表类别名(Calories),含量名称(Calories)和含量数值(17kcal)。Flex组件默认为水平排列方式。
已省略FoodImageDisplay代码,只针对ContentTable进行扩展。
...
...
@@ -246,11 +251,11 @@
}
}
```
![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png)
3.
调整
食物热量布局,设置各部分占比。外层Flex中,分类名占总空间的1/3(layoutWeight为1),成分名和成分含量一共占2/3(layoutWeight为2)。成分名和成分含量位于同一个Flex中,设置flexGrow(1)使成分名占据所有剩余空间
。
3.
调整
布局,设置各部分占比。分类名占比(layoutWeight)为1,成分名和成分含量一共占比(layoutWeight)2。成分名和成分含量位于同一个Flex中,成分名占据所有剩余空间flexGrow(1)
。
```
ts
@
Component
...
...
@@ -302,11 +307,11 @@
}
}
```
!
[
zh-cn_image_0000001215079443
](
figures/zh-cn_image_0000001215079443.png
)
4.
仿照热量分类创建营养成分分类。营养成分
Nutrition,包含蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)。
后三个成分在表格中省略分类名,用空格代替。
设置外层Flex为竖直排列FlexDirection.Column, 在主轴方向(竖直方向)上等距排列FlexAlign.SpaceBetween,在交叉轴方向(水平方向)上首部对齐排列ItemAlign.Start。
!
[
zh-cn_image_0000001215079443
](
figures/zh-cn_image_0000001215079443.png
)
4.
仿照热量分类创建营养成分分类。营养成分
部分(Nutrition)包含:蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)四个成分,
后三个成分在表格中省略分类名,用空格代替。
设置外层Flex为竖直排列FlexDirection.Column, 在主轴方向(竖直方向)上等距排列FlexAlign.SpaceBetween,在交叉轴方向(水平
轴
方向)上首部对齐排列ItemAlign.Start。
```
ts
@
Component
...
...
@@ -402,12 +407,12 @@
}
```
5.
使用自定义构造函数
\@
Builder简化代码。可以发现,每个成分表中的成分单元都是一样的UI结构。
5.
使用自定义构造函数
\@
Builder简化代码。可以发现,每个成分表中的成分单元
其实
都是一样的UI结构。
!
[
zh-cn_image_0000001169599582
](
figures/zh-cn_image_0000001169599582.png
)
当前对每个成分单元都进行了声明,造成了代码的重复和冗余。可以使用
\@
Builder来构建自定义方法,抽象出相同的UI结构声明。
\@
Builder修饰的方法和
\@
Component的build方法都是为了声明一些UI渲染结构,遵循一样的ArkTS语法。开发者可以定义一个或者多个
\@
Builder修饰的方法,但
\@
Component的build方法必须只有一个。
当前对每个成分单元都进行了声明,造成了代码的重复和冗余。可以使用
\@
Builder来构建自定义方法,抽象出相同的UI结构声明。
\@
Builder修饰的方法和
Component的build方法都是为了声明一些UI渲染结构,遵循一样的ArkTS语法。开发者可以定义一个或者多个
\@
Builder修饰的方法,但
Component的build方法必须只有一个。
在ContentTable内声明
\@
Builder修饰的IngredientItem方法,
并传入分类名、成分名称和成分含量用于生成不同成分单元的
UI描述。
在ContentTable内声明
\@
Builder修饰的IngredientItem方法,
用于声明分类名、成分名称和成分含量
UI描述。
```
ts
@
Component
...
...
@@ -431,7 +436,7 @@
}
```
在ContentTable的build方法内调用IngredientItem接口,需要用this去调用
\@
Component作用域内的方法,以此来区分全局的方法调用。
在ContentTable的build方法内调用IngredientItem接口,需要用this去调用
该
Component作用域内的方法,以此来区分全局的方法调用。
```
ts
@
Component
...
...
@@ -451,7 +456,7 @@
}
```
ContentTable组件
优化后
整体代码如下。
ContentTable组件整体代码如下。
```
ts
@
Component
...
...
@@ -486,16 +491,27 @@
}
}
@
Entry
@
Component
struct
FoodDetail
{
build
()
{
Column
()
{
FoodImageDisplay
()
ContentTable
()
}
.
alignItems
(
HorizontalAlign
.
Center
)
}
}
```
![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
!
[
zh-cn_image_0000001215199399
](
figures/zh-cn_image_0000001215199399.png
)
本小节通过Stack布局和Flex布局已完成食物的图文和营养成分表展示,构建了第一个普通视图的食物详情页。在下一个章节中,将学习页面间
跳转和数据传递,现在我们就进入下一个章节的学习吧。
通过学习Stack布局和Flex布局已完成食物的图文展示和营养成分表,构建出第一个普通视图的食物详情页。在下一个章节中,将开发食物分类列表页,并完成食物分类列表页面和食物详情页面的
跳转和数据传递,现在我们就进入下一个章节的学习吧。
## 相关实例
针对创建简单视图,有以下示例工程可供参考:
-
[
`BuildCommonView`:创建简单视图(ArkTS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView
)
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
\ No newline at end of file
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @
6a49287c
...
...
@@ -312,7 +312,7 @@
.padding(10)
.backgroundColor(0xAFEEEE)
```
!
[
zh-cn_image_0000001218739570
](
figures/zh-cn_image_0000001218739570.png
)
-
ItemAlign. Baseline:交叉轴方向文本基线对齐。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录