diff --git a/zh-cn/application-dev/ui/figures/columnTemplate.png b/zh-cn/application-dev/ui/figures/columnTemplate.png index 82197457745faf4281f6b2734cf0573aa950c5a9..730abeccaffa22f88e916fb199cbc1e44a982789 100644 Binary files a/zh-cn/application-dev/ui/figures/columnTemplate.png and b/zh-cn/application-dev/ui/figures/columnTemplate.png differ diff --git a/zh-cn/application-dev/ui/figures/columns1.png b/zh-cn/application-dev/ui/figures/columns1.png index a981d11761ed51167be73294df88e97d35685b83..f7e2c38a9b5f22ebf44eaae8eb9fea461d198018 100644 Binary files a/zh-cn/application-dev/ui/figures/columns1.png and b/zh-cn/application-dev/ui/figures/columns1.png differ diff --git a/zh-cn/application-dev/ui/figures/columns2.png b/zh-cn/application-dev/ui/figures/columns2.png new file mode 100644 index 0000000000000000000000000000000000000000..5e549b42338ffe87b944807cec7e57144b5cbe74 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/columns2.png differ diff --git a/zh-cn/application-dev/ui/figures/columns3.gif b/zh-cn/application-dev/ui/figures/columns3.gif new file mode 100644 index 0000000000000000000000000000000000000000..e44df1b36066095ed6e8741e26d9f04a4c9a2b0b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/columns3.gif differ diff --git a/zh-cn/application-dev/ui/figures/gridlayout.png b/zh-cn/application-dev/ui/figures/gridlayout.png index 7e8284819fa2dba8a37d7a3c7fe5b30b15fed30e..cc0db8ce530d60191adf8ffaefdbf11b97305067 100644 Binary files a/zh-cn/application-dev/ui/figures/gridlayout.png and b/zh-cn/application-dev/ui/figures/gridlayout.png differ diff --git a/zh-cn/application-dev/ui/figures/order2.gif b/zh-cn/application-dev/ui/figures/order2.gif index 3884d5e632a2cf849a1df5b9b58b7736b4d0211b..315c82e417d240d0624a8206c9adf47c4c0a3ec3 100644 Binary files a/zh-cn/application-dev/ui/figures/order2.gif and b/zh-cn/application-dev/ui/figures/order2.gif differ 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 4029190429e24309942cca183b714fe473553f75..d2066deeddf2c46728e80740d36447ec3ffa7b72 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,205 +1,259 @@ # 栅格布局 栅格组件[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)在栅格布局场景中使用。GridCol作为栅格子组件使用。 +相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。 + ## 栅格容器GridRow -栅格布局的列数，间隔，排列方向和断点由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。 -### 栅格布局的总列数 +栅格容器有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) + }) +} +``` -* 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。 +![](figures/breakpoints.gif) -```ts - GridRow({}) { - ForEach(this.bgColors, (color, index) => { + +### 栅格布局的总列数 + +GridRow中通过columns设置栅格布局的总列数。 + +- columns默认值为12，当未设置columns时，在任何断点下，栅格布局被分成12列。 + ```ts + GridRow() { + ForEach(this.bgColors, (item, index) => { GridCol() { Row() { - Text(${index}) - }.width("100%").height("50") - } - .backgroundColor(color) - .span(2) + Text(`${index + 1}`) + }.width("100%").height("50") + }.backgroundColor(item) }) } ``` ![](figures/columns1.png) - - 如上所示，栅格系统默认分成12列，每一个子组件占2列，前6个子组件在第一排。 -* 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。 +- 当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 - columns: {sm: 8, md: 10} + ```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。这里详单与设置了，xs:12, sm:8, md:10, lg:10, xl:10, xxl:10。 + 如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:8, md:10，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:10, xl:10, xxl:10。 ### 栅格子组件间距 -GridRow的gutter属性设置元素之间的距离，决定内容间的紧密程度。 +GridRow中通过gutter设置子元素在水平和垂直方向的间距。 -* 当类型为number时，同时设置栅格子组件间的水平垂直边距且相等。 - +- 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。 -```ts - GridRow({ gutter: 10 }){} + ```ts + GridRow({ gutter: 10 }){} ``` ![](figures/gutter1.png) - 上例中，子组件水平与垂直方向距离相邻元素的间距为10。 - -* 当类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。 -```ts +- 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。 + + ```ts GridRow({ gutter: { x: 20, y: 50 } }){} ``` ![](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四类，尺寸范围如下： - -| 断点名称 | 取值范围（vp）| -| --------| ------ | -| xs | [0, 320） | -| sm | [320, 520) | -| md | [520, 840) | -| lg | [840, +∞) | - -在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点。 - -* 针对断点位置，开发者可以根据实际使用场景，通过一个单调递增数组设置，例如： - - -```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个断点，breakpoints最多支持六个断点，断点范围数量value数组值的个数最多为5。 -* 设置以窗口或者容器为断点切换参考物，实现栅格系统监听对象设置。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。 - - breakpoints示例如下： - - -```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) - -首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。 ## 栅格子组件GridCol GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。 +- span的设置 -* span的设置 - - -```ts + ```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的设置 - +- offset的设置 -```ts + ```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的设置 - +- order的设置 -```ts + ```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时，子组件在所有尺寸设备下占用的列数相同。 - +- 当类型为number时，子组件在所有尺寸设备下占用的列数相同。 -```ts + ```ts GridRow({ columns: 8 }) { ForEach(this.bgColors, (color, index) => { GridCol({ span: 2 }) { @@ -215,9 +269,8 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设 ![](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 } }) { @@ -235,10 +288,9 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设 ### offset 栅格子组件相对于前一个子组件的偏移列数，默认为0。 -* 当类型为number时，子组件偏移相同列数。 - +- 当类型为number时，子组件偏移相同列数。 -```ts + ```ts GridRow() { ForEach(this.bgColors, (color, index) => { GridCol({ offset: 2 }) { @@ -252,12 +304,13 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设 ``` ![](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 } }) { @@ -276,35 +329,62 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设 栅格子组件的序号，决定子组件排列次序。当子组件不设置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) -} -``` + + +- 当类型为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）设备中子组件排序次序设置。 +- 当类型为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) 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 c588867f80d8f6fefbca0673e65b0cb879092f93..420e594c188eead7944041bd6bffdde13e79c506 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 @@ -43,35 +43,30 @@ 首先使用栅格容器组件创建栅格布局。 -### 创建栅格容器 +### 栅格容器创建与设置 通过接口 `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` 创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。 -* 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp： +通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp： - ```ts - GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} - ``` - - 栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如： +GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} +``` - +栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如： ```ts - GridContainer() {} - ``` - - +GridContainer() {} +``` ```ts - GridContainer({ sizeType: SizeType.Auto }) - ``` +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指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如： @@ -91,7 +86,7 @@ 上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType. SM类型的栅格设置, 即占用3列，放置在第1列。 -### 栅格容器内子组件的栅格设置 +### 子组件的栅格设置 栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offset表示列偏移量，指将组件放置在哪一个columns上。 如： 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 bdc1dbeccbfadd74d06712f0d0e152aef329aeae..69a9fde64de8d9cb79c0cb40c9f6d6eaba8ba757 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid.md @@ -19,19 +19,100 @@ Grid用于设置网格布局相关参数，GridItem定义子组件相关特征 下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算该列在网格布局宽度上的占比，最终决定该列的宽度。 ```ts -Grid().columnsTemplate('1fr 1fr 1fr 1fr') +struct GridExample { + @State Number: Array = ['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 -Grid().columnsTemplate('1fr 2fr 3fr 4fr') +struct GridExample { + @State Number: Array = ['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 -Grid().columnsTemplate('4fr 2fr 3fr') +struct GridExample { + @State Number: Array = ['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。 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 f5c8aa11bdbe7a27059d79a530daa63c94986ac6..ec8132c0e3fe5b2b78017321b08a8bfa52f9da8d 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-linear.md @@ -13,23 +13,11 @@ 具体使用以及效果如下表所示： - |属性名|描述|Row效果图|Column效果图| - |------|---------------------------|----------------------------|---------------------------| - |space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子组件垂直方向间距| - -![](figures/rowspace.png) | ![](figures/columnspace.png) - -| - |alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式| - -![](figures/rowalign.png) |![](figures/columnalign.png) - - | - |justifyContent |容器排列方向上，子组件在父容器中的对齐方式 | - -![](figures/rowjustify.png) |![](figures/columnjustify.png) - -| +|属性名|描述|Row效果图|Column效果图| +|------|---------------------------|----------------------------|---------------------------| +|space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子组件垂直方向间距| ![](figures/rowspace.png) | ![](figures/columnspace.png) | +|alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|![](figures/rowalign.png) |![](figures/columnalign.png)| +|justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |![](figures/rowjustify.png) |![](figures/columnjustify.png)| ## 自适应拉伸 @@ -61,50 +49,50 @@ struct BlankExample { ```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%') - } + @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) @@ -112,7 +100,7 @@ struct BlankExample { 2. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。 -```ts + ```ts @Entry @Component struct WidthExample { @@ -149,7 +137,7 @@ struct BlankExample { 使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。 -```ts + ```ts @Entry @Component struct OffsetExample { @@ -179,7 +167,7 @@ struct BlankExample { .margin({ top: 25 }) } } - ``` + ``` ![](figures/offset.gif) @@ -188,7 +176,7 @@ struct BlankExample { 线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。 -```ts + ```ts @Entry @Component struct PositionExample { @@ -305,7 +293,7 @@ struct BlankExample { ![](figures/listrow.gif) -* Scroll组件 +- Scroll组件 线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll， 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 ffba3509dac063f8358c9d2c7e5db8a947fe6f9d..fa26e65c185012b291c137dc5a02c318ca01348f 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -10,7 +10,7 @@ ## 媒体查询引入与使用流程 -通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下： +媒体查询通过媒体查询接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下： 首先导入媒体查询模块。 @@ -18,13 +18,13 @@ import mediaquery from '@ohos.mediaquery' ``` -然后通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener，例如： +通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。 ```ts listener = mediaquery.matchMediaSync('(orientation: landscape)') ``` -给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑，例如： +给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。 ```ts onPortrait(mediaQueryResult) { @@ -115,42 +115,40 @@ listener.on('change', onPortrait) 下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。 - +```ts +import mediaquery from '@ohos.mediaquery' +let portraitFunc = null -``` - import mediaquery from '@ohos.mediaquery' - let portraitFunc = null - - @Entry - @Component - struct MediaQueryExample { - @State color: string = '#DB7093' - @State text: string = 'Portrait' - listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立 - - onPortrait(mediaQueryResult) { - if (mediaQueryResult.matches) { - this.color = '#FFD700' - this.text = 'Landscape' - } else { - this.color = '#DB7093' - this.text = 'Portrait' - } - } - - aboutToAppear() { - portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例 - this.listener.on('change', portraitFunc) - } - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text(this.text).fontSize(50).fontColor(this.color) - } - .width('100%').height('100%') - } +@Entry +@Component +struct MediaQueryExample { +@State color: string = '#DB7093' +@State text: string = 'Portrait' +listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立 + +onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + this.color = '#FFD700' + this.text = 'Landscape' + } else { + this.color = '#DB7093' + this.text = 'Portrait' } - ``` +} + +aboutToAppear() { + portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例 + this.listener.on('change', portraitFunc) +} + +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。 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 412062208dddf369c6e05e335c909c07eceb400d..ef1c4fa865d1aef6cff7d237b8ef0cea9e47733d 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-stack.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-stack.md @@ -24,30 +24,28 @@ BottomEnd| 底部尾端 |![](figures/stackbottomend.png)| 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) - ``` +- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。 + + ```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 }) { + ```ts + Stack({ alignContent: Alignment.BottomStart }) { Column(){ Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20) }.width(100).height(100).backgroundColor(0xffd306).zIndex(2) @@ -57,7 +55,7 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar 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) + }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0) + ``` + + ![](figures/stack1.png)