update ui

Signed-off-by: Nyamila <tianyu55@huawei.com>

zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md

@@ -22,7 +22,8 @@ struct CompB {
 
   build() {
     Column() {
-      Button(this.CompValue);
+      Button(this.CompValue)
+        .margin(5)
     }
   }
 }
@@ -81,6 +82,8 @@ struct CompA {
   }
 }
 ```
+![builder](figures/builder.PNG)
+
 ## @BuilderParam<sup>8+<sup>
 
 @BuilderParam装饰器用于修饰自定义组件内函数类型的属性（例如：`@BuilderParam noParam: () => void`），并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
@@ -151,6 +154,8 @@ struct CustomContainerUser {
 }
 ```
 
+![builder1](figures/builder1.PNG)
+
 ### 尾随闭包初始化组件
 
 在自定义组件中使用@BuilderParam修饰的属性时也可通过尾随闭包进行初始化（在初始化自定义组件时，组件后紧跟一个大括号“{}”形成尾随闭包场景（`CustomContainer(){}`）。开发者可把尾随闭包看做一个容器，向其中填充内容，如在闭包内增加组件（`{Column(){...}`），闭包内语法规范与build函数一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。
@@ -204,6 +209,8 @@ struct CustomContainerUser {
 }
 ```
 
+![builder2](figures/builder2.gif)
+
 ## @Styles
 
 ArkTS为了避免开发者对重复样式的设置，通过@Styles装饰器可以将多个样式设置提炼成一个方法，直接在组件声明时调用，通过@Styles装饰器可以快速定义并复用自定义样式。当前@Styles仅支持通用属性。
@@ -246,6 +253,8 @@ struct FancyUse {
 }
 ```
 
+![styles](figures/styles.PNG)
+
 @Styles还可以在[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)属性内部使用，在组件处于不同的状态时赋予相应的属性。
 
 在StateStyles内可以直接调用组件外定义的@Styles方法，但需要通过this关键字调用组件内定义的@Styles方法。
@@ -284,6 +293,8 @@ struct FancyUse {
 }
 ```
 
+![styles1](figures/styles1.gif)
+
 ## @Extend
 
 @Extend装饰器将新的属性方法添加到Text、Column、Button等内置组件上，通过@Extend装饰器可以快速地扩展原生组件。@Extend不能定义在自定义组件struct内。
@@ -319,6 +330,8 @@ struct FancyUse {
 > - @Extend装饰器不能定义在自定义组件struct内。
 > - @Extend装饰器内仅支持属性方法设置。
 
+![extend](figures/extend.PNG)
+
 ## @CustomDialog
 
 @CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以动态设置内容及样式。
@@ -369,4 +382,4 @@ struct CustomDialogUser {
 }
 ```
 
-![custom-dialog-demo](figures/custom-dialog-demo.gif)
\ No newline at end of file
+![customdialog](figures/customdialog.gif)
\ No newline at end of file

zh-cn/application-dev/quick-start/arkts-rendering-control.md

@@ -91,6 +91,8 @@ struct MyComponent {
 }
 ```
 
+![forEach1](figures/forEach1.gif)
+
 ## 数据懒加载
 
 通过数据懒加载（LazyForEach）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
@@ -212,7 +214,7 @@ class BasicDataSource implements IDataSource {
 
 class MyDataSource extends BasicDataSource {
   // 初始化数据列表
-  private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3']
+  private dataArray: string[] = ['/path/image0.png', '/path/image1.png', '/path/image2.png', '/path/image3.png']
 
   public totalCount(): number {
     return this.dataArray.length
@@ -249,7 +251,7 @@ struct MyComponent {
         }
         .onClick(() => {
           // 每点击一次列表项，数据增加一项
-          this.data.pushData('/path/image' + this.data.totalCount())
+          this.data.pushData('/path/image' + this.data.totalCount() + '.png')
         })
       }, item => item)
     }
@@ -275,4 +277,6 @@ struct MyComponent {
 >   LazyForEach(dataSource, 
 >     item => Text(`${item.i}. item.data.label`)),
 >     item => item.data.id.toString())
->   ```
\ No newline at end of file
+>   ```
+
+![lazyForEach](figures/lazyForEach.gif)
\ No newline at end of file

zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md

@@ -42,6 +42,8 @@ struct bindPopupPage {
 }
 ```
 
+![popup](figures/popup.gif)
+
 ## 状态变量数据类型声明使用限制
 
 @State、@Provide、 @Link和@Consume四种状态变量的数据类型声明只能由简单数据类型或引用数据类型的其中一种构成。
@@ -68,4 +70,6 @@ struct IndexPage {
     .height('100%')
   }
 }
-```
\ No newline at end of file
+```
+
+![hello](figures/hello.PNG)
\ No newline at end of file

zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md

@@ -80,6 +80,7 @@ struct ComponentA {
 }
 ```
 
+![appstorage](figures/appstorage.gif)
 
 ## [LocalStorage](../reference/arkui-ts/ts-state-management.md#localstorage9)
 
@@ -188,6 +189,8 @@ struct LocalStorageComponentProp {
 }
 ```
 
+![appstorage1](figures/appstorage1.gif)
+
 ### 示例2（在Entry页面定义LocalStorage）
 
 ```ts
@@ -223,6 +226,8 @@ struct Child {
 }
 ```
 
+![appstorage2](figures/appstorage2.gif)
+
 ## [PersistentStorage](../reference/arkui-ts/ts-state-management.md#persistentstorage)
 
 PersistentStorage提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 
@@ -260,6 +265,8 @@ struct PersistentComponent {
 }
 ```
 
+![appstorage3](figures/appstorage3.gif)
+
 ## [Environment](../reference/arkui-ts/ts-state-management.md#environment)
 
 Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态数据，这些数据描述了应用程序运行的设备环境，包括系统语言、深浅色模式等等。Environment及其属性是不可变的，所有数据类型均为简单类型。如下示例展示了从Environment获取系统是否开启无障碍屏幕朗读：