diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
index 6b53c7f84784d8e58a296e11b916adf5751cae7f..7b3a92bb3925c967c31f5ba09f721c5249f9bddb 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
@@ -3,12 +3,12 @@
弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。
开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局。
-
## 创建弹性布局
+
接口的调用形式如下：
-`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
+ `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
通过参数direction定义弹性布局的布局方向，justifyContent定义子组件在弹性布局方向上的对齐方式， alignContent定义子组件在与布局方向垂直的方向上的对齐方式，wrap定义内容超过一行时是否换行。
@@ -16,9 +16,11 @@
弹性布局有两个方向，子组件排列的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
-- FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
+* FlexDirection. Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
- ```ts
+
+
+```ts
Flex({ direction: FlexDirection.Row }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
@@ -30,11 +32,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection.Row相反的方向开始排布。
+* FlexDirection. RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。
+
+
- ```ts
+```ts
Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
@@ -46,11 +52,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
+* FlexDirection. Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
+
+
- ```ts
+```ts
Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
@@ -62,11 +72,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
+
+* FlexDirection. ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。
-- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection.Column相反的方向开始排布。
+
- ```ts
+```ts
Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
@@ -78,15 +92,19 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
## 弹性布局换行
+
默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有：
-- FlexWrap.NoWrap（默认值）: 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
+* FlexWrap. NoWrap（默认值）: 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
- ```ts
+
+
+```ts
Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
@@ -97,11 +115,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexWrap.Wrap：换行，每一行子元素按照主轴方向排列。
+* FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
- ```ts
+
+
+```ts
Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
@@ -112,11 +134,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexWrap.WrapReverse：换行，每一行子元素按照主轴反方向排列。
+* FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。
- ```ts
+
+
+```ts
Flex({ wrap: FlexWrap.WrapReverse}) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
@@ -127,8 +153,9 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
## 弹性布局对齐方式
@@ -136,9 +163,11 @@
可以通过justifyContent参数设置在主轴的对齐方式，可选值有：
-- FlexAlign.Start（默认值）: 子元素在主轴方向首端对齐, 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
+* FlexAlign. Start（默认值）: 子元素在主轴方向首端对齐, 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
- ```ts
+
+
+```ts
Flex({ justifyContent: FlexAlign.Start }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
@@ -148,11 +177,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexAlign.Center: 子元素在主轴方向居中对齐。
+* FlexAlign. Center: 子元素在主轴方向居中对齐。
- ```ts
+
+
+```ts
Flex({ justifyContent: FlexAlign.Center }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
@@ -163,11 +196,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
+
+* FlexAlign. End: 子元素在主轴方向尾部对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
-- FlexAlign.End: 子元素在主轴方向尾部对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
+
- ```ts
+```ts
Flex({ justifyContent: FlexAlign.End }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
@@ -178,11 +215,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
-- FlexAlign.SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
+
- ```ts
+* FlexAlign. SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
+
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
@@ -193,11 +234,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexAlign.SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。 第一个子元素到行首的距离和最后一个子元素到行尾的距离是相邻元素之间距离的一半。
+* FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。 第一个子元素到行首的距离和最后一个子元素到行尾的距离是相邻元素之间距离的一半。
- ```ts
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
@@ -208,11 +253,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- FlexAlign.SpaceEvenly: Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与行首的间距、最后一个子元素到行尾的间距均相等。
+* FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与行首的间距、最后一个子元素到行尾的间距均相等。
+
+
- ```ts
+```ts
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
@@ -223,16 +272,20 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
### 交叉轴对齐
+
#### 容器组件设置交叉轴对齐
可以通过flex组件的alignItems参数设置子元素在交叉轴的对齐方式，可选值有：
-- ItemAlign.Auto: 使用Flex容器中默认配置。
+* ItemAlign. Auto: 使用Flex容器中默认配置。
+
+
- ```ts
+```ts
Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -243,11 +296,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- ItemAlign.Start: 交叉轴方向首部对齐。
+* ItemAlign. Start: 交叉轴方向首部对齐。
- ```ts
+
+
+```ts
Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -258,11 +315,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
-- ItemAlign.Center: 交叉轴方向居中对齐。
+
- ```ts
+* ItemAlign. Center: 交叉轴方向居中对齐。
+
+
+
+```ts
Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -273,11 +334,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- ItemAlign.End：交叉轴方向底部对齐。
+* ItemAlign. End：交叉轴方向底部对齐。
- ```ts
+
+
+```ts
Flex({ alignItems: ItemAlign.End }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -288,11 +353,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
-- ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
+* ItemAlign. Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
- ```ts
+
+
+```ts
Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -303,11 +372,15 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
+
+
+* ItemAlign. Baseline：交叉轴方向文本基线对齐。
-- ItemAlign.Baseline：交叉轴方向文本基线对齐。
+
- ```ts
+```ts
Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
@@ -318,8 +391,9 @@
.backgroundColor(0xAFEEEE)
```
- 
+
+
#### 子组件设置交叉轴对齐
@@ -354,9 +428,12 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：
-- FlexAlign.Start: 子元素各行与交叉轴起点对齐。
+* FlexAlign. Start: 子元素各行与交叉轴起点对齐。
+
+
+
+```
- ```
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -368,12 +445,17 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
+
+
- 
-- FlexAlign.Center: 子元素各行在交叉轴方向居中对齐。
+
+
+* FlexAlign. Center: 子元素各行在交叉轴方向居中对齐。
+
+
- ```ts
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -385,10 +467,16 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
- 
-- FlexAlign.End: 子元素各行与交叉轴终点对齐。
- ```ts
+
+
+
+
+* FlexAlign. End: 子元素各行与交叉轴终点对齐。
+
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -400,10 +488,16 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
- 
-- FlexAlign.SpaceBetween: 子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
- ```ts
+
+
+
+
+* FlexAlign. SpaceBetween: 子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
+
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -415,11 +509,16 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
- 
-- FlexAlign.SpaceAround: 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
+
+
+
+
+* FlexAlign. SpaceAround: 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
- ```ts
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -431,12 +530,17 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
+
- 
+
+
+
-- FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
+* FlexAlign. SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
- ```ts
+
+
+```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
@@ -448,13 +552,17 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
.height(100)
.backgroundColor(0xAFEEEE)
```
+
+
- 
+
## 弹性布局的自适应拉伸
+
在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其再父容器的占比，达到自适应布局能力。
1. flexBasis: 设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height的值。
+
```ts
Flex() {
Text('flexBasis("auto")')
@@ -467,7 +575,6 @@ Flex() {
.height(100)
.backgroundColor(0xD2B48C)
-
Text('flexBasis(100)') // 未设置width以及flexBasis值为100，宽度为100vp
.flexBasis(100)
.height(100)
@@ -480,9 +587,11 @@ Flex() {
.backgroundColor(0xD2B48C)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
```
+
2. flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。
+
```ts
Flex() {
Text('flexGrow(1)')
@@ -506,10 +615,11 @@ Flex() {
-上图中，父容器宽度400vp,三个子元素原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与“瓜分”。
+上图中，父容器宽度400vp, 三个子元素原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与“瓜分”。
第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。
3. flexShrink: 当父容器空间不足时，子元素的压缩比例。
+
```ts
Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(3)')
@@ -530,8 +640,8 @@ Flex({ direction: FlexDirection.Row }) {
.backgroundColor(0xF5DEB3)
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
```
-
+
## 场景示例
@@ -558,14 +668,12 @@ struct FlexExample {
}
```
-
-
## 相关实例
针对弹性布局开发，有以下相关实例可供参考：
-- [弹性布局（eTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
+* [弹性布局（eTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)
-- [ArkUI常用布局容器对齐方式（eTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo)
+* [ArkUI常用布局容器对齐方式（eTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo)
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
index 102cb73a2ea9d5480c5bda56a3248a2982ac3258..eda5f0127e04251350835a9d9ea4d37fb7796252 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
@@ -1,16 +1,20 @@
# 栅格布局
+
栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)
相对于GridContainer提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。GridCol作为栅格子组件使用。
-
-
## 栅格容器GridRow
+
栅格布局的栅格特性由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。
+
### 栅格布局的总列数
+
栅格布局的主要定位工具，设置栅格布局的总列数。
-- 当类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
- ```ts
+* 当类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
+
+
+```ts
GridRow({}) {
ForEach(this.bgColors, (color, index) => {
GridCol() {
@@ -23,52 +27,70 @@
})
}
```
+
如上所示，栅格系统默认分成12列，每一个子元素占2列，前6个子元素在第一排。
-- 当类型为GridRowColumnOption时，支持六种不同尺寸（xs,sm,md,lg,xl,xxl）设备的总列数设置，各个尺寸下数值可不同。
- ```ts
+* 当类型为GridRowColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
+
+
+```ts
columns: {sm: 8, md: 10}
```
- 如上，若只设置sm,md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里详单与设置了，xs:12,sm:8,md:10,lg:10,xl:10,xxl:10。
+
+ 如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里详单与设置了，xs:12, sm:8, md:10, lg:10, xl:10, xxl:10。
### 栅格子元素间距
+
通过GridRow的gutter属性设置元素之间的距离，决定了内容间的紧密程度。
-- 当类型为number时，同时设置栅格子元素间的水平垂直边距且相等。
- ```ts
+* 当类型为number时，同时设置栅格子元素间的水平垂直边距且相等。
+
+
+```ts
GridRow({ gutter: 10 }){}
```
+
上例中，子元素水平与垂直方向距离相邻元素的间距为10。
-- 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
- ```ts
+* 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
+
+
+```ts
GridRow({ gutter: { x: 20, y: 50 } }){}
```
- 
+ 
### 排布方向
+
通过GridRow的direction属性设置栅格子元素在栅格容器中的排列方向。
-- 子元素默认从左往右排列。
- ```ts
+* 子元素默认从左往右排列。
+
+
+```ts
GridRow({ direction: GridRowDirection.Row }){}
```
+
-- 子元素从右往左排列。
- ```ts
+* 子元素从右往左排列。
+
+
+```ts
GridRow({ direction: GridRowDirection.RowReverse }){}
```
+
### 栅格系统断点
+
断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
[栅格系统默认断点](ui-ts-layout-grid-container.md#系统栅格断点)将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
@@ -79,22 +101,30 @@
| md | [520, 840) |
| lg | [840, +∞) |
-在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl,xxl两个断点。
+在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl, xxl两个断点。
+
+* 针对断点位置，开发者可以根据实际使用场景，通过一个单调递增数组设置，例如：
+
-- 针对断点位置，开发者可以根据实际使用场景，通过一个单调递增数组设置，例如：
- ```ts
+```ts
breakpoints: {value: ["100vp", "200vp"]}
```
+
表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。
- ```ts
+
+
+```ts
breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
```
+
表示启用xs、sm、md、lg、xl共5个断点，breakpoints最多支持六个断点，断点范围数量value数组值的个数最多为5。
-- 设置以窗口或者容器为断点切换参考物，实现栅格系统监听对象设置。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
+* 设置以窗口或者容器为断点切换参考物，实现栅格系统监听对象设置。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
breakpoints示例如下：
- ```ts
+
+
+```ts
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
@@ -120,43 +150,57 @@
})
}
```
- 
+ 
首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。
## 栅格子元素GridCol
+
GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order三个概念。
通过给GridCol传参或者设置属性两种方式设置span，offset，order的值。
-- span的设置
- ```ts
+* 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
+
+* 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
+
+* 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
+* 当类型为number时，子元素在所有尺寸设备下占用的列数相同。
+
+
+```ts
GridRow({ columns: 8 }) {
ForEach(this.bgColors, (color, index) => {
GridCol({ span: 2 }) {
@@ -167,12 +211,14 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
.backgroundColor(color)
})
}
- ```
+ ```
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
- ```ts
+
+
+```ts
GridRow({ columns: 8 }) {
ForEach(this.bgColors, (color, index) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
@@ -184,13 +230,16 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
})
}
```
- 
+ 
### offset
+
栅格子元素相对于前一个子元素的偏移列数，默认为0。
-- 当类型为number时，子元素偏移相同列数。
- ```ts
+* 当类型为number时，子元素偏移相同列数。
+
+
+```ts
GridRow() {
ForEach(this.bgColors, (color, index) => {
GridCol({ offset: 2 }) {
@@ -201,13 +250,15 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
.backgroundColor(color)
})
}
- ```
+ ```
栅格默认分成12列，每一个子元素默认占1列，偏移2列，每个子元素及间距共占3列，一行放四个子元素。
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
- ```ts
+
+
+```ts
GridRow() {
ForEach(this.bgColors, (color, index) => {
GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
@@ -219,12 +270,15 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
})
}
```
+
### order
- 栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order,子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
+
+ 栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。
-- 当类型为number时，子元素在任何尺寸下排序次序一致。
+* 当类型为number时，子元素在任何尺寸下排序次序一致。
+
```ts
GridRow() {
GridCol({ order: 5 }) {
@@ -249,11 +303,10 @@ GridRow() {
}.backgroundColor(Color.Green)
}
```
+
-- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素排序次序设置。
+* 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm, md, lg, xl, xxl）设备中子元素排序次序设置。
-
-
## 场景示例
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
index b2060de9630aa8e89f6987c297bc401e0de68681..c588867f80d8f6fefbca0673e65b0cb879092f93 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
@@ -1,6 +1,5 @@
# 栅格布局
-
栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
@@ -13,10 +12,8 @@
栅格系统有Column、Margin、Gutter三个概念。
-
-
1. Gutter：
元素之间的距离，决定了内容间的紧密程度。作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
2. Margin：
@@ -24,58 +21,61 @@
3. Column:
栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
-
### 系统栅格断点
栅格系统以设备的水平宽度（屏幕密度像素值，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})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
+通过接口 `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` 创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
-- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
+* 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
- ```ts
+
+
+```ts
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
```
- 栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
+ 栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如：
- ```ts
+
+
+```ts
GridContainer() {}
```
- ```ts
+
+
+```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')
@@ -89,7 +89,7 @@
}
```
- 上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置,即占用3列，放置在第1列。
+ 上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType. SM类型的栅格设置, 即占用3列，放置在第1列。
### 栅格容器内子组件的栅格设置
@@ -108,7 +108,8 @@ GridContainer() {
}
}
```
-其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
+
+其中 `sm: { span: 2, offset: 0 } ` 指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
@@ -155,11 +156,10 @@ struct GridContainerExample {
}
```
-
-
-小宽度类型设备(SizeType.SM)运行效果：
+小宽度类型设备(SizeType. SM)运行效果：
-中等宽度类型设备(SizeType.MD)运行效果：
+中等宽度类型设备(SizeType. MD)运行效果：
+
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid.md b/zh-cn/application-dev/ui/ui-ts-layout-grid.md
index 198b9a48a0b365da4756ce87397c112c574a5b69..5d0507c056d3b4e7efbd6a37b4f4bccdfbdc6e1b 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid.md
@@ -9,30 +9,37 @@
4. 支持设置子组件横跨几行或者几列。
网格布局中Grid组件作为容器组件，用于设置网格布局相关参数。GridItem作为Grid的子组件使用，定义子组件相关特征。
+
## 容器组件Grid设置
+
### 行列数量占比
通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。
下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算该列在网格布局宽度上的占比，最终决定该列的宽度。
+
```ts
Grid().columnsTemplate('1fr 1fr 1fr 1fr')
```
+
定义了四个等分的列，每列宽度相等。
+
```ts
Grid().columnsTemplate('1fr 2fr 3fr 4fr')
```
+
定义了四列，每列宽度比值为1:2:3:4。
+
```ts
Grid().columnsTemplate('4fr 2fr 3fr')
```
+
定义了三列，每列宽度比值为4:2:3。
效果如下：
-
-
### 排列方式
+
通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。
可选值包括Row，RowReverse， Column， ColumnReverse四种情况。
效果如下：
@@ -40,24 +47,28 @@ Grid().columnsTemplate('4fr 2fr 3fr')
### 行列间距
+
columnsGap用于设置网格子元素GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距。
+
```ts
Grid()
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(20)
```
+
上图中，设置网格布局子组件间的垂直间距为20，水平间距为10。
-
## 网格子组件GridItem设置
### 设置子组件占的行列数
+
网格布局的行列标号从1开始，依次编号。
子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子元素只占一个网格。示例如下：
+
```ts
Grid() {
GridItem() {
@@ -97,12 +108,13 @@ Grid() {
.height('200vp')
.layoutDirection(GridDirection.Column)
```
-
-
+
## 场景示例
+
使用grid布局实现一个计算器的排布效果，代码如下：
+
```ts
@Entry
@Component
@@ -168,10 +180,11 @@ struct GridExample {
}
}
```
+
在大屏设备上展示效果如下：
在小屏设备下展示效果如下：
-
\ No newline at end of file
+
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-linear.md b/zh-cn/application-dev/ui/ui-ts-layout-linear.md
index 32b10b3b4f2ee5d301389e804e924496fbd32fe3..4484767aa9e10e9b723d7a240a708da14904b924 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-linear.md
@@ -2,10 +2,10 @@
线性布局(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)。
@@ -15,11 +15,24 @@
|属性名|描述|Row效果图|Column效果图|
|------|---------------------------|----------------------------|---------------------------|
- |space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子元素垂直方向间距|  | |
- |alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|  | |
- |justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |  ||
+ |space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子元素垂直方向间距|
+
+ | 
+
+|
+ |alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|
+
+ |
+
+ |
+ |justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |
+
+ |
+
+|
## 自适应拉伸
+
在线性布局下，常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。
```ts
@@ -40,13 +53,14 @@ struct BlankExample {
-
## 自适应缩放
自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现：
1. 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
- ```ts
+
+
+```ts
@Entry
@Component
struct layoutWeightExample {
@@ -94,11 +108,13 @@ struct BlankExample {
}
}
```
- 
+ 
2. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。
- ```ts
+
+
+```ts
@Entry
@Component
struct WidthExample {
@@ -124,16 +140,19 @@ struct BlankExample {
}
}
```
+
上例中，在任意大小的设备中，子组件的宽度占比固定。
-
## 定位能力
-- **绝对定位**
+
+* **绝对定位**
线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
- ```ts
+
+
+```ts
@Entry
@Component
struct PositionExample {
@@ -167,11 +186,14 @@ struct BlankExample {
}
}
```
+
-- 相对定位
+* 相对定位
使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
- ```ts
+
+
+```ts
@Entry
@Component
struct OffsetExample {
@@ -202,14 +224,17 @@ struct BlankExample {
}
}
```
- 
+ 
## 自适应延伸
+
自适应延伸，顾名思义，在不同尺寸设备下，显示内容个数不一，并延伸到屏幕外，通过滚动条拖动展示。适用于线性布局中内容一屏无法展示情景。常见下面两类实现方法。
-- List组件
+* List组件
List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
- ```ts
+
+
+```ts
@Entry
@Component
struct ListExample1 {
@@ -240,8 +265,11 @@ struct BlankExample {
}
}
```
+
- ```ts
+
+
+```ts
@Entry
@Component
struct ListExample2 {
@@ -272,12 +300,15 @@ struct BlankExample {
}
}
```
+
-- Scroll组件
+* Scroll组件
线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll，
- ```ts
+
+
+```ts
@Entry
@Component
struct ScrollExample {
@@ -308,8 +339,11 @@ struct BlankExample {
}
}
```
+
- ```ts
+
+
+```ts
@Entry
@Component
struct ScrollExample {
@@ -340,9 +374,5 @@ struct BlankExample {
}
}
```
- 
-
-
-
-
+ 
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
index afd3a97ffd9e395a748a235fb584acb19dcc705a..b355d6a7195199dc2183e4eddd7afa7fee32b864 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
@@ -1,14 +1,11 @@
# 媒体查询
-
媒体查询（Media Query）作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
-
1. 提供丰富的媒体特征监听能力，针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
-
## 媒体查询引入与使用流程
@@ -16,14 +13,19 @@
通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下：
首先导入媒体查询模块，例如：
+
```ts
import mediaquery from '@ohos.mediaquery'
```
+
然后通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener，例如：
+
```ts
listener = mediaquery.matchMediaSync('(orientation: landscape)')
```
+
给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑，例如：
+
```ts
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
@@ -36,12 +38,15 @@ listener.on('change', onPortrait)
```
## 媒体查询条件
+
媒体查询条件由媒体类型，逻辑操作符，媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用()包裹且可以有多个。具体规则如下：
### 语法规则
+
```
[media-type] [and|not|only] [(media-feature)]
```
+
例如：
`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立。
@@ -58,33 +63,30 @@ listener.on('change', onPortrait)
| ------ | -------------- |
| screen | 按屏幕相关参数进行媒体查询。 |
-
### 媒体逻辑操作(and|or|not|only)
-媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。
+媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来，详细解释说明如下表。
**表1** 媒体逻辑操作符
| 类型 | 说明 |
| -------- | ---------------------------------------- |
-| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。 |
-| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
使用not运算符时必须指定媒体类型。 |
-| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体类型。 |
-| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-
+| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。 |
+| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
使用not运算符时必须指定媒体类型。 |
+| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体类型。 |
+| , (comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了<=，>=，<，>操作符。
+在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了< =，> =，< ，> 操作符。
**表2** 媒体逻辑范围操作符
| 类型 | 说明 |
| ----- | ---------------------------------------- |
-| <= | 小于等于，例如：screen and (height <= 50)。 |
-| >= | 大于等于，例如：screen and (height >= 600)。 |
-| < | 小于，例如：screen and (height < 50)。 |
-| > | 大于，例如：screen and (height > 600)。 |
-
+| < = | 小于等于，例如：screen and (height < = 50)。 |
+| > = | 大于等于，例如：screen and (height > = 600)。 |
+| < | 小于，例如：screen and (height < 50)。 |
+| > | 大于，例如：screen and (height > 600)。 |
### 媒体特征(media-feature)
@@ -96,24 +98,26 @@ listener.on('change', onPortrait)
| width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 |
-| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 |
+| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 |
| min-resolution | 设备的最小分辨率。 |
| max-resolution | 设备的最大分辨率。 |
-| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） |
+| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） |
| device-height | 设备的高度。 |
| min-device-height | 设备的最小高度。 |
| max-device-height | 设备的最大高度。 |
| device-width | 设备的宽度。 |
| min-device-width | 设备的最小宽度。 |
| max-device-width | 设备的最大宽度。 |
-| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 |
+| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 |
| dark-mode | 系统为深色模式时为true，否则为false。 |
## 场景示例
下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。
- ```
+
+
+```
import mediaquery from '@ohos.mediaquery'
let portraitFunc = null
@@ -147,6 +151,7 @@ listener.on('change', onPortrait)
}
}
```
+
横屏下文本内容为Landscape，颜色为#FFD700。
@@ -159,5 +164,4 @@ listener.on('change', onPortrait)
使用媒体查询的自适应布局开发，有以下相关实例可供参考：
-- [`MediaQuery`：媒体查询（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery)
-
+* [`MediaQuery`：媒体查询（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery)
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-stack.md b/zh-cn/application-dev/ui/ui-ts-layout-stack.md
index 7c73280571d6760ec3a3edd3e6df43b49668883f..dc26dffb5f62c3feb570dbcfea1558f5da62a1cf 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-stack.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-stack.md
@@ -1,6 +1,6 @@
# 层叠布局
-层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素,提供元素可以重叠的框架布局。
+层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素, 提供元素可以重叠的框架布局。
通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子组件依次入栈，后一个子组件覆盖前一个子组件显示。
## 对齐方式
@@ -24,8 +24,10 @@ BottomEnd| 底部尾端 ||
Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)
属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。
-- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
- ```ts
+* 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
+
+
+```ts
Stack({ alignContent: Alignment.BottomStart }) {
Column(){
Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
@@ -38,10 +40,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
}.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
```
+
上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏，可以通过改变前面元素的zIndex属性展示出来:
- ```ts
+
+
+```ts
Stack({ alignContent: Alignment.BottomStart }) {
Column(){
Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
@@ -54,7 +59,7 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
}.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
```
+
-
通过Z序控制实现了显示效果。
-