Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
806f9096
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
806f9096
编写于
2年前
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
5c4c46ae
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
152 addition
and
149 deletion
+152
-149
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+29
-27
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md
+32
-33
zh-cn/application-dev/ui/ui-ts-layout-grid.md
zh-cn/application-dev/ui/ui-ts-layout-grid.md
+8
-6
zh-cn/application-dev/ui/ui-ts-layout-linear.md
zh-cn/application-dev/ui/ui-ts-layout-linear.md
+47
-45
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+3
-3
zh-cn/application-dev/ui/ui-ts-layout-stack.md
zh-cn/application-dev/ui/ui-ts-layout-stack.md
+33
-35
未找到文件。
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)
This diff is collapsed.
Click to expand it.
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
(
"
50
vp
"
)
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)
## 场景示例
This diff is collapsed.
Click to expand it.
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
'
)
...
...
This diff is collapsed.
Click to expand it.
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属性设置拖动到极限的回弹效果。
...
...
This diff is collapsed.
Click to expand it.
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
)
This diff is collapsed.
Click to expand it.
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
(
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
)
```
!
[](
figures/stack1.png
)
-
通过Z序控制实现了显示效果。
This diff is collapsed.
Click to expand it.
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录
新手
引导
客服
返回
顶部