提交 55b6b898 编写于 作者: H HelloCrease

update figures

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 3d122129
...@@ -195,11 +195,8 @@ ...@@ -195,11 +195,8 @@
- Sensor - Sensor
- [Sensor Overview](device/sensor-overview.md) - [Sensor Overview](device/sensor-overview.md)
- [Sensor Development](device/sensor-guidelines.md) - [Sensor Development](device/sensor-guidelines.md)
- Sensor
- [Sensor Overview](device/sensor-overview.md)
- [Sensor Development](device/sensor-guidelines.md)
- Vibrator - Vibrator
- [vibrator-Overview.md](device/vibrator-overview.md) - [Vibrator Overview](device/vibrator-overview.md)
- [Vibrator Development](device/vibrator-guidelines.md) - [Vibrator Development](device/vibrator-guidelines.md)
- Device Usage Statistics - Device Usage Statistics
- [Device Usage Statistics Overview](device-usage-statistics/device-usage-statistics-overview.md) - [Device Usage Statistics Overview](device-usage-statistics/device-usage-statistics-overview.md)
......
...@@ -434,6 +434,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -434,6 +434,7 @@ You can use the Flex layout to build a food composition table. In this way you d
``` ```
5. Use the custom constructor @Builder to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure. 5. Use the custom constructor @Builder to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png) ![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png)
Currently, all food groups are declared, resulting in code duplication and redundancy. You can use @Builder to build a custom method and abstract the same UI structure declaration. The @Builder decorated method and the build method for the @Component decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by @Builder, but a component decorated by @Component can have only one build method. Currently, all food groups are declared, resulting in code duplication and redundancy. You can use @Builder to build a custom method and abstract the same UI structure declaration. The @Builder decorated method and the build method for the @Component decorated component are used to declare some UI rendering structures and comply with the same eTS syntax. You can define one or more methods decorated by @Builder, but a component decorated by @Component can have only one build method.
...@@ -539,15 +540,3 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -539,15 +540,3 @@ You can use the Flex layout to build a food composition table. In this way you d
![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png) ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png)
You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection. You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
## Samples
The following sample is provided to help you better understand how to use build a simple page:
- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout.
```
```
\ No newline at end of file
...@@ -272,11 +272,3 @@ We have implemented the redirection and going back of the FoodCategoryList and F ...@@ -272,11 +272,3 @@ We have implemented the redirection and going back of the FoodCategoryList and F
} }
} }
``` ```
## Samples
The following sample is provided to help you better understand how to define the page layout and connection:
- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
This sample exemplifies the basic usage of the list layout, grid layout, and page routing, by building the food list page and food details page.
...@@ -195,11 +195,8 @@ ...@@ -195,11 +195,8 @@
- Sensor - Sensor
- [Sensor Overview](device/sensor-overview.md) - [Sensor Overview](device/sensor-overview.md)
- [Sensor Development](device/sensor-guidelines.md) - [Sensor Development](device/sensor-guidelines.md)
- Sensor
- [Sensor Overview](device/sensor-overview.md)
- [Sensor Development](device/sensor-guidelines.md)
- Vibrator - Vibrator
- [vibrator-Overview.md](device/vibrator-overview.md) - [Vibrator Overview](device/vibrator-overview.md)
- [Vibrator Development](device/vibrator-guidelines.md) - [Vibrator Development](device/vibrator-guidelines.md)
- Device Usage Statistics - Device Usage Statistics
- [Device Usage Statistics Overview](device-usage-statistics/device-usage-statistics-overview.md) - [Device Usage Statistics Overview](device-usage-statistics/device-usage-statistics-overview.md)
......
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
- [设备管理](device/Readme-CN.md) - [设备管理](device/Readme-CN.md)
- [设备使用信息统计](device-usage-statistics/Readme-CN.md) - [设备使用信息统计](device-usage-statistics/Readme-CN.md)
- [DFX](dfx/Readme-CN.md) - [DFX](dfx/Readme-CN.md)
- [国际化](internationalization/Readme-CN.md)
### 工具 ### 工具
......
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
- [设备管理](device/usb-overview.md) - [设备管理](device/usb-overview.md)
- [设备使用信息统计](device-usage-statistics/device-usage-statistics-overview.md) - [设备使用信息统计](device-usage-statistics/device-usage-statistics-overview.md)
- [DFX](dfx/hiappevent-overview.md) - [DFX](dfx/hiappevent-overview.md)
- [国际化](internationalization/international-overview.md)
### 工具 ### 工具
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
...... ......
} }
} }
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
...... ......
} }
} }
@Entry @Entry
@Component @Component
struct FoodCategoryList { struct FoodCategoryList {
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
struct FoodCategoryList { struct FoodCategoryList {
private foodItems: FoodData[] = initializeOnStartup() private foodItems: FoodData[] = initializeOnStartup()
private showList: boolean = false private showList: boolean = false
build() { build() {
Stack() { Stack() {
if (this.showList) { if (this.showList) {
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
struct FoodCategoryList { struct FoodCategoryList {
private foodItems: FoodData[] = initializeOnStartup() private foodItems: FoodData[] = initializeOnStartup()
private showList: boolean = false private showList: boolean = false
build() { build() {
Stack({ alignContent: Alignment.TopEnd }) { Stack({ alignContent: Alignment.TopEnd }) {
if (this.showList) { if (this.showList) {
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
struct FoodCategoryList { struct FoodCategoryList {
private foodItems: FoodData[] = initializeOnStartup() private foodItems: FoodData[] = initializeOnStartup()
@State private showList: boolean = false @State private showList: boolean = false
build() { build() {
Stack({ alignContent: Alignment.TopEnd }) { Stack({ alignContent: Alignment.TopEnd }) {
if (this.showList) { if (this.showList) {
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
}.height('100%') }.height('100%')
} }
} }
``` ```
点击切换图标,FoodList组件出现,再次点击,FoodList组件消失。 点击切换图标,FoodList组件出现,再次点击,FoodList组件消失。
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
private foodItems: FoodData[] private foodItems: FoodData[]
build() {} build() {}
} }
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -214,7 +214,7 @@ ...@@ -214,7 +214,7 @@
.width('100%') .width('100%')
} }
} }
@Component @Component
struct FoodGrid { struct FoodGrid {
private foodItems: FoodData[] private foodItems: FoodData[]
...@@ -242,43 +242,43 @@ ...@@ -242,43 +242,43 @@
![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif) ![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif)
10. 创建展示蔬菜(Category.Vegetable)、水果(Category.Fruit)、坚果(Category.Nut)、海鲜(Category.SeaFood)和甜品(Category.Dessert)分类的页签。 10. 创建展示蔬菜(Category.Vegetable)、水果(Category.Fruit)、坚果(Category.Nut)、海鲜(Category.SeaFood)和甜品(Category.Dessert)分类的页签。
``` ```
@Component @Component
struct FoodCategory { struct FoodCategory {
private foodItems: FoodData[] private foodItems: FoodData[]
build() { build() {
Stack() { Stack() {
Tabs() { Tabs() {
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems }) FoodGrid({ foodItems: this.foodItems })
}.tabBar('All') }.tabBar('All')
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) }) FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
}.tabBar('Vegetable') }.tabBar('Vegetable')
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) }) FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
}.tabBar('Fruit') }.tabBar('Fruit')
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) }) FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
}.tabBar('Nut') }.tabBar('Nut')
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) }) FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
}.tabBar('Seafood') }.tabBar('Seafood')
TabContent() { TabContent() {
FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) }) FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
}.tabBar('Dessert') }.tabBar('Dessert')
} }
.barWidth(280) .barWidth(280)
.barMode(BarMode.Scrollable) .barMode(BarMode.Scrollable)
} }
} }
} }
``` ```
11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同,所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。 11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同,所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。
创建gridRowTemplate和HeightValue成员变量,通过成员变量设置Grid行数和高度。 创建gridRowTemplate和HeightValue成员变量,通过成员变量设置Grid行数和高度。
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
1. 新建model文件夹,在model目录下创建FoodData.ets。 1. 新建model文件夹,在model目录下创建FoodData.ets。
![zh-cn_image_0000001195119619](figures/zh-cn_image_0000001195119619.png) ![zh-cn_image_0000001195119619](figures/zh-cn_image_0000001195119619.png)
2. 定义食物数据的存储模型FoodData和枚举变量Category,FoodData类包含食物id、名称(name)、分类(category)、图片(image)、热量(calories)、蛋白质(protein)、脂肪(fat)、碳水(carbohydrates)和维生素C(vitaminC)属性。 2. 定义食物数据的存储模型FoodData和枚举变量Category,FoodData类包含食物id、名称(name)、分类(category)、图片(image)、热量(calories)、蛋白质(protein)、脂肪(fat)、碳水(carbohydrates)和维生素C(vitaminC)属性。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册