!10760 UI指南-常见布局开发指导

Merge pull request !10760 from sienna1128/docs/1012

zh-cn/application-dev/ui/Readme-CN.md

@@ -24,8 +24,14 @@
         - [绘制图像](ui-ts-drawing-feature.md)
         - [添加动画效果](ui-ts-animation-feature.md)
     - 常见布局开发指导
+        - 自适应布局
+            - [线性布局](ui-ts-layout-linear.md)
+            - [层叠布局](ui-ts-layout-stack.md)
             - [弹性布局](ui-ts-layout-flex.md)
+            - [网格布局](ui-ts-layout-grid.md)
+        - 响应式布局
             - [栅格布局](ui-ts-layout-grid-container.md)
+            - [栅格布局（新）](ui-ts-layout-grid-container-new.md)
             - [媒体查询](ui-ts-layout-mediaquery.md)
     - [Web组件开发](ui-ts-components-web.md)
     - [性能提升的推荐方法](ts-performance-improvement-recommendation.md)

zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md

+# 栅格布局
+
+栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)
+相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。GridRow为栅格容器组件，只与栅格子组件GridCol在栅格布局场景中使用。
+
+
+## 栅格容器GridRow
+
+
+栅格容器有columns、gutter、direction、breakpoints四个属性。
+- columns: 栅格布局的主要定位工具，设置栅格布局的总列数。
+- gutter: 设置元素之间的距离，决定内容间的紧密程度。
+- direction: 设置栅格子组件在栅格容器中的排列方向。
+- breakpoints：以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
+
+
+首先通过设置断点，得到一系列断点区间；然后，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，最后调整应用的布局。
+
+### 栅格系统断点
+
+断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者根据需求在不同的区间实现不同的页面布局效果。
+[栅格系统默认断点](ui-ts-layout-grid-container.md#系统栅格断点)将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
+
+| 断点名称  | 取值范围（vp）| 
+| --------| ------ | 
+| xs | [0, 320）   | 
+| sm | [320, 520) | 
+| md | [520, 840) | 
+| lg | [840, +∞)  | 
+
+在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，
+还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。
+
+| 断点名称 | 设备描述        |
+| ----- | ---------------------------------------- |
+| xs  | 最小宽度类型设备。    |
+| sm   | 小宽度类型设备。      |
+| md   | 中等宽度类型设备。    |
+| lg  | 大宽度类型设备。      |
+| xl   | 特大宽度类型设备。    |
+| xxl | 超大宽度类型设备。    |
+
+- 针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。
+
+  ```ts
+  breakpoints: {value: ["100vp", "200vp"]}
+  ```
+
+  表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。
+
+  ```ts
+  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
+  ```
+
+  表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。
+
+
+- 栅格系统通过监听窗口或容器的尺寸变化进行断点，通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
+
+下例中，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。效果如图：
+  ```ts
+GridRow({
+  breakpoints: {
+    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
+    reference: BreakpointsReference.WindowSize
+  }
+}) {
+     ForEach(this.bgColors, (color, index) => {
+       GridCol({
+         span: {
+           xs: 2,
+           sm: 3,
+           md: 4,
+           lg: 6,
+           xl: 8,
+           xxl: 12
+         }
+       }) {
+         Row() {
+           Text(${index})
+         }.width("100%").height("50vp")
+       }.backgroundColor(color)
+     })
+}                                                                    
+```
+
+![](figures/breakpoints.gif)
+  
+
+
+### 栅格布局的总列数
+
+GridRow中通过columns设置栅格布局的总列数。
+
+- columns默认值为12，当未设置columns时，在任何断点下，栅格布局被分成12列。
+   ```ts
+  GridRow() {
+    ForEach(this.bgColors, (item, index) => {
+      GridCol() {
+        Row() {
+          Text(`${index + 1}`)
+        }.width("100%").height("50")
+      }.backgroundColor(item)
+    })
+  }           
+  ```
+
+  ![](figures/columns1.png)
+
+- 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。下面分别设置栅格布局列数为4和8，子元素默认占一列，效果如下：
+
+  ```ts
+  Row() {
+    GridRow({ columns: 4 }) {
+      ForEach(this.bgColors, (item, index) => {
+        GridCol() {
+          Row() {
+            Text(`${index + 1}`)
+          }.width("100%").height("50")
+        }.backgroundColor(item)
+      })
+    }
+    .width("100%").height("100%")
+    .onBreakpointChange((breakpoint) => {
+      this.currentBp = breakpoint
+    })
+  }
+  .height(160)
+  .border({ color: Color.Blue, width: 2 })
+  .width('90%')
+  
+  Row() {
+    GridRow({ columns: 8 }) {
+      ForEach(this.bgColors, (item, index) => {
+        GridCol() {
+          Row() {
+            Text(`${index + 1}`)
+          }.width("100%").height("50")
+        }.backgroundColor(item)
+      })
+    }
+    .width("100%").height("100%")
+    .onBreakpointChange((breakpoint) => {
+      this.currentBp = breakpoint
+    })
+  }
+  .height(160)
+  .border({ color: Color.Blue, width: 2 })
+  .width('90%')
+  ```
+  
+  ![](figures/columns2.png)
+
+
+- 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
+
+  ```ts
+  GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
+    ForEach(this.bgColors, (item, index) => {
+      GridCol() {
+        Row() {
+          Text(`${index + 1}`)
+        }.width("100%").height("50")
+      }.backgroundColor(item)
+    })
+  }
+  ```
+  ![](figures/columns3.gif)
+
+  如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:8, md:10，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:10, xl:10, xxl:10。
+
+### 栅格子组件间距
+
+GridRow中通过gutter设置子元素在水平和垂直方向的间距。
+
+- 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。
+
+  ```ts
+   GridRow({ gutter: 10 }){}
+  ```
+
+  ![](figures/gutter1.png)
+  
+  
+
+- 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
+
+  ```ts
+  GridRow({ gutter: { x: 20, y: 50 } }){}
+  ```
+
+  ![](figures/gutter2.png)  
+
+
+
+### 排列方向
+
+通过GridRow的direction属性设置栅格子组件在栅格容器中的排列方向。
+
+- 子组件默认从左往右排列。
+
+  ```ts
+  GridRow({ direction: GridRowDirection.Row }){}
+  ```
+  ![](figures/direction1.png)
+
+- 子组件从右往左排列。
+
+  ```ts
+  GridRow({ direction: GridRowDirection.RowReverse }){}
+  ```
+  
+  ![](figures/direction2.png)
+
+
+
+## 栅格子组件GridCol
+
+GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。
+
+- span的设置
+
+  ```ts
+  GridCol({ span: 2 }){}
+  GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
+  GridCol(){}.span(2)
+  GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })
+  ```
+
+- offset的设置
+
+  ```ts
+  GridCol({ offset: 2 }){}
+  GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
+  GridCol(){}.offset(2)
+  GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 }) 
+  ```
+
+- order的设置
+
+  ```ts
+  GridCol({ order: 2 }){}
+  GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
+  GridCol(){}.order(2)
+  GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })
+  ```
+
+  下面使用传参的方式演示各属性的使用。
+
+### span
+
+子组件占栅格布局的列数，决定了子组件的宽度，默认为1。
+
+- 当类型为number时，子组件在所有尺寸设备下占用的列数相同。
+
+  ```ts
+  GridRow({ columns: 8 }) {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ span: 2 }) {      
+        Row() {
+          Text(${index})
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+
+  ![](figures/span1.png)
+
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
+
+  ```ts
+  GridRow({ columns: 8 }) {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
+        Row() {
+          Text(${index})
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+
+  ![](figures/span2.gif)
+
+### offset
+
+栅格子组件相对于前一个子组件的偏移列数，默认为0。
+- 当类型为number时，子组件偏移相同列数。
+
+  ```ts
+  GridRow() {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ offset: 2 }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+
+  ![](figures/offset1.png)
+
+  栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。
+
+
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
+
+  ```ts
+  GridRow() {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+
+  ![](figures/offset2.gif)
+
+### order
+
+  栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
+  当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。
+
+
+- 当类型为number时，子组件在任何尺寸下排序次序一致。
+
+  ```ts
+  GridRow() {
+    GridCol({ order: 5 }) {
+      Row() {
+        Text("1")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Red)
+    GridCol({ order: 4 }) {
+      Row() {
+        Text("2")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Orange)
+    GridCol({ order: 3 }) {
+      Row() {
+        Text("3")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Yellow)
+    GridCol({ order: 2 }) {
+      Row() {
+        Text("4")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Green)
+  }            
+  ```
+
+  ![](figures/order1.png)
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。
+
+  ```ts
+  GridRow() {
+    GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
+      Row() {
+        Text("1")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Red)
+    GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
+      Row() {
+        Text("2")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Orange)
+    GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
+      Row() {
+        Text("3")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Yellow)
+    GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
+      Row() {
+        Text("4")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Green)
+  } 
+  ```
+
+  ![](figures/order2.gif)
+
+

zh-cn/application-dev/ui/ui-ts-layout-grid-container.md

 # 栅格布局
 
-
 栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
 
-
 1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
 2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
 
-为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
+为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性[useSizeType](../reference/arkui-ts/ts-container-grid.md)来实现栅格布局。
 
 ## 栅格系统
 
 栅格系统有Column、Margin、Gutter三个概念。
 
-
-![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png)
-
+![zh-cn_image_0000001224173302](figures/zh-cn_image_0000001224173302.png)
 
 1. Gutter：
-   用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
+   元素之间的距离，决定了内容间的紧密程度。作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
 2. Margin：
-   离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。
+   内容距栅格容器边缘的距离，决定了内容可展示的总宽度。作为栅格布局的统一规范。
 3. Column:
    栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
 
-
 ### 系统栅格断点
 
-系统根据不同水平宽度设备对应Column的数量关系，形成了一套断点规则定义。
-
-系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(column)，边距（margin)，间隔(gutter)定义如下：
+栅格系统以设备的水平宽度（屏幕密度像素值，vp)作为断点依据，定义设备的宽度类型，设置栅格总列数，间隔，边距，形成了一套断点规则。
 
+不同设备水平宽度下，栅格系统默认总列数(columns)，边距（margin)，间隔(gutter)定义如下：
 
 | 设备水平宽度断点范围              | 设备宽度类型 | 描述        | columns | gutter | margin |
 | ----------------------- | ------ | --------- | ------- | ------ | ------ |
-| 0<水平宽度<320vp      | XS     | 最小宽度类型设备。 | 2       | 12vp   | 12vp   |
-| 320vp<=水平宽度<600vp | SM     | 小宽度类型设备。  | 4       | 24vp   | 24vp   |
-| 600vp<=水平宽度<840vp | MD     | 中等宽度类型设备。 | 8       | 24vp   | 32vp   |
-| 840<=水平分辨率           | LG     | 大宽度类型设备。  | 12      | 24vp   | 48vp   |
+| 0< 水平宽度< 320vp      | XS     | 最小宽度类型设备。 | 2       | 12vp   | 12vp   |
+| 320vp< =水平宽度< 600vp | SM     | 小宽度类型设备。  | 4       | 24vp   | 24vp   |
+| 600vp< =水平宽度< 840vp | MD     | 中等宽度类型设备。 | 8       | 24vp   | 32vp   |
+| 840< =水平分辨率           | LG     | 大宽度类型设备。  | 12      | 24vp   | 48vp   |
 
-## 如何使用
+> **说明：**
+>  
+> ArkUI在API9对栅格组件做了重构，推出新的栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)，API9推荐使用新的栅格组件，参考[新栅格组件用法](ui-ts-layout-grid-container-new.md)
+>
 
-首先创建栅格容器组件，定义栅格布局，然后给栅格容器内的组件设置不同设备宽度类型下的占用列数。
+## GridContainer栅格组件使用
 
-### 创建栅格容器
+首先使用栅格容器组件创建栅格布局。
 
-通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
+### 栅格容器创建与设置
 
-- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
+通过接口 `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` 创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
 
-  ```ts
-  GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
-  ```
+通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
 
-  栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
 
-  ```ts
-  GridContainer() {}
-  ```
+```ts
+GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
+```
+
+栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如：
+
+```ts
+GridContainer() {}
+```
+
+```ts
+GridContainer({ sizeType: SizeType.Auto })
+```
+
+上述例子中，默认在小宽度类型设备(SizeType. SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType. MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
 
-  上述例子中，默认在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
+也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
 
-- 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
   
-  ```ts
+
+```ts
   GridContainer({ sizeType: SizeType.SM }) {
        Row() {
          Text('1')
@@ -78,9 +84,9 @@
     }
   ```
 
-  上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
+  上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType. SM类型的栅格设置, 即占用3列，放置在第1列。
 
-### 栅格容器内子组件的栅格设置
+### 子组件的栅格设置
 
 栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offset表示列偏移量，指将组件放置在哪一个columns上。 如：
 
@@ -97,13 +103,14 @@ GridContainer() {
    }
 }
 ```
-其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
+
+其中 `sm: { span: 2, offset: 0 } ` 指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
 
 ![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108719.png)
 
 ## 场景示例
 
-使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。  
+使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，不必写大量的代码兼容不同宽度类型的设备。  
 
 ```ts
 @Entry
@@ -144,11 +151,10 @@ struct GridContainerExample {
 }
 ```
 
-
-
-小宽度类型设备(SizeType.SM)运行效果：
+小宽度类型设备(SizeType. SM)运行效果：
 
 ![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108718.png)
 
-中等宽度类型设备(SizeType.MD)运行效果：
+中等宽度类型设备(SizeType. MD)运行效果：
+
 ![zh-cn_image_0000001262748569](figures/zh-cn_image_0000001262748569.png)

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

+# 网格布局
+
+网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的页面均分能力，子组件占比控制能力。
+通过[Grid](../reference/arkui-ts/ts-container-grid.md)容器组件和子组件[GridItem](../reference/arkui-ts/ts-container-griditem.md)实现，
+Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。优势如下：
+
+1. 容器组件尺寸发生变化时，所有子组件以及间距等比例调整，实现布局的自适应能力。
+2. 支持自定义网格布局行数和列数，以及每行每列尺寸占比。
+3. 支持设置网格布局中子组件的行列间距。
+4. 支持设置子组件横跨几行或者几列。
+ 
+
+
+## 容器组件Grid设置
+
+### 行列数量占比
+通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。
+
+下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算该列在网格布局宽度上的占比，最终决定该列的宽度。
+
+```ts
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '4']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
+```
+
+定义了四个等分的列，每列宽度相等。
+
+```ts
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '4']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('1fr 2fr 3fr 4fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
+```
+
+定义了四列，每列宽度比值为1:2:3:4。
+
+```ts
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('4fr 2fr 3fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
+```
+
+定义了三列，每列宽度比值为4:2:3。
+
+效果如下：
+
+![](figures/columnTemplate.png)
+
+### 排列方式
+
+通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。
+可选值包括Row，RowReverse， Column， ColumnReverse四种情况。
+效果如下：
+
+![](figures/gridlayout.png)
+
+### 行列间距
+
+columnsGap用于设置网格子组件GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距。
+
+```ts
+Grid()
+.columnsTemplate('1fr 1fr 1fr 1fr')
+.columnsGap(10)
+.rowsGap(20)
+```
+
+![](figures/columnGap.png)
+
+上图中，设置网格布局子组件间的垂直间距为20，水平间距为10。
+
+## 网格子组件GridItem设置
+
+### 设置子组件占的行列数
+
+网格布局的行列标号从1开始，依次编号。
+
+子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格。示例如下：
+
+```ts
+Grid() {
+    GridItem() {
+      Text('5')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.rowStart(2).rowEnd(3)  // 5子组件从第二列到第三列
+
+    GridItem() {
+      Text('4')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(4).columnEnd(5) // 4从第四列到第五列
+  
+    GridItem() {
+      Text('6')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(2).columnEnd(4)  // 6从第二列到第四列
+
+    GridItem() {
+      Text('9')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(3).columnEnd(4)    // 从第三列到第四列
+}
+.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+.rowsTemplate('1fr 1fr 1fr')
+.columnsGap(10)
+.rowsGap(20)
+.width('90%')
+.backgroundColor(0xF0F0F0)
+.height('200vp')
+.layoutDirection(GridDirection.Column)
+```
+
+![](figures/griditem.png)
+
+## 场景示例
+
+使用grid布局实现一个计算器的排布效果，代码如下：
+
+```ts
+@Entry
+@Component
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '.', '/']
+
+  @Styles textStyle(){
+    .backgroundColor(0xd0d0d0)
+    .width('100%')
+    .height('100%')
+    .borderRadius(5)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        GridItem() {
+          Text('0')
+            .fontSize(30)
+            .textStyle()
+        }.columnStart(1).columnEnd(4)
+
+        GridItem() {
+          Text('清空')
+            .fontSize(16)
+            .textAlign(TextAlign.Center)
+            .textStyle()
+        }.columnStart(1).columnEnd(2)
+
+        GridItem() {
+          Text('回退')
+            .fontSize(16)
+            .textAlign(TextAlign.Center)
+            .textStyle()
+        }.columnStart(3).columnEnd(4)
+
+        ForEach(this.Number, (day: string) => {
+          if (day === '0') {
+            GridItem() {
+              Text(day)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .textStyle()
+            }.columnStart(1).columnEnd(2)
+          } else {
+            GridItem() {
+              Text(day)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .textStyle()
+            }
+          }
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')
+      .columnsGap(10)
+      .rowsGap(15)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height('70%')
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+在大屏设备上展示效果如下：
+
+![](figures/gridExp1.png)
+
+在小屏设备下展示效果如下：
+
+![](figures/gridExp2.png)

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

+# 线性布局
+
+线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。
+
+通过线性容器[Row](../reference/arkui-ts/ts-container-row.md)和[Column](../reference/arkui-ts/ts-container-column.md)实现线性布局。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。
+
+## 线性布局的排列
+
+线性布局的排列方向由所选容器组件决定。根据不同的排列方向，选择使用Row或Column容器创建线性布局，通过调整space，alignItems，justifyContent属性调整子组件的间距，水平垂直方向的对齐方式。
+1. 通过space参数设置主轴（排列方向）上子组件的间距。达到各子组件在排列方向上的等间距效果。
+2. 通过alignItems属性设置子组件在交叉轴（排列方向的垂直方向）的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign)，水平方向取值为[HorizontalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)。
+3. 通过justifyContent属性设置子组件在主轴（排列方向）上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign)。
+
+具体使用以及效果如下表所示：
+
+|属性名|描述|Row效果图|Column效果图|
+|------|---------------------------|----------------------------|---------------------------|
+|space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子组件垂直方向间距|   ![](figures/rowspace.png)      |   ![](figures/columnspace.png) |
+|alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|![](figures/rowalign.png)            |![](figures/columnalign.png)|
+|justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |![](figures/rowjustify.png)            |![](figures/columnjustify.png)|
+
+## 自适应拉伸
+
+在线性布局下，常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。
+
+```ts
+@Entry
+@Component
+struct BlankExample {
+  build() {
+    Column() {
+      Row() {
+        Text('Bluetooth').fontSize(18)
+        Blank()
+        Toggle({ type: ToggleType.Switch, isOn: true })
+      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
+    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
+  }
+}
+```
+
+![](figures/blank.gif)
+
+## 自适应缩放
+
+自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现：
+
+1. 父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
+
+    ```ts
+    @Entry
+    @Component
+    struct layoutWeightExample {
+      build() {
+        Column() {
+          Text('1:2:3').width('100%')
+          Row() {
+            Column() {
+              Text('layoutWeight(1)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
+    
+            Column() {
+              Text('layoutWeight(2)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(4).backgroundColor(0xffed97).height('100%')
+    
+            Column() {
+              Text('layoutWeight(6)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(6).backgroundColor(0xffd306).height('100%')
+    
+          }.backgroundColor(0xffd306).height('30%')
+    
+          Text('2:5:3').width('100%')
+          Row() {
+            Column() {
+              Text('layoutWeight(2)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
+    
+            Column() {
+              Text('layoutWeight(5)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(5).backgroundColor(0xffed97).height('100%')
+    
+            Column() {
+              Text('layoutWeight(3)')
+                .textAlign(TextAlign.Center)
+            }.layoutWeight(3).backgroundColor(0xffd306).height('100%')
+          }.backgroundColor(0xffd306).height('30%')
+        }
+      }
+    }
+    ```
+
+   ![](figures/layoutWeight.gif)
+
+
+3. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。
+
+    ```ts
+    @Entry
+    @Component
+    struct WidthExample {
+      build() {
+        Column() {
+          Row() {
+            Column() {
+              Text('left width 20%')
+                .textAlign(TextAlign.Center)
+            }.width('20%').backgroundColor(0xffd306).height('100%')
+    
+            Column() {
+              Text('center width 50%')
+                .textAlign(TextAlign.Center)
+            }.width('50%').backgroundColor(0xffed97).height('100%')
+    
+            Column() {
+              Text('right width 30%')
+                .textAlign(TextAlign.Center)
+            }.width('30%').backgroundColor(0xffd306).height('100%')
+          }.backgroundColor(0xffd306).height('30%')
+        }
+      }
+    }
+    ```
+
+   ![](figures/width.gif)
+
+   上例中，在任意大小的设备中，子组件的宽度占比固定。
+
+## 定位能力
+- 相对定位
+
+  使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
+
+  ```ts
+  @Entry
+  @Component
+  struct OffsetExample {
+    @Styles eleStyle() {
+      .size({ width: 120, height: '50' })
+      .backgroundColor(0xbbb2cb)
+      .border({ width: 1 })
+    }
+  
+    build() {
+      Column({ space: 20 }) {
+        Row() {
+          Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          Text('2  offset(15, 30)')
+            .eleStyle()
+            .fontSize(16)
+            .align(Alignment.Start)
+            .offset({ x: 15, y: 30 })
+          Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          Text('4 offset(-10%, 20%)')
+            .eleStyle()
+            .fontSize(16)
+            .offset({ x: '-5%', y: '20%' })
+        }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed })
+      }
+      .width('100%')
+      .margin({ top: 25 })
+    }
+  } 
+   ```
+
+  ![](figures/offset.gif)
+
+
+- 绝对定位
+
+  线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
+
+  ```ts
+  @Entry
+  @Component
+  struct PositionExample {
+    @Styles eleStyle(){
+      .backgroundColor(0xbbb2cb)
+      .border({ width: 1 })
+      .size({ width: 120, height: 50 })
+    }
+  
+    build() {
+      Column({ space: 20 }) {
+        // 设置子组件左上角相对于父组件左上角的偏移位置
+        Row() {
+          Text('position(30, 10)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: 10, y: 10 })
+  
+          Text('position(50%, 70%)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: '50%', y: '70%' })
+  
+          Text('position(10%, 90%)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: '10%', y: '80%' })
+        }.width('90%').height('100%').border({ width: 1, style: BorderStyle.Dashed })
+      }
+      .width('90%').margin(25)
+    }
+  }
+  ```
+
+  ![](figures/position.gif)
+
+
+## 自适应延伸
+
+自适应延伸是在不同尺寸设备下，当页面显示内容个数不一并延伸到屏幕外时，可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。
+
+
+- List组件
+
+  List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
+
+
+  纵向List：
+  ```ts
+    @Entry
+    @Component
+    struct ListExample1 {
+      @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
+      @State alignListItem: ListItemAlign = ListItemAlign.Start
+    
+      build() {
+        Column() {
+          List({ space: 20, initialIndex: 0 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text('' + item)
+                  .width('100%')
+                  .height(100)
+                  .fontSize(16)
+                  .textAlign(TextAlign.Center)
+                  .borderRadius(10)
+                  .backgroundColor(0xFFFFFF)
+              }
+              .border({ width: 2, color: Color.Green })
+            }, item => item)
+          }
+          .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
+          .scrollBar(BarState.On) // 滚动条常驻
+          .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
+    
+        }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+      }
+    }
+  ```
+
+  ![](figures/listcolumn.gif)
+  
+
+  横向List：
+
+  ```ts
+    @Entry
+    @Component
+    struct ListExample2 {
+      @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
+      @State alignListItem: ListItemAlign = ListItemAlign.Start
+    
+      build() {
+        Column() {
+          List({ space: 20, initialIndex: 0 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text('' + item)
+                  .height('100%')
+                  .width(100)
+                  .fontSize(16)
+                  .textAlign(TextAlign.Center)
+                  .borderRadius(10)
+                  .backgroundColor(0xFFFFFF)
+              }
+              .border({ width: 2, color: Color.Green })
+            }, item => item)
+          }
+          .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
+          .scrollBar(BarState.On) // 滚动条常驻
+          .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
+          .listDirection(Axis.Horizontal)  // 列表水平排列
+        }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+      }
+    } 
+  ```
+  
+  ![](figures/listrow.gif)
+
+- Scroll组件
+
+  线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。在Column或者Row外层包裹一个可滚动的容器组件Scroll实现。
+
+  纵向Scroll:
+
+  ```ts
+  @Entry
+  @Component
+  struct ScrollExample {
+    scroller: Scroller = new Scroller();
+    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  
+    build() {
+      Scroll(this.scroller) {
+        Column() {
+          ForEach(this.arr, (item) => {
+            Text(item.toString())
+              .width('90%')
+              .height(150)
+              .backgroundColor(0xFFFFFF)
+              .borderRadius(15)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .margin({ top: 10 })
+          }, item => item)
+        }.width('100%')
+      }
+      .backgroundColor(0xDCDCDC)
+      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
+      .scrollBar(BarState.On) // 滚动条常驻显示
+      .scrollBarColor(Color.Gray) // 滚动条颜色
+      .scrollBarWidth(30) // 滚动条宽度
+      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
+    }
+  }
+  ```
+
+  ![](figures/scrollcolumn.gif)
+
+  横向Scroll:
+
+  ```ts
+  @Entry
+  @Component
+  struct ScrollExample {
+    scroller: Scroller = new Scroller();
+    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  
+    build() {
+      Scroll(this.scroller) {
+        Row() {
+          ForEach(this.arr, (item) => {
+            Text(item.toString())
+              .height('90%')
+              .width(150)
+              .backgroundColor(0xFFFFFF)
+              .borderRadius(15)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .margin({ left: 10 })
+          }, item => item)
+        }.height('100%')
+      }
+      .backgroundColor(0xDCDCDC)
+      .scrollable(ScrollDirection.Horizontal) // 滚动方向横向
+      .scrollBar(BarState.On) // 滚动条常驻显示
+      .scrollBarColor(Color.Gray) // 滚动条颜色
+      .scrollBarWidth(30) // 滚动条宽度
+      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
+    }
+  }
+  ```
+  ![](figures/scrollrow.gif)

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

 # 媒体查询
 
+[媒体查询（Media Query）](../reference/apis/js-apis-mediaquery.md)作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
 
-媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：
+1. 提供丰富的媒体特征监听能力，针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
 
+2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
 
-1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。
    
-2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。
 
+## 媒体查询引入与使用流程
 
-## 如何使用
+媒体查询通过媒体查询接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下：
 
-通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。
+首先导入媒体查询模块。
 
-首先导入媒体查询模块，例如：
-```
+```ts
 import mediaquery from '@ohos.mediaquery'
 ```
-然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如：
+
+通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。
+
 ```ts
 listener = mediaquery.matchMediaSync('(orientation: landscape)')
 ```
-最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如：
+
+给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。
+
 ```ts
 onPortrait(mediaQueryResult) {
     if (mediaQueryResult.matches) {
@@ -33,19 +37,25 @@ onPortrait(mediaQueryResult) {
 listener.on('change', onPortrait)
 ```
 
-## 媒体查询条件语法规则
+## 媒体查询条件
+
+媒体查询条件由媒体类型，逻辑操作符，媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用()包裹且可以有多个。具体规则如下：
+
+### 语法规则
+
 ```
 [media-type] [and|not|only] [(media-feature)]
 ```
+
 例如：
 
-`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立
+`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立。
 
-`(max-height: 800)` ：当高度小于800时条件成立
+`(max-height: 800)` ：当高度小于等于800时条件成立。
 
-`(height <= 800) ` ：当高度小于等于800时条件成立
+`(height <= 800) ` ：当高度小于等于800时条件成立。
 
-`screen and (device-type: tv) or (resolution < 2)` ：包含多个媒体特征的多条件复杂语句查询
+`screen and (device-type: tv) or (resolution < 2)` ：包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。
 
 ###  媒体类型(media-type)
 
@@ -53,32 +63,30 @@ listener.on('change', onPortrait)
 | ------ | -------------- |
 | screen | 按屏幕相关参数进行媒体查询。 |
 
+###  媒体逻辑操作(and|or|not|only)
 
-###  媒体逻辑操作(and|not|only)
-
-媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。
+媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来，详细解释说明如下表。
 
   **表1** 媒体逻辑操作符
 
 | 类型       | 说明                                       |
 | -------- | ---------------------------------------- |
-| and      | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
-| not      | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
-| only     | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
-| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-| or       | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+| and      | 将多个媒体特征（Media&nbsp; Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp; and&nbsp; (device-type:&nbsp; wearable)&nbsp; and&nbsp; (max-height:&nbsp; 600)&nbsp; 表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。 |
+| or       | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp; and&nbsp; (max-height:&nbsp; 1000)&nbsp; or&nbsp; （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+| not      | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。<br/>例如：not&nbsp; screen&nbsp; and&nbsp; (min-height:&nbsp; 50)&nbsp; and&nbsp; (max-height:&nbsp; 600)&nbsp; 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
+| only     | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp; and&nbsp; (min-height:&nbsp; 50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
+| , (comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp; and&nbsp; (min-height:&nbsp; 1000), &nbsp; &nbsp; （round-screen：true）&nbsp; 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
 
-在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt;=，&gt;=，&lt;，&gt;操作符。
+在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt; =，&gt; =，&lt; ，&gt; 操作符。
 
   **表2** 媒体逻辑范围操作符
 
 | 类型    | 说明                                       |
 | ----- | ---------------------------------------- |
-| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)。 |
-| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)。 |
-| &lt;  | 小于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)。 |
-| &gt;  | 大于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)。 |
-
+| &lt; = | 小于等于，例如：screen&nbsp; and&nbsp; (height&nbsp; &lt; =&nbsp; 50)。 |
+| &gt; = | 大于等于，例如：screen&nbsp; and&nbsp; (height&nbsp; &gt; =&nbsp; 600)。 |
+| &lt; | 小于，例如：screen&nbsp; and&nbsp; (height&nbsp; &lt; &nbsp; 50)。 |
+| &gt; | 大于，例如：screen&nbsp; and&nbsp; (height&nbsp; &gt; &nbsp; 600)。 |
 
 ### 媒体特征(media-feature)
 
@@ -90,36 +98,35 @@ listener.on('change', onPortrait)
 | width             | 应用页面显示区域的宽度。                             |
 | min-width         | 应用页面显示区域的最小宽度。                           |
 | max-width         | 应用页面显示区域的最大宽度。                           |
-| resolution        | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp;dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp;dpcm表示每厘米上的物理像素个数，1dpcm&nbsp;≈&nbsp;2.54dpi；<br/>-&nbsp;dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp;=&nbsp;96dpi。 |
+| resolution        | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：<br/>-&nbsp; dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；<br/>-&nbsp; dpcm表示每厘米上的物理像素个数，1dpcm&nbsp; ≈&nbsp; 2.54dpi；<br/>-&nbsp; dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx&nbsp; =&nbsp; 96dpi。 |
 | min-resolution    | 设备的最小分辨率。                                |
 | max-resolution    | 设备的最大分辨率。                                |
-| orientation       | 屏幕的方向。<br/>可选值：<br/>-&nbsp;orientation:&nbsp;portrait（设备竖屏）<br/>-&nbsp;orientation:&nbsp;landscape（设备横屏） |
+| orientation       | 屏幕的方向。<br/>可选值：<br/>-&nbsp; orientation:&nbsp; portrait（设备竖屏）<br/>-&nbsp; orientation:&nbsp; landscape（设备横屏） |
 | device-height     | 设备的高度。                                   |
 | min-device-height | 设备的最小高度。                                 |
 | max-device-height | 设备的最大高度。                                 |
 | device-width      | 设备的宽度。                                   |
 | min-device-width  | 设备的最小宽度。                                 |
 | max-device-width  | 设备的最大宽度。                                 |
-| round-screen      | 屏幕类型，圆形屏幕为true，&nbsp;非圆形屏幕为&nbsp;false。  |
+| round-screen      | 屏幕类型，圆形屏幕为true，&nbsp; 非圆形屏幕为&nbsp; false。  |
 | dark-mode         | 系统为深色模式时为true，否则为false。                  |
 
 ## 场景示例
 
-通过使用媒体查询实现当屏幕发生横竖屏切换，给页面文本应用不同的内容和样式。
+下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。
 
-  ```
-  import mediaquery from '@ohos.mediaquery'
-  let portraitFunc = null
+```ts
+import mediaquery from '@ohos.mediaquery'
+let portraitFunc = null
 
-  @Entry
-  @Component
-  struct MediaQueryExample {
-    @State color: string = '#DB7093'
-    @State text: string = 'Portrait'
-    @State fontSize: number = 24
-    listener = mediaquery.matchMediaSync('(orientation: landscape)')
+@Entry
+@Component
+struct MediaQueryExample {
+@State color: string = '#DB7093'
+@State text: string = 'Portrait'
+listener = mediaquery.matchMediaSync('(orientation: landscape)')  // 当设备横屏时条件成立
 
-    onPortrait(mediaQueryResult) {
+onPortrait(mediaQueryResult) {
   if (mediaQueryResult.matches) {
     this.color = '#FFD700'
     this.text = 'Landscape'
@@ -127,21 +134,22 @@ listener.on('change', onPortrait)
     this.color = '#DB7093'
     this.text = 'Portrait'
   }
-    }
+}
 
-    aboutToAppear() {
-      portraitFunc = this.onPortrait.bind(this) //绑定当前应用实例
+aboutToAppear() {
+  portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
   this.listener.on('change', portraitFunc)  
-    }
+}
 
-    build() {
+build() {
   Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
     Text(this.text).fontSize(50).fontColor(this.color)
   }
   .width('100%').height('100%')
-    }
-  }
-  ```
+}
+}
+```
+
 横屏下文本内容为Landscape，颜色为#FFD700。
 
 ![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png)
@@ -152,7 +160,7 @@ listener.on('change', onPortrait)
 
 ## 相关实例
 
-针对媒体查询开发，有以下相关实例可供参考：
+使用媒体查询的自适应布局开发，有以下相关实例可供参考：
 
 - [`MediaQuery`：媒体查询（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery)
 

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

+# 层叠布局
+
+层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
+通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。
+
+## 对齐方式
+
+设置子元素在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式，如下表所示：
+
+|名称|    描述| 图示 |
+|---|	---|---|
+|TopStart|    顶部起始端 |![](figures/stacktopstart.png)|
+Top    |顶部横向居中 |![](figures/stacktop.png)|
+TopEnd|    顶部尾端 |![](figures/stacktopend.png)|
+Start|    起始端纵向居中 |![](figures/stackstart.png)|
+Center|    横向和纵向居中 |![](figures/stackcenter.png)|
+End|    尾端纵向居中 |![](figures/stackend.png)|
+BottomStart    |底部起始端 |![](figures/stackbottomstart.png)|
+Bottom|    底部横向居中 |![](figures/stackbottom.png)|
+BottomEnd|    底部尾端 |![](figures/stackbottomend.png)|
+
+## Z序控制
+
+Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)
+属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。
+
+- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
+
+    ```ts
+    Stack({ alignContent: Alignment.BottomStart }) {
+        Column(){
+          Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
+        }.width(100).height(100).backgroundColor(0xffd306)
+        Column(){
+          Text('Stack子元素2').fontSize(20)
+        }.width(150).height(150).backgroundColor(Color.Pink)
+        Column(){
+          Text('Stack子元素3').fontSize(20)
+        }.width(200).height(200).backgroundColor(Color.Grey)
+    }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
+    ```
+
+  ![](figures/stack2.png)
+
+  上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏。改变子元素1，子元素2的zIndex属性后，可以将元素展示出来。
+
+    ```ts
+    Stack({ alignContent: Alignment.BottomStart }) {
+        Column(){
+          Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
+        }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
+        Column(){
+          Text('Stack子元素2').fontSize(20)
+        }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
+        Column(){
+          Text('Stack子元素3').fontSize(20)
+        }.width(200).height(200).backgroundColor(Color.Grey)
+    }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
+    ```
+  
+    ![](figures/stack1.png)