!14234 【UI组件重构】文档整改

Merge pull request !14234 from 田雨/master

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -101,7 +101,6 @@
   - [ColumnSplit](ts-container-columnsplit.md)
   - [Counter](ts-container-counter.md)
   - [Flex](ts-container-flex.md)
-  - [FlowItem](ts-container-flowitem.md)
   - [GridCol](ts-container-gridcol.md)
   - [GridRow](ts-container-gridrow.md)
   - [Grid](ts-container-grid.md)
@@ -121,7 +120,6 @@
   - [Swiper](ts-container-swiper.md)
   - [Tabs](ts-container-tabs.md)
   - [TabContent](ts-container-tabcontent.md)
-  - [WaterFlow](ts-container-waterflow.md)
 - 媒体组件
   - [Video](ts-media-components-video.md)
 - 绘制组件

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

@@ -70,38 +70,19 @@ struct ImageAnimatorExample {
       ImageAnimator()
         .images([
           {
-            src: $r('app.media.img1'),
-            duration: 500,
-            width: 170,
-            height: 120,
-            top: 0,
-            left: 0
+            src: $r('app.media.img1')
           },
           {
-            src: $r('app.media.img2'),
-            duration: 500,
-            width: 170,
-            height: 120,
-            top: 0,
-            left: 170
+            src: $r('app.media.img2')
           },
           {
-            src: $r('app.media.img3'),
-            duration: 500,
-            width: 170,
-            height: 120,
-            top: 120,
-            left: 170
+            src: $r('app.media.img3')
           },
           {
-            src: $r('app.media.img4'),
-            duration: 500,
-            width: 170,
-            height: 120,
-            top: 120,
-            left: 0
+            src: $r('app.media.img4')
           }
         ])
+        .duration(2000)
         .state(this.state).reverse(this.reverse).fixedSize(false)
         .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
         .margin({ top: 100 })

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md

@@ -41,4 +41,4 @@ struct LoadingProgressExample {
 }
 ```
 
-![zh-cn_image_000000111864201](figures/zh-cn_image_000000111864201.gif)
+![loadProgress](figures/loadProgress.jpeg)

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md

@@ -20,3 +20,61 @@ NavRouter()
 | 名称                                       | 功能描述                                     |
 | ---------------------------------------- | ---------------------------------------- |
 | onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。</br> **说明：** 用户点击NavRouter，激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)；NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。  |
+
+## 示例
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct NavRouterExample {
+  private arr: number[] = [0, 1, 2, 3]
+  @State isActive: boolean = false
+  @State dex: number = 0
+
+  build() {
+    Column() {
+      Navigation() {
+        List({ space: 12, initialIndex: 0 }) {
+          ForEach(this.arr, (item: number, index: number) => {
+            ListItem() {
+              NavRouter() {
+                Row() {
+                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
+                  Text(`NavRouter${item + 1}`)
+                    .fontSize(22)
+                    .fontWeight(500)
+                    .textAlign(TextAlign.Center)
+                }
+                .width(180)
+                .height(72)
+                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
+                .borderRadius(24)
+
+                NavDestination() {
+                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
+                  Flex({ direction: FlexDirection.Row }) {
+                    Row() {
+                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
+                      Text('今天共有七节课').fontSize(30)
+                    }.padding({ left: 15 })
+                  }
+                }.backgroundColor('#ccc')
+                .title(`NavDestination${item + 1}`)
+              }.onStateChange((isActivated: boolean) => {
+                this.dex = index
+              })
+            }
+          }, item => item)
+        }
+        .height('100%')
+        .margin({ top: 12, left: 12 })
+      }
+      .mode(NavigationMode.Split)
+      .hideTitleBar(true)
+      .hideToolBar(true)
+    }.height('100%')
+  }
+}
+```
+

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md

@@ -122,7 +122,6 @@ struct StepperExample {
             .itemTextStyle()
         }.itemStyle()
       }
