Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

提交 806f9096 编写于 作者: S sienna1128
浏览文件
操作

fix docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 5c4c46ae
隐藏空白更改
内联 并排
Showing with 152 addition and 149 deletion
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 806f9096
# 弹性布局
弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。
弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。
开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局。
## 创建弹性布局
- 容器
- 子组件
- 主轴
- 交叉轴
接口的调用形式如下：
## 创建弹性布局
`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
......@@ -14,7 +16,7 @@
## 弹性布局方向
弹性布局有两个方向，子组件排列的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
弹性布局的方向分为水平方向和垂直方向。子组件排列的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
* FlexDirection. Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
......@@ -100,7 +102,7 @@
默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有：
* FlexWrap. NoWrap（默认值）: 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
* FlexWrap. NoWrap（默认值）: 不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。
......@@ -119,7 +121,7 @@
![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
* FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
* FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。
......@@ -138,7 +140,7 @@
![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
* FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。
* FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。
......@@ -163,7 +165,7 @@
可以通过justifyContent参数设置在主轴的对齐方式，可选值有：
* FlexAlign. Start（默认值）: 子元素在主轴方向首端对齐, 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
* FlexAlign. Start（默认值）: 子组件在主轴方向首端对齐, 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。
......@@ -181,7 +183,7 @@
![zh-cn_image_0000001218259634](figures/mainStart.png)
* FlexAlign. Center: 子元素在主轴方向居中对齐。
* FlexAlign. Center: 子组件在主轴方向居中对齐。
......@@ -200,7 +202,7 @@
![zh-cn_image_0000001218579608](figures/mainCenter.png)
* FlexAlign. End: 子元素在主轴方向尾部对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
* FlexAlign. End: 子组件在主轴方向尾部对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。
......@@ -219,7 +221,7 @@
![zh-cn_image_0000001218739568](figures/mainEnd.png)
* FlexAlign. SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
* FlexAlign. SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
......@@ -238,7 +240,7 @@
![zh-cn_image_0000001263019461](figures/mainSpacebetween.png)
* FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。 第一个子元素到行首的距离和最后一个子元素到行尾的距离是相邻元素之间距离的一半。
* FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。 第一个子组件到行首的距离和最后一个子组件到行尾的距离是相邻元素之间距离的一半。
......@@ -257,7 +259,7 @@
![zh-cn_image_0000001263339461](figures/mainSpacearound.png)
* FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与行首的间距、最后一个子元素到行尾的间距均相等。
* FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与行首的间距、最后一个子组件到行尾的间距均相等。
......@@ -279,7 +281,7 @@
### 交叉轴对齐
#### 容器组件设置交叉轴对齐
可以通过flex组件的alignItems参数设置子元素在交叉轴的对齐方式，可选值有：
可以通过flex组件的alignItems参数设置子组件在交叉轴的对齐方式，可选值有：
* ItemAlign. Auto: 使用Flex容器中默认配置。
......@@ -426,9 +428,9 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
### 内容对齐
可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：
可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：
* FlexAlign. Start: 子元素各行与交叉轴起点对齐。
* FlexAlign. Start: 子组件各行与交叉轴起点对齐。
......@@ -451,7 +453,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
![crossStart.png](figures/crossStart.png)
* FlexAlign. Center: 子元素各行在交叉轴方向居中对齐。
* FlexAlign. Center: 子组件各行在交叉轴方向居中对齐。
......@@ -472,7 +474,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
![crossCenter.png](figures/crossCenter.png)
* FlexAlign. End: 子元素各行与交叉轴终点对齐。
* FlexAlign. End: 子组件各行与交叉轴终点对齐。
......@@ -493,7 +495,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
![crossEnd.png](figures/crossEnd.png)
* FlexAlign. SpaceBetween: 子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
* FlexAlign. SpaceBetween: 子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。
......@@ -514,7 +516,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
![crossSpacebetween.png](figures/crossSpacebetween.png)
* FlexAlign. SpaceAround: 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
* FlexAlign. SpaceAround: 子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
......@@ -536,7 +538,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
![crossSpacearound.png](figures/crossSpacearound.png)
* FlexAlign. SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
* FlexAlign. SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。
......@@ -615,10 +617,10 @@ Flex() {
![](figures/flexgrow.png)
上图中，父容器宽度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: 当父容器空间不足时，子元素的压缩比例。
3. flexShrink: 当父容器空间不足时，子组件的压缩比例。
```ts
Flex({ direction: FlexDirection.Row }) {
......@@ -645,7 +647,7 @@ Flex({ direction: FlexDirection.Row }) {
## 场景示例
使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，竖直方向上子元素居中的效果。示例如下：
使用弹性布局，可以实现子组件沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中的效果。示例如下：
```ts
@Entry
......@@ -674,6 +676,6 @@ 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)
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
浏览文件 @ 806f9096
# 栅格布局
栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)
相对于GridContainer提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。GridCol作为栅格子组件使用。
相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。GridCol作为栅格子组件使用。
## 栅格容器GridRow
栅格布局的栅格特性由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。
栅格布局的列数，间隔，排列方向和断点由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。
### 栅格布局的总列数
栅格布局的主要定位工具，设置栅格布局的总列数。
* 当类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
* 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
```ts
......@@ -19,8 +19,8 @@
ForEach(this.bgColors, (color, index) => {
GridCol() {
Row() {
Text("" + index)
}.width("100%").height("50vp")
Text(${index})
}.width("100%").height("50")
}
.backgroundColor(color)
.span(2)
......@@ -30,9 +30,9 @@
![](figures/columns1.png)
如上所示，栅格系统默认分成12列，每一个子元素占2列，前6个子元素在第一排。
如上所示，栅格系统默认分成12列，每一个子组件占2列，前6个子组件在第一排。
* 当类型为GridRowColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
* 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
```ts
......@@ -41,11 +41,11 @@
如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里详单与设置了，xs:12, sm:8, md:10, lg:10, xl:10, xxl:10。
### 栅格子元素间距
### 栅格子组件间距
通过GridRow的gutter属性设置元素之间的距离，决定了内容间的紧密程度。
GridRow的gutter属性设置元素之间的距离，决定内容间的紧密程度。
* 当类型为number时，同时设置栅格子元素间的水平垂直边距且相等。
* 当类型为number时，同时设置栅格子组件间的水平垂直边距且相等。
```ts
......@@ -54,9 +54,9 @@
![](figures/gutter1.png)
上例中，子元素水平与垂直方向距离相邻元素的间距为10。
上例中，子组件水平与垂直方向距离相邻元素的间距为10。
* 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
* 当类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
```ts
......@@ -65,11 +65,11 @@
![](figures/gutter2.png)
### 排布方向
### 排列方向
通过GridRow的direction属性设置栅格子元素在栅格容器中的排列方向。
通过GridRow的direction属性设置栅格子组件在栅格容器中的排列方向。
* 子元素默认从左往右排列。
* 子组件默认从左往右排列。
```ts
......@@ -79,7 +79,7 @@
![](figures/direction1.png)
* 子元素从右往左排列。
* 子组件从右往左排列。
```ts
......@@ -101,7 +101,7 @@
| md | [520, 840) |
| lg | [840, +∞) |
在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl, xxl两个断点。
在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点。
* 针对断点位置，开发者可以根据实际使用场景，通过一个单调递增数组设置，例如：
......@@ -143,7 +143,7 @@
}
}) {
Row() {
Text("" + index)
Text(${index})
}.width("100%").height("50vp")
}.backgroundColor(color)
......@@ -155,11 +155,10 @@
首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。
## 栅格子元素GridCol
## 栅格子组件GridCol
GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order三个概念。
GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。
通过给GridCol传参或者设置属性两种方式设置span，offset，order的值。
* span的设置
......@@ -195,9 +194,9 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
### span
子元素占栅格布局的列数，决定了子元素的宽度，默认为1。
子组件占栅格布局的列数，决定了子组件的宽度，默认为1。
* 当类型为number时，子元素在所有尺寸设备下占用的列数相同。
* 当类型为number时，子组件在所有尺寸设备下占用的列数相同。
```ts
......@@ -205,7 +204,7 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
ForEach(this.bgColors, (color, index) => {
GridCol({ span: 2 }) {
Row() {
Text("" + index)
Text(${index})
}.width("100%").height("50vp")
}
.backgroundColor(color)
......@@ -215,7 +214,7 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
![](figures/span1.png)
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
```ts
......@@ -223,7 +222,7 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
ForEach(this.bgColors, (color, index) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row() {
Text("" + index)
Text(${index})
}.width("100%").height("50vp")
}
.backgroundColor(color)
......@@ -235,8 +234,8 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
### offset
栅格子元素相对于前一个子元素的偏移列数，默认为0。
* 当类型为number时，子元素偏移相同列数。
栅格子组件相对于前一个子组件的偏移列数，默认为0。
* 当类型为number时，子组件偏移相同列数。
```ts
......@@ -253,9 +252,9 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
```
![](figures/offset1.png)
栅格默认分成12列，每一个子元素默认占1列，偏移2列，每个子元素及间距共占3列，一行放四个子元素。
栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
```ts
......@@ -277,7 +276,7 @@ GridCol组件作为GridRow组件的子组件使用。涉及span，offset，order
栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。
* 当类型为number时，子元素在任何尺寸下排序次序一致。
* 当类型为number时，子组件在任何尺寸下排序次序一致。
```ts
GridRow() {
......@@ -305,8 +304,8 @@ GridRow() {
```
![](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.md
浏览文件 @ 806f9096
# 网格布局
网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的布局均分能力，子元素占比控制能力。
通过容器组件[Grid](../reference/arkui-ts/ts-container-grid.md)组件和子组件[GridItem](../reference/arkui-ts/ts-container-griditem.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组件作为容器组件，用于设置网格布局相关参数。GridItem作为Grid的子组件使用，定义子组件相关特征。
## 容器组件Grid设置
### 行列数量占比
通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。
下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算该列在网格布局宽度上的占比，最终决定该列的宽度。
```ts
......@@ -48,7 +50,7 @@ Grid().columnsTemplate('4fr 2fr 3fr')
### 行列间距
columnsGap用于设置网格子元素GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距。
columnsGap用于设置网格子组件GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距。
```ts
Grid()
......@@ -67,7 +69,7 @@ Grid()
网格布局的行列标号从1开始，依次编号。
子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子元素只占一个网格。示例如下：
子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子组件只占一个网格。示例如下：
```ts
Grid() {
......@@ -76,7 +78,7 @@ Grid() {
.fontSize(16)
.textAlign(TextAlign.Center)
.textStyle()
}.rowStart(2).rowEnd(3) // 5子元素从第二列到第三列
}.rowStart(2).rowEnd(3) // 5子组件从第二列到第三列
GridItem() {
Text('4')
......
zh-cn/application-dev/ui/ui-ts-layout-linear.md
浏览文件 @ 806f9096
# 线性布局
线性布局(LinearLayout)是开发中最常用的布局。正如其名，线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。
线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。
通过线性容器[Row](../reference/arkui-ts/ts-container-row.md)和[Column](../reference/arkui-ts/ts-container-column.md)实现线性布局。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。
......@@ -15,7 +15,7 @@
|属性名|描述|Row效果图|Column效果图|
|------|---------------------------|----------------------------|---------------------------|
|space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子元素垂直方向间距|
|space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子组件垂直方向间距|
![](figures/rowspace.png) | ![](figures/columnspace.png)
......@@ -57,10 +57,10 @@ struct BlankExample {
自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现：
1. 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
1. 父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
```ts
```ts
@Entry
@Component
struct layoutWeightExample {
......@@ -102,12 +102,10 @@ struct BlankExample {
.textAlign(TextAlign.Center)
}.layoutWeight(3).backgroundColor(0xffd306).height('100%')
}.backgroundColor(0xffd306).height('30%')
}
}
}
```
```
![](figures/layoutWeight.gif)
......@@ -146,8 +144,46 @@ struct BlankExample {
上例中，在任意大小的设备中，子组件的宽度占比固定。
## 定位能力
* 相对定位
使用组件的[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），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
......@@ -188,49 +224,15 @@ struct BlankExample {
```
![](figures/position.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)
自适应延伸是在不同尺寸设备下，当页面显示内容个数不一并延伸到屏幕外时，可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。
## 自适应延伸
自适应延伸，顾名思义，在不同尺寸设备下，显示内容个数不一，并延伸到屏幕外，通过滚动条拖动展示。适用于线性布局中内容一屏无法展示情景。常见下面两类实现方法。
* List组件
List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ 806f9096
# 媒体查询
媒体查询（Media Query）作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
[媒体查询（Media Query）](../reference/apis/js-apis-mediaquery.md)作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
1. 提供丰富的媒体特征监听能力，针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
......@@ -12,7 +12,7 @@
通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下：
首先导入媒体查询模块，例如：
首先导入媒体查询模块。
```ts
import mediaquery from '@ohos.mediaquery'
......@@ -164,4 +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
浏览文件 @ 806f9096
# 层叠布局
层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素, 提供元素可以重叠的框架布局。
通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子组件依次入栈，后一个子组件覆盖前一个子组件显示。
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。
## 对齐方式
设置子组件在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式，如下表所示：
设置子元素在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式，如下表所示：
|名称| 描述| 图示 |
|---| ---|---|
......@@ -27,39 +27,37 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
* 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
```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的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏，可以通过改变前面元素的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(C olor.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)
```
```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)
-
通过Z序控制实现了显示效果。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或