From d6a9e111ca46d5b45973d7d441127d63f735cabd Mon Sep 17 00:00:00 2001 From: tianyu Date: Sat, 8 Oct 2022 16:53:45 +0800 Subject: [PATCH] fixed cbacc10 from https://gitee.com/yamila89/docs_6/pulls/10334 uodate docs Signed-off-by: tianyu --- .../reference/arkui-ts/figures/richText.png | Bin 0 -> 26651 bytes .../arkui-ts/ts-basic-components-richtext.md | 4 +- .../ui/ui-ts-creating-simple-page.md | 137 ++++++++++-------- 3 files changed, 83 insertions(+), 58 deletions(-) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/richText.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/richText.png b/zh-cn/application-dev/reference/arkui-ts/figures/richText.png new file mode 100644 index 0000000000000000000000000000000000000000..1520a854a9baed9fcc4e50e989bbfb4e83acf487 GIT binary patch literal 26651 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 PeYotcPg&iwASV7Ff$1g# literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index 239aad680a..9c2e9b4549 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -77,4 +77,6 @@ struct RichTextExample { } } } -``` \ No newline at end of file +``` + + ![richText](figures/richText.png) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md index 8e976dd67c..9ac54343c4 100644 --- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md +++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md @@ -1,6 +1,6 @@ # 创建简单视图 -在这一小节中,我们将开始食物详情页的开发,学习如何通过容器组件Stack、Flex和基本组件Image、Text,构建用户自定义组件,完成图文并茂的食物介绍。 +在这一小节中,我们将开始食物详情页的开发,学习如何通过容器组件Stack、Flex和基础组件Image、Text,构建用户自定义组件,完成图文并茂的食物介绍。 ## 构建Stack布局 @@ -24,7 +24,8 @@ ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) 2. 食物图片展示。 - 创建Image组件,指定Image组件的url,Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用`$rawfile('filename')`的形式,filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。 + 创建Image组件,指定Image组件的url,Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用`$rawfile('filename')`的形式,filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。 + ``` @Entry @Component @@ -40,15 +41,16 @@ } ``` - ![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(图片资源)。 将Tomato.png放入media文件夹内。就可以通过`$r('app.type.name')`的形式引用应用资源,即`$r('app.media.Tomato')`。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -62,7 +64,8 @@ } } } - ``` +``` + 4. 设置Image宽高,并且将image的objectFit属性设置为ImageFit.Contain,即保持图片长宽比的情况下,使得图片完整地显示在边界内。 如果Image填满了整个屏幕,原因如下: @@ -70,8 +73,8 @@ 2. Image的objectFit默认属性是ImageFit.Cover,即在保持长宽比的情况下放大或缩小,使其填满整个显示边界。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -85,13 +88,15 @@ } } } - ``` +``` + ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png) 5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐,Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样,都是框架提供的内置枚举类型。 - ``` - @Entry + +``` +@Entry @Component struct MyComponent { build() { @@ -105,16 +110,21 @@ } } } - ``` +``` + ![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png) -6. 通过设置Stack的背景颜色来改变食物图片的背景颜色,设置颜色有两种方式: +6. 通过设置Stack的背景颜色来改变食物图片的背景颜色,设置颜色有四种方式: 1. 通过框架提供的Color内置枚举值来设置,比如backgroundColor(Color.Red),即设置背景颜色为红色。 2. string类型参数,支持的颜色格式有:rgb、rgba和HEX颜色码。比如backgroundColor('\#0000FF'),即设置背景颜色为蓝色,backgroundColor('rgb(255, 255, 255)'),即设置背景颜色为白色。 + 3. number类型参数,支持十六进制颜色值。比如backgroundColor(0xFF0000),即设置背景颜色为红色。 + + 4. Resource类型参数请参考[资源访问](ts-resource-access.md) 。 + - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -128,8 +138,9 @@ } .backgroundColor('#FFedf2f5') } - } - ``` +} +``` + ![zh-cn_image_0000001168888822](figures/zh-cn_image_0000001168888822.png) @@ -137,8 +148,8 @@ 1. 参数为Length时,即统一指定四个边的外边距,比如margin(20),即上、右、下、左四个边的外边距都是20。 2. 参数为{top?: Length, right?: Length, bottom?: Length, left?:Length},即分别指定四个边的边距,比如margin({ left: 26, bottom: 17.4 }),即左边距为26,下边距为17.4。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -154,15 +165,16 @@ .backgroundColor('#FFedf2f5') } } - ``` +``` + ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png) 8. 调整组件间的结构,语义化组件名称。创建页面入口组件为FoodDetail,在FoodDetail中创建Column,设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay,为FoodDetail的子组件。 Column是子组件竖直排列的容器组件,本质为线性布局,所以只能设置交叉轴方向的对齐。 - ``` - @Component +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -188,7 +200,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ## 构建Flex布局 @@ -196,8 +209,9 @@ 开发者可以使用Flex弹性布局来构建食物的食物成分表,弹性布局在本场景的优势在于可以免去多余的宽高计算,通过比例来设置不同单元格的大小,更加灵活。 1. 创建ContentTable组件,使其成为页面入口组件FoodDetail的子组件。 - ``` - @Component + +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -229,7 +243,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + 2. 创建Flex组件展示Tomato两类成分。 一类是热量Calories,包含卡路里(Calories);一类是营养成分Nutrition,包含蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)。 @@ -238,8 +253,8 @@ 已省略FoodImageDisplay代码,只针对ContentTable进行扩展。 - ``` - @Component +``` +@Component struct ContentTable { build() { Flex() { @@ -267,13 +282,15 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png) 3. 调整布局,设置各部分占比。分类名占比(layoutWeight)为1,成分名和成分含量一共占比(layoutWeight)2。成分名和成分含量位于同一个Flex中,成分名占据所有剩余空间flexGrow(1)。 - ``` - @Component + +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -322,15 +339,16 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png) 4. 仿照热量分类创建营养成分分类。营养成分部分(Nutrition)包含:蛋白质(Protein)、脂肪(Fat)、碳水化合物(Carbohydrates)和维生素C(VitaminC)四个成分,后三个成分在表格中省略分类名,用空格代替。 设置外层Flex为竖直排列FlexDirection.Column, 在主轴方向(竖直方向)上等距排列FlexAlign.SpaceBetween,在交叉轴方向(水平轴方向)上首部对齐排列ItemAlign.Start。 - ``` - @Component +``` +@Component struct ContentTable { build() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { @@ -421,7 +439,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + 5. 使用自定义构造函数\@Builder简化代码。可以发现,每个成分表中的成分单元其实都是一样的UI结构。 ![zh-cn_image_0000001169599582](figures/zh-cn_image_0000001169599582.png) @@ -430,8 +449,8 @@ 在ContentTable内声明\@Builder修饰的IngredientItem方法,用于声明分类名、成分名称和成分含量UI描述。 - ``` - @Component +``` + @Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -450,12 +469,13 @@ } } } - ``` +``` - 在ContentTable的build方法内调用IngredientItem接口,需要用this去调用该Component作用域内的方法,以此来区分全局的方法调用。 - ``` - @Component + 在ContentTable的build方法内调用IngredientItem接口,需要用this去调用该Component作用域内的方法,以此来区分全局的方法调用。 + +``` +@Component struct ContentTable { ...... build() { @@ -470,12 +490,13 @@ .padding({ top: 30, right: 30, left: 30 }) } } - ``` +``` - ContentTable组件整体代码如下。 - ``` - @Component + ContentTable组件整体代码如下。 + +``` +@Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -494,17 +515,18 @@ } } - build() { - Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { - this.IngredientItem('Calories', 'Calories', '17kcal') - this.IngredientItem('Nutrition', 'Protein', '0.9g') - this.IngredientItem('', 'Fat', '0.2g') - this.IngredientItem('', 'Carbohydrates', '3.9g') - this.IngredientItem('', 'VitaminC', '17.8mg') - } - .height(280) - .padding({ top: 30, right: 30, left: 30 }) - } + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } @Entry @@ -518,7 +540,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png) -- GitLab