-      .nextLabel('Finish')
     }
     .backgroundColor('#F1F3F5')
     .onFinish(() => {

zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md

@@ -93,7 +93,7 @@ struct FlexExample1 {
 }
 ```
 
-![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
+![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.PNG)
 
 ```ts
 // xxx.ets
@@ -139,7 +139,7 @@ struct FlexExample2 {
 }
 ```
 
-![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
+![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.PNG)
 
 ```ts
 // xxx.ets
@@ -188,7 +188,7 @@ struct FlexExample3 {
 }
 ```
 
-![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
+![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.PNG)
 
 ```ts
 // xxx.ets
@@ -286,4 +286,4 @@ struct FlexExample5 {
 }
 ```
 
-![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.gif)
+![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.PNG)

zh-cn/application-dev/reference/arkui-ts/ts-container-flowitem.md

-# FlowItem
-
-
-[瀑布流组件](ts-container-waterflow.md)的子组件，用来展示瀑布流具体item。
-
-
-> **说明：**
->
-> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 子组件
-
-
-支持单个子组件。
-
-
-## 接口
-
-FlowItem()
-
-使用该接口来创建瀑布流子组件。
-
-
-## 属性
-
-无
-
-## 示例
-
-详见[瀑布流组件示例](ts-container-waterflow.md#示例)。
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-container-waterflow.md

-# WaterFlow
-
-
-瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。
-
-
-> **说明：**
->
-> 该组件从API Version 9 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
-## 子组件
-
-
-包含[FlowItem](ts-container-flowitem.md)子组件。
-
-
-## 接口
-
-
-WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
-
-**参数：**
-
-| 参数名     | 参数类型                                        | 必填 | 参数描述                                     |
-| ---------- | ----------------------------------------------- | ------ | -------------------------------------------- |
-| footer |  [CustomBuilder](ts-types.md#custombuilder8) | 否   | 设置WaterFlow尾部组件。  |
-| scroller | [Scroller](ts-container-scroll.md#scroller) | 否   | 可滚动组件的控制器，与可滚动组件绑定。<br/>目前瀑布流仅支持Scroller组件的scrollToIndex接口。 |
-
-
-## 属性
-
-
-除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
-
-| 名称 | 参数类型 | 描述 |
-| -------- | -------- | -------- |
-| columnsTemplate | string | 设置当前瀑布流组件布局列的数量，不设置时默认1列。<br/>例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。并支持[auto-fill](#auto-fill说明)。<br>默认值：'1fr' |
-| rowsTemplate | string | 设置当前瀑布流组件布局行的数量，不设置时默认1行。<br/>例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。并支持[auto-fill](#auto-fill说明)。<br/>默认值：'1fr' |
-| itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 设置约束尺寸，子组件布局时，进行尺寸范围限制。               |
-| columnsGap | Length |设置列与列的间距。 <br>默认值：0|
-| rowsGap | Length |设置行与行的间距。<br> 默认值：0|
-| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。<br/>默认值：FlexDirection.Column|
-
-layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况，分为以下三种设置模式:
-
-- layoutDirection设置纵向布局（FlexDirection.Column 或 FlexDirection.ColumnReverse）
-
-	此时columnsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。
-
-- layoutDirection设置横向布局（FlexDirection.Row 或 FlexDirection.RowReverse）
-
-	此时rowsTemplate有效（如果未设置，取默认值）。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件横向布局，辅轴均分成纵向3列。
-
-- layoutDirection未设置布局方向
-
-	布局方向为layoutDirection的默认值：FlexDirection.Column，此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时，瀑布流组件纵向布局，辅轴均分成横向2列。
-
-## 事件
-
-
-除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
-
-
-| 名称 | 功能描述 |
-| -------- | -------- |
-| onReachStart(event: () => void) | 瀑布流组件到达起始位置时触发。 |
-| onReachEnd(event: () => void)   | 瀑布流组件到底末尾位置时触发。 |
-
-
-## auto-fill说明
-
-WaterFlow的columnsTemplate、rowsTemplate属性的auto-fill仅支持以下格式：
-
-```css
-repeat(auto-fill, track-size)
-```
-
-其中repeat、auto-fill为关键字。track-size为行高或者列宽，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效行高或者列宽。
-
-
-## 示例
-
-
-```ts
-// WaterFlowDataSource.ets
-
-// 实现IDataSource接口的对象，用于瀑布流组件加载数据
-export class WaterFlowDataSource implements IDataSource {
-
-  private dataArray: number[] = []
-  private listeners: DataChangeListener[] = []
-
-  constructor() {
-      for (let i = 0; i < 100; i++) {
-          this.dataArray.push(i)
-      }
-  }
-
-  // 获取索引对应的数据
-  public getData(index: number): any {
-      return this.dataArray[index]
-  }
-
-  // 通知控制器数据重新加载
-  notifyDataReload(): void {
-      this.listeners.forEach(listener => {
-          listener.onDataReloaded()
-      })
-  }
-
-  // 通知控制器数据增加
-  notifyDataAdd(index: number): void {
-      this.listeners.forEach(listener => {
-          listener.onDataAdded(index)
-      })
-  }
-
-  // 通知控制器数据变化
-  notifyDataChange(index: number): void {
-      this.listeners.forEach(listener => {
-          listener.onDataChanged(index)
-      })
-  }
-
-  // 通知控制器数据删除
-  notifyDataDelete(index: number): void {
-      this.listeners.forEach(listener => {
-          listener.onDataDeleted(index)
-      })
-  }
-
-  // 通知控制器数据位置变化
-  notifyDataMove(from: number, to: number): void {
-      this.listeners.forEach(listener => {
-          listener.onDataMoved(from, to)
-      })
-  }
-
-  // 获取数据总数
-  public totalCount(): number {
-      return this.dataArray.length
-  }
-
-  // 注册改变数据的控制器
-  registerDataChangeListener(listener: DataChangeListener): void {
-      if (this.listeners.indexOf(listener) < 0) {
-          this.listeners.push(listener)
-      }
-  }
-
-  // 注销改变数据的控制器
-  unregisterDataChangeListener(listener: DataChangeListener): void {
-      const pos = this.listeners.indexOf(listener)
-      if (pos >= 0) {
-          this.listeners.splice(pos, 1)
-      }
-  }
-
-  // 增加数据
-  public Add1stItem(): void {
-      this.dataArray.splice(0, 0, this.dataArray.length)
-      this.notifyDataAdd(0)
-  }
-
-  // 在数据尾部增加一个元素
-  public AddLastItem(): void {
-      this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
-      this.notifyDataAdd(this.dataArray.length-1)
-  }
-
-  // 在指定索引位置增加一个元素
-  public AddItem(index: number): void {
-      this.dataArray.splice(index, 0, this.dataArray.length)
-      this.notifyDataAdd(index)
-  }
-
-  // 删除第一个元素
-  public Delete1stItem(): void {
-      this.dataArray.splice(0, 1)
-      this.notifyDataDelete(0)
-  }
-
-  // 删除第二个元素
-  public Delete2ndItem(): void {
-      this.dataArray.splice(1, 1)
-      this.notifyDataDelete(1)
-  }
-
-  // 删除最后一个元素
-  public DeleteLastItem(): void {
-      this.dataArray.splice(-1, 1)
-      this.notifyDataDelete(this.dataArray.length)
-  }
-
-  // 重新加载数据
-  public Reload(): void {
-      this.dataArray.splice(1, 1)
-      this.dataArray.splice(3, 2)
-      this.notifyDataReload()
-  }
-}
-```
-
-```ts
-// WaterflowDemo.ets
-import { WaterFlowDataSource } from './WaterFlowDataSource'
-
-@Entry
-@Component
-struct WaterflowDemo {
-  @State minSize: number = 50
-  @State maxSize: number = 100
-  @State fontSize: number = 24
-  @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
-  scroller: Scroller = new Scroller()
-  datasource: WaterFlowDataSource = new WaterFlowDataSource()
-  private itemWidthArray: number[] = []
-  private itemHeightArray: number[] = []
-
-  // 计算flow item宽/高  
-  getSize() {
-    let ret = Math.floor(Math.random() * this.maxSize)
-    return (ret > this.minSize ? ret : this.minSize)
-  }
-
-  // 保存flow item宽/高   
-  getItemSizeArray() {
-    for (let i = 0; i < 100; i++) {
-      this.itemWidthArray.push(this.getSize())
-      this.itemHeightArray.push(this.getSize())
-    }
-  }
-    
-  aboutToAppear() {
-    this.getItemSizeArray()
-  }
-    
-  @Builder itemFoot() {
-    Column() {
-      Text(`Footer`)
-        .fontSize(10)
-        .backgroundColor(Color.Red)
-        .width(50)
-        .height(50)
-        .align(Alignment.Center)
-        .margin({ top: 2 })
-    }
-  }
-
-  build() {
-    Column({ space: 2 }) {
-      WaterFlow({ footer: this.itemFoot, scroller: this.scroller }) {
-        LazyForEach(this.datasource, (item: number) => {
-          FlowItem() {
-            Column() {
-              Text("N" + item).fontSize(12).height('16')
-              Image('res/waterFlowTest(' + item % 5 + ').jpg')
-                .objectFit(ImageFit.Fill)
-            }
-          }
-          .width(this.itemWidthArray[item])
-          .height(this.itemHeightArray[item])
-          .backgroundColor(this.colors[item % 5])
-        }, item => item)
-      }
-      .columnsTemplate("1fr 1fr 1fr 1fr")
-      .itemConstraintSize({
-        minWidth: 0,
-        maxWidth: '100%',
-        minHeight: 0,
-        maxHeight: '100%'
-      })
-      .columnsGap(10)
-      .rowsGap(5)
-      .onReachStart(() => {
-        console.info("onReachStart")
-      })
-      .onReachEnd(() => {
-        console.info("onReachEnd")
-      })
-      .backgroundColor(0xFAEEE0)
-      .width('100%')
-      .height('80%')
-      .layoutDirection(FlexDirection.Column)
-    }
-  }
-}
-```
-
-![zh-cn_image_WaterFlow.gif](figures/waterflow.gif)

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md

@@ -74,9 +74,8 @@ struct PathExample {
         .width('90%')
       // 绘制一条长900px，宽3vp的直线
       Path()
-        .width(300)
         .height(10)
-        .commands('M0 0 L900 0')
+        .commands('M0 0 L600 0')
         .stroke(Color.Black)
         .strokeWidth(3)
 
@@ -85,55 +84,43 @@ struct PathExample {
         .fontColor(0xCCCCCC)
         .width('90%')
       // 绘制直线图形
-      Row({ space: 20 }) {
+      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
-          .width(100)
-          .height(100)
-          .commands('M150 0 L300 300 L0 300 Z')
+          .commands('M100 0 L200 240 L0 240 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 0 H300 V300 H0 Z')
+          .commands('M0 0 H200 V200 H0 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
+          .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
-      }.width('100%')
+      }.width('95%')
 
       Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
       // 绘制弧线图形
-      Row({ space: 20 }) {
+      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
         Path()
-          .width(100)
-          .height(100)
-          .commands("M0 300 S150 0 300 300 Z")
+          .commands("M0 300 S100 0 240 300 Z")
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
+          .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
         Path()
-          .width(100)
-          .height(100)
-          .commands('M0 200 A30 20 20 0 0 250 200 Z')
+          .commands('M0 100 A30 20 20 0 0 200 100 Z')
           .fillOpacity(0)
           .stroke(Color.Black)
           .strokeWidth(3)
-      }
+      }.width('95%')
     }.width('100%')
     .margin({ top: 5 })
   }

zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md

@@ -24,9 +24,9 @@ struct Index {
   @Builder MenuBuilder() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Button('Test ContextMenu1')
-      Divider().strokeWidth(2).margin(5)
+      Divider().strokeWidth(2).margin(5).color(Color.Black)
       Button('Test ContextMenu2')
-      Divider().strokeWidth(2).margin(5)
+      Divider().strokeWidth(2).margin(5).color(Color.Black)
       Button('Test ContextMenu3')
     }
     .width(200)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md

@@ -36,46 +36,6 @@
 
 ## 示例
 
-```ts
-// xxx.ets
-@Entry
-@Component
-struct Index {
-  @State outSetValue: number = 40
-
-  build() {
-    Row() {
-      Column() {
-        Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
-          .borderImage({
-            source: $r('app.media.heart'),
-            slice: `${this.outSetValue}%`,
-            width: `${this.outSetValue}px`,
-            outset: '5px',
-            repeat: RepeatMode.Repeat,
-            fill: false
-          })
-        Slider({
-          value: this.outSetValue,
-          min: 0,
-          max: 100,
-          style: SliderStyle.OutSet
-        })
-          .margin({ top: 30 })
-          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValue = value
-            console.info('value:' + value + 'mode:' + mode.toString())
-          })
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
-```
-
-![zh-cn_image_borderImage](figures/borderImage.gif)
-
 
 ```ts
 // xxx.ets

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md

@@ -55,6 +55,7 @@ struct AspectRatioExample {
             Text(item)
               .backgroundColor(0xbbb2cb)
               .fontSize(40)
+              .height(160)
               .aspectRatio(1.5)
           }
         }, item => item)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

@@ -30,30 +30,24 @@ struct TextStyleExample {
   build() {
     Column({ space: 5 }) {
       Text('default text')
-      Divider()
       
       Text('text font color red').fontColor(Color.Red)
-      Divider()
       
       Text('text font default')
       Text('text font size 10').fontSize(10)
       Text('text font size 10fp').fontSize('10fp')
       Text('text font size 20').fontSize(20)
-      Divider()
       
       Text('text font style Italic').fontStyle(FontStyle.Italic)
-      Divider()
       
       Text('text fontWeight bold').fontWeight(700)
       Text('text fontWeight lighter').fontWeight(FontWeight.Lighter)
-      Divider()
       
       Text('red 20 Italic bold text')
         .fontColor(Color.Red)
         .fontSize(20)
         .fontStyle(FontStyle.Italic)
         .fontWeight(FontWeight.Bold)
-      Divider()
       
       Text('Orange 18 Normal text')
         .fontColor(Color.Orange)
@@ -64,4 +58,4 @@ struct TextStyleExample {
 }
 ```
 
-![textstyle](figures/textstyle.png)
+![textstyle](figures/textstyle.PNG)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md

@@ -31,13 +31,13 @@ struct TransformExample {
       Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
       Row()
         .rotate({
-          x: 1,
-          y: 1,
+          x: 0,
+          y: 0,
           z: 1,
           centerX: '50%',
           centerY: '50%',
           angle: 300
-        }) // 组件以矢量(1,1,1)为旋转轴，绕中心点顺时针旋转300度
+        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
         .width(100).height(100).backgroundColor(0xAFEEEE)
 
       Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)

zh-cn/application-dev/ui/ui-ts-animation-feature.md

@@ -170,9 +170,11 @@
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -183,6 +185,7 @@
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 50,
@@ -227,10 +230,10 @@
            angle: 180,
            colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
          })
-     }
+    }
    }
    ```
-
+   
    ![animation-feature](figures/animation-feature.gif)
 
 ## 页面转场动画

zh-cn/application-dev/ui/ui-ts-drawing-feature.md

@@ -217,10 +217,11 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
 
    ![drawing-feature4](figures/drawing-feature4.png)
 
-   填充颜色为白色。
+   填充颜色为白色，线条颜色为透明。
 
    ```ts
    .fill(Color.White)
+   .stroke(Color.Transparent)
    ```
 
    ```ts
@@ -233,6 +234,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
          }
          .height('630px')
          .width('630px')
@@ -256,6 +258,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
    Path()
      .commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z')
      .fill('none')
+     .stroke(Corlor.Transparent)
      .linearGradient(
      {
        angle: 30,
@@ -276,6 +279,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -303,10 +307,12 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
    
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 30,
@@ -317,6 +323,7 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
              {
                angle: 50,
@@ -348,33 +355,37 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
    @Entry
    @Component
    struct Logo {
-     private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
-     private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
+     private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
+     private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
+   
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Shape() {
            Path()
              .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
              .fill(Color.White)
+             .stroke(Color.Transparent)
    
            Path()
              .commands(this.pathCommands1)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
-             {
-               angle: 30,
-               colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
-             })
+               {
+                 angle: 30,
+                 colors: [["#C4FFA0", 0], ["#ffffff", 1]]
+               })
              .clip(new Path().commands(this.pathCommands1))
    
            Path()
              .commands(this.pathCommands2)
              .fill('none')
+             .stroke(Color.Transparent)
              .linearGradient(
-             {
-               angle: 50,
-               colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]
-             })
+               {
+                 angle: 50,
+                 colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]
+               })
              .clip(new Path().commands(this.pathCommands2))
          }
          .height('630px')
@@ -383,22 +394,22 @@ FoodDetail页面的食物成分表里，给每一项成分名称前都加上一
          Text('Healthy Diet')
            .fontSize(26)
            .fontColor(Color.White)
-           .margin({ top:300 })
+           .margin({ top: 300 })
    
          Text('Healthy life comes from a balanced diet')
            .fontSize(17)
            .fontColor(Color.White)
-           .margin({ top:4 })
+           .margin({ top: 4 })
        }
        .width('100%')
        .height('100%')
        .linearGradient(
          {
            angle: 180,
-           colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
-         })
+           colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
+        })
      }
    }
    ```
-
+   
    ![drawing-feature8](figures/drawing-feature8.png)
\ No newline at end of file

zh-cn/application-dev/ui/ui-ts-layout-flex.md

@@ -38,7 +38,7 @@
     .padding(10)
     .backgroundColor(0xAFEEEE)
     ```
-    ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png)
+    ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.PNG)
 
 - FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。
 
@@ -54,7 +54,7 @@
     .backgroundColor(0xAFEEEE)
     ```
 
-    ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png)
+    ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.PNG)
 
 - FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
 
@@ -70,7 +70,7 @@
     .backgroundColor(0xAFEEEE)
     ```
 
-    ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png)
+    ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.PNG)
 
 - FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。
 
@@ -86,7 +86,7 @@
     .backgroundColor(0xAFEEEE)
     ```
 
-    ![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.png)
+    ![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.PNG)
 
 ### 弹性布局换行
 
@@ -105,7 +105,7 @@
     .backgroundColor(0xAFEEEE)
     ```
     
-    ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
+    ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.PNG)
 
 - FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。
 
@@ -120,7 +120,7 @@
     .backgroundColor(0xAFEEEE)
     ```
     
-    ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
+    ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.PNG)
 
 - FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。
 
@@ -135,7 +135,7 @@
     .backgroundColor(0xAFEEEE)
     ```
     
-    ![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.png)
+    ![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.PNG)
 
 ### 弹性布局对齐方式
 
@@ -356,7 +356,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 }.width('90%').height(220).backgroundColor(0xAFEEEE)
 ```
 
-![](figures/alignself.png)
+![alignself](figures/alignself.png)
 
 上例中，Flex容器中alignItems设置交叉轴子组件的对齐方式为居中，子组件自身设置了alignSelf属性的情况，覆盖父组件的alignItem值，表现为alignSelf的定义。
 
@@ -496,7 +496,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
   }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
   
-  ![](figures/flexbasis.png)
+  ![flexbasis](figures/flexbasis.png)
 
 - flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。
 
@@ -508,7 +508,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
       .height(100)
       .backgroundColor(0xF5DEB3)
     
-    Text('flexGrow(3)')
+    Text('flexGrow(2)')
       .flexGrow(2)
       .width(100)
       .height(100)
@@ -521,7 +521,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
   }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
   ```
   
-  ![](figures/flexgrow.png)
+  ![flexgrow](figures/flexgrow.png)
 
 上图中，父容器宽度400vp, 三个子组件原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子组件，未设置flexGrow的子组件不参与“瓜分”。
 第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。
@@ -549,7 +549,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
   }.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) 
   ```
   
-  ![](figures/flexshrink.png)
+  ![flexshrink](figures/flexshrink.png)
 
 ## 场景示例
 
@@ -584,4 +584,3 @@ struct FlexExample {
 
 - [弹性布局（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
 
-- [ArkUI常用布局容器对齐方式（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo)