Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 5c4c46ae 编写于 作者: S sienna1128
浏览文件
操作

fix docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 0da2d5a9
展开全部 隐藏空白更改
内联 并排
Showing with 427 addition and 214 deletion
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
浏览文件 @ 5c4c46ae
# 栅格布局
栅格组件[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 @@
})
}
```
![](figures/columns1.png)
如上所示，栅格系统默认分成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 }){}
```
![](figures/gutter1.png)
上例中，子元素水平与垂直方向距离相邻元素的间距为10。
- 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
```ts
* 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
```ts
GridRow({ gutter: { x: 20, y: 50 } }){}
```
![](figures/gutter2.png)
![](figures/gutter2.png)
### 排布方向
通过GridRow的direction属性设置栅格子元素在栅格容器中的排列方向。
- 子元素默认从左往右排列。
```ts
* 子元素默认从左往右排列。
```ts
GridRow({ direction: GridRowDirection.Row }){}
```
![](figures/direction1.png)
- 子元素从右往左排列。
```ts
* 子元素从右往左排列。
```ts
GridRow({ direction: GridRowDirection.RowReverse }){}
```
![](figures/direction2.png)
### 栅格系统断点
断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
[栅格系统默认断点](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 @@
})
}
```
![](figures/breakpoints.gif)
![](figures/breakpoints.gif)
首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。
## 栅格子元素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)
})
}
```
```
![](figures/span1.png)
- 当类型为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
})
}
```
![](figures/span2.gif)
![](figures/span2.gif)
### 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)
})
}
```
```
![](figures/offset1.png)
栅格默认分成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
})
}
```
![](figures/offset2.gif)
### 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)
}
```
![](figures/order1.png)
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素排序次序设置。
* 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm, md, lg, xl, xxl）设备中子元素排序次序设置。
![](figures/order2.gif)
## 场景示例
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ 5c4c46ae
# 栅格布局
栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
......@@ -13,10 +12,8 @@
栅格系统有Column、Margin、Gutter三个概念。
![zh-cn_image_0000001224173302](figures/zh-cn_image_0000001224173302.png)
1. Gutter：
元素之间的距离，决定了内容间的紧密程度。作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
2. Margin：
......@@ -24,58 +21,61 @@
3. Column:
栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
### 系统栅格断点
栅格系统以设备的水平宽度（屏幕密度像素值，vp)作为断点依据，定义设备的宽度类型，设置栅格总列数，间隔，边距，形成了一套断点规则。
不同设备水平宽度下，栅格系统默认总列数(columns)，边距（margin)，间隔(gutter)定义如下：
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
| ----------------------- | ------ | --------- | ------- | ------ | ------ |
| 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
| 840&lt;=水平分辨率 | LG | 大宽度类型设备。 | 12 | 24vp | 48vp |
| 0&lt; 水平宽度&lt; 320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 320vp&lt; =水平宽度&lt; 600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 600vp&lt; =水平宽度&lt; 840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
| 840&lt; =水平分辨率 | 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列上。
![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108719.png)
......@@ -155,11 +156,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
浏览文件 @ 5c4c46ae
......@@ -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。
效果如下：
![](figures/columnTemplate.png)
### 排列方式
通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。
可选值包括Row，RowReverse， Column， ColumnReverse四种情况。
效果如下：
......@@ -40,24 +47,28 @@ Grid().columnsTemplate('4fr 2fr 3fr')
![](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() {
......@@ -97,12 +108,13 @@ Grid() {
.height('200vp')
.layoutDirection(GridDirection.Column)
```
![](figures/griditem.png)
![](figures/griditem.png)
## 场景示例
使用grid布局实现一个计算器的排布效果，代码如下：
```ts
@Entry
@Component
......@@ -168,10 +180,11 @@ struct GridExample {
}
}
```
在大屏设备上展示效果如下：
![](figures/gridExp1.png)
在小屏设备下展示效果如下：
![](figures/gridExp2.png)
\ No newline at end of file
![](figures/gridExp2.png)
zh-cn/application-dev/ui/ui-ts-layout-linear.md
浏览文件 @ 5c4c46ae
......@@ -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 |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子元素垂直方向间距| ![](figures/rowspace.png) | ![](figures/columnspace.png)|
|alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式| ![](figures/rowalign.png) |![](figures/columnalign.png) |
|justifyContent |容器排列方向上，子组件在父容器中的对齐方式 | ![](figures/rowjustify.png) |![](figures/columnjustify.png)|
|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
......@@ -40,13 +53,14 @@ struct BlankExample {
![](figures/blank.gif)
## 自适应缩放
自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现：
1. 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
```ts
```ts
@Entry
@Component
struct layoutWeightExample {
......@@ -94,11 +108,13 @@ struct BlankExample {
}
}
```
![](figures/layoutWeight.gif)
![](figures/layoutWeight.gif)
2. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。
```ts
```ts
@Entry
@Component
struct WidthExample {
......@@ -124,16 +140,19 @@ struct BlankExample {
}
}
```
![](figures/width.gif)
上例中，在任意大小的设备中，子组件的宽度占比固定。
## 定位能力
- **绝对定位**
* **绝对定位**
线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
```ts
```ts
@Entry
@Component
struct PositionExample {
......@@ -167,11 +186,14 @@ struct BlankExample {
}
}
```
![](figures/position.gif)
- 相对定位
* 相对定位
使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
```ts
```ts
@Entry
@Component
struct OffsetExample {
......@@ -202,14 +224,17 @@ struct BlankExample {
}
}
```
![](figures/offset.gif)
![](figures/offset.gif)
## 自适应延伸
自适应延伸，顾名思义，在不同尺寸设备下，显示内容个数不一，并延伸到屏幕外，通过滚动条拖动展示。适用于线性布局中内容一屏无法展示情景。常见下面两类实现方法。
- List组件
* List组件
List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
```ts
```ts
@Entry
@Component
struct ListExample1 {
......@@ -240,8 +265,11 @@ struct BlankExample {
}
}
```
![](figures/listcolumn.gif)
```ts
```ts
@Entry
@Component
struct ListExample2 {
......@@ -272,12 +300,15 @@ struct BlankExample {
}
}
```
![](figures/listrow.gif)
- Scroll组件
* Scroll组件
线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll，
```ts
```ts
@Entry
@Component
struct ScrollExample {
......@@ -308,8 +339,11 @@ struct BlankExample {
}
}
```
![](figures/scrollrow.gif)
```ts
```ts
@Entry
@Component
struct ScrollExample {
......@@ -340,9 +374,5 @@ struct BlankExample {
}
}
```
![](figures/scrollcolumn.gif)
![](figures/scrollcolumn.gif)
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 5c4c46ae
# 媒体查询
媒体查询（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&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个像素单位或者设备屏幕是圆形时，条件成立。 |
| 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;(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)。 |
| &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)
......@@ -96,24 +98,26 @@ 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
......@@ -147,6 +151,7 @@ listener.on('change', onPortrait)
}
}
```
横屏下文本内容为Landscape，颜色为#FFD700。
![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png)
......@@ -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)
zh-cn/application-dev/ui/ui-ts-layout-stack.md
浏览文件 @ 5c4c46ae
# 层叠布局
层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素,提供元素可以重叠的框架布局。
层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素, 提供元素可以重叠的框架布局。
通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子组件依次入栈，后一个子组件覆盖前一个子组件显示。
## 对齐方式
......@@ -24,8 +24,10 @@ BottomEnd| 底部尾端 |![](figures/stackbottomend.png)|
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)
```
![](figures/stack2.png)
上图中，最后的子元素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)
```
![](figures/stack1.png)
-
通过Z序控制实现了显示效果。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或