Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
851d097a
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
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,发现更多精彩内容 >>
提交
851d097a
编写于
11月 23, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
a8db11a0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
15 addition
and
15 deletion
+15
-15
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+15
-15
未找到文件。
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @
851d097a
...
...
@@ -8,9 +8,9 @@
## 构建Stack布局
1.
创建食物名称。
在index.ets文件中,创建Stack组件,将Text组件放进Stack组件的花括号中,使其成为Stack组件的子组件。Stack组件为堆叠组件,可以包含一个或多个子组件,其特点是后一个子组件覆盖前一个子组件。
```
ts
@
Entry
@
Component
...
...
@@ -26,7 +26,7 @@
```
!
[
zh-cn_image_0000001214128687
](
figures/zh-cn_image_0000001214128687.png
)
2.
食物图片展示。
创建Image组件,指定Image组件的url,Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用
`$rawfile('filename')`
的形式,filename为rawfile目录下的文件相对路径。当前
`$rawfile`
仅支持Image控件引用图片资源。
...
...
@@ -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,7 +93,7 @@
}
```
!
[
zh-cn_image_0000001214210217
](
figures/zh-cn_image_0000001214210217.png
)
![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png)
5.
设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐,Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样,都是框架提供的内置枚举类型。
...
...
@@ -114,7 +114,7 @@
}
```
!
[
zh-cn_image_0000001168728872
](
figures/zh-cn_image_0000001168728872.png
)
![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png)
6.
调整Text组件的外边距margin,使其距离左侧和底部有一定的距离。margin是简写属性,可以统一指定四个边的外边距,也可以分别指定。具体设置方式如下:
...
...
@@ -139,7 +139,7 @@
}
```
!
[
zh-cn_image_0000001213968747
](
figures/zh-cn_image_0000001213968747.png
)
![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png)
7.
调整组件间的结构,语义化组件名称。创建页面入口组件为FoodDetail,在FoodDetail中创建Column,设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay,为FoodDetail的子组件。
...
...
@@ -251,10 +251,10 @@
}
}
```
!
[
zh-cn_image_0000001169759552
](
figures/zh-cn_image_0000001169759552.png
)
3.
调整布局,设置各部分占比。分类名占比(layoutWeight)为1,成分名和成分含量一共占比(layoutWeight)2。成分名和成分含量位于同一个Flex中,成分名占据所有剩余空间flexGrow(1)。
```
ts
...
...
@@ -307,9 +307,9 @@
}
}
```
!
[
zh-cn_image_0000001215079443
](
figures/zh-cn_image_0000001215079443.png
)
!
[
zh-cn_image_0000001215079443
](
figures/zh-cn_image_0000001215079443.png
)
4.
仿照热量分类创建营养成分分类。营养成分部分(Nutrition)包含:蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)四个成分,后三个成分在表格中省略分类名,用空格代替。
设置外层Flex为竖直排列FlexDirection.Column, 在主轴方向(竖直方向)上等距排列FlexAlign.SpaceBetween,在交叉轴方向(水平轴方向)上首部对齐排列ItemAlign.Start。
...
...
@@ -504,7 +504,7 @@
}
```
!
[
zh-cn_image_0000001215199399
](
figures/zh-cn_image_0000001215199399.png
)
![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
通过学习Stack布局和Flex布局已完成食物的图文展示和营养成分表,构建出第一个普通视图的食物详情页。在下一个章节中,将开发食物分类列表页,并完成食物分类列表页面和食物详情页面的跳转和数据传递,现在我们就进入下一个章节的学习吧。
...
...
@@ -514,4 +514,4 @@
-
[
`BuildCommonView`:创建简单视图(ArkTS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView
)
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
\ No newline at end of file
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录