diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index c3ebcff0e2a0e0a3422fea322e4df446157567b0..0e7d28d9dd84ba422ceec2f9a86579ab3fa6b0a5 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -64,7 +64,7 @@ - [弹性布局](ui-ts-layout-flex.md) - [网格布局](ui-ts-layout-grid.md) - 响应式布局 - - [栅格布局(老)](ui-ts-layout-grid-container.md) + - [栅格布局](ui-ts-layout-grid-container.md) - [栅格布局(新)](ui-ts-layout-grid-container-new.md) - [媒体查询](ui-ts-layout-mediaquery.md) - 体验声明式UI diff --git a/zh-cn/application-dev/ui/figures/gridExp1.png b/zh-cn/application-dev/ui/figures/gridExp1.png index 07c10f63acca0124cb7ad004f0e498b7071d4b7a..6767d92cee335418b9c82aa842359dfce1d887c9 100644 Binary files a/zh-cn/application-dev/ui/figures/gridExp1.png and b/zh-cn/application-dev/ui/figures/gridExp1.png differ diff --git a/zh-cn/application-dev/ui/figures/gridExp2.png b/zh-cn/application-dev/ui/figures/gridExp2.png index 4fbeea1b4b69fb8b442c99f444426752e303a3bb..c484c27c079f3490b32d7e6c2c8e3f0b84a0151a 100644 Binary files a/zh-cn/application-dev/ui/figures/gridExp2.png and b/zh-cn/application-dev/ui/figures/gridExp2.png differ 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 aeb01089743656157fccec9b5795e694bae4d1bf..198b9a48a0b365da4756ce87397c112c574a5b69 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid.md @@ -12,7 +12,7 @@ ## 容器组件Grid设置 ### 行列数量占比 通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。 -下面以columnsTemplate为例,介绍该属性的设置,该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的列数,fr前面的数值大小,用于计算改列在网格布局宽度上的占比,最终决定该列的宽度。 +下面以columnsTemplate为例,介绍该属性的设置,该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的列数,fr前面的数值大小,用于计算该列在网格布局宽度上的占比,最终决定该列的宽度。 ```ts Grid().columnsTemplate('1fr 1fr 1fr 1fr') ``` @@ -34,7 +34,7 @@ Grid().columnsTemplate('4fr 2fr 3fr') ### 排列方式 通过layoutDirection可以设置网格布局的主轴方向,决定子组件的排列方式。 -可选值包括Row,RowReverse, Column, ColumnReverse四种情况。 +可选值包括Row,RowReverse, Column, ColumnReverse四种情况。 效果如下: ![](figures/gridlayout.png) @@ -48,7 +48,8 @@ Grid() .rowsGap(20) ``` ![](figures/columnGap.png) -上图中,设置网格布局子组件间,垂直间距为20,水平间距为10。 + +上图中,设置网格布局子组件间的垂直间距为20,水平间距为10。 ## 网格子组件GridItem设置 @@ -56,7 +57,7 @@ Grid() ### 设置子组件占的行列数 网格布局的行列标号从1开始,依次编号。 -子组件横跨多行时,通过rowStart设置子组件起始行编号,rowEnd设置终点行编号。当rowStart值与rowEnd值相同时,子元素与默认一样只占一行。关键如下: +子组件横跨多行时,通过rowStart设置子组件起始行编号,rowEnd设置终点行编号。当rowStart值与rowEnd值相同时,子元素只占一个网格。示例如下: ```ts Grid() { GridItem() { @@ -64,7 +65,7 @@ Grid() { .fontSize(16) .textAlign(TextAlign.Center) .textStyle() - .rowStart(2).rowEnd(3) // 5子元素从第二列到第三列 + }.rowStart(2).rowEnd(3) // 5子元素从第二列到第三列 GridItem() { Text('4') @@ -103,7 +104,6 @@ Grid() { ## 场景示例 使用grid布局实现一个计算器的排布效果,代码如下: ```ts -// xxx.ets @Entry @Component struct GridExample { 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 da4a16bc72b715594a1cbe2488274dff84feaa02..32b10b3b4f2ee5d301389e804e924496fbd32fe3 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-linear.md @@ -1,21 +1,23 @@ # 线性布局 -线性布局(LinearLayout)是开发中最常用的布局。正如它的名字所描述的一样,这个布局会将它所包含的组件在线性方向上(水平方向和垂直方向)依次排列。 +线性布局(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参数设置主轴(排列方向)上子组件的间距。达到各子组件在排列方向上的等间距效果。 +线性布局的排列方向由所选容器组件决定。根据不同的排列方向,选择使用Row或Column容器创建线性布局,通过调整space,alignItems,justifyContent属性调整子组件的间距,水平垂直方向的对齐方式。 +1. 通过space参数设置主轴(排列方向)上子组件的间距。达到各子组件在排列方向上的等间距效果。 2. 通过alignItems属性设置子组件在交叉轴(排列方向的垂直方向)的对齐方式。且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时,取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign),水平方向取值为[HorizontalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)。 -3. 通过justifyContent属性设置子组件在主轴(排列方向)上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign) +3. 通过justifyContent属性设置子组件在主轴(排列方向)上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign)。 -|属性名|描述|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)| ## 自适应拉伸 在线性布局下,常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md),在容器主轴方向自动填充空白空间,达到自适应拉伸效果。 @@ -38,11 +40,12 @@ struct BlankExample { ![](figures/blank.gif) + ## 自适应缩放 -自适应缩放是指在各种不同大小设备中,子组件按照预设的比例,尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现。 +自适应缩放是指在各种不同大小设备中,子组件按照预设的比例,尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现: -- 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。 +1. 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。 ```ts @Entry @Component @@ -94,7 +97,7 @@ struct BlankExample { ![](figures/layoutWeight.gif) -- 父容器尺寸确定时,通过设置子组件以及兄弟组件的width宽度,使用百分比单位,可以保证各自元素在任意尺寸下的自适应占比。 +2. 父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。 ```ts @Entry @Component @@ -123,11 +126,13 @@ struct BlankExample { ``` ![](figures/width.gif) +上例中,在任意大小的设备中,子组件的宽度占比固定。 + ## 定位能力 -- 绝对定位 +- **绝对定位** - 线性布局中可以使用组件的positon属性实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。 + 线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。 ```ts @Entry @Component @@ -165,7 +170,7 @@ struct BlankExample { ![](figures/position.gif) - 相对定位 - 使用组件的offset属性可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。 + 使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。 ```ts @Entry @Component