Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
6a642a65
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看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6a642a65
编写于
10月 21, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
6da29c7a
变更
5
展开全部
隐藏空白更改
内联
并排
Showing
5 changed file
with
453 addition
and
547 deletion
+453
-547
zh-cn/application-dev/ui/figures/direction.png
zh-cn/application-dev/ui/figures/direction.png
+0
-0
zh-cn/application-dev/ui/figures/flex.png
zh-cn/application-dev/ui/figures/flex.png
+0
-0
zh-cn/application-dev/ui/figures/justifyContent.png
zh-cn/application-dev/ui/figures/justifyContent.png
+0
-0
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+302
-398
zh-cn/application-dev/ui/ui-ts-layout-linear.md
zh-cn/application-dev/ui/ui-ts-layout-linear.md
+151
-149
未找到文件。
zh-cn/application-dev/ui/figures/direction.png
0 → 100644
浏览文件 @
6a642a65
15.0 KB
zh-cn/application-dev/ui/figures/flex.png
0 → 100644
浏览文件 @
6a642a65
17.8 KB
zh-cn/application-dev/ui/figures/justifyContent.png
0 → 100644
浏览文件 @
6a642a65
16.8 KB
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @
6a642a65
此差异已折叠。
点击以展开。
zh-cn/application-dev/ui/ui-ts-layout-linear.md
浏览文件 @
6a642a65
...
...
@@ -46,96 +46,94 @@ struct BlankExample {
自适应缩放是指在各种不同大小设备中,子组件按照预设的比例,尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现:
1.
父容器尺寸确定时,设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。
```
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%
'
)
```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%')
}
}
}
}
```
```
!
[](
figures/layoutWeight.gif
)
!
[](
figures/layoutWeight.gif
)
2.
父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。
```
ts
@
Entry
@
Component
struct
WidthExample
{
build
()
{
Column
()
{
Row
()
{
Column
()
{
Text
(
'
left width 20%
'
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
20%
'
).
backgroundColor
(
0xffd306
).
height
(
'
100%
'
)
Column
()
{
Text
(
'
center width 50%
'
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
50%
'
).
backgroundColor
(
0xffed97
).
height
(
'
100%
'
)
Column
()
{
Text
(
'
right width 30%
'
)
.
textAlign
(
TextAlign
.
Center
)
}.
width
(
'
30%
'
).
backgroundColor
(
0xffd306
).
height
(
'
100%
'
)
}.
backgroundColor
(
0xffd306
).
height
(
'
30%
'
)
3.
父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。
```ts
@Entry
@Component
struct WidthExample {
build() {
Column() {
Row() {
Column() {
Text('left width 20%')
.textAlign(TextAlign.Center)
}.width('20%').backgroundColor(0xffd306).height('100%')
Column() {
Text('center width 50%')
.textAlign(TextAlign.Center)
}.width('50%').backgroundColor(0xffed97).height('100%')
Column() {
Text('right width 30%')
.textAlign(TextAlign.Center)
}.width('30%').backgroundColor(0xffd306).height('100%')
}.backgroundColor(0xffd306).height('30%')
}
}
}
}
```
```
!
[](
figures/width.gif
)
!
[](
figures/width.gif
)
上例中,在任意大小的设备中,子组件的宽度占比固定。
上例中,在任意大小的设备中,子组件的宽度占比固定。
## 定位能力
*
相对定位
-
相对定位
使用组件的
[
offset属性
](
../reference/arkui-ts/ts-universal-attributes-location.md
)
可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
```
ts
@
Entry
...
...
@@ -171,10 +169,10 @@ struct BlankExample {
![](figures/offset.gif)
* 绝对定位
- 绝对定位
线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。
```
ts
@Entry
...
...
@@ -219,86 +217,90 @@ struct BlankExample {
自适应延伸是在不同尺寸设备下,当页面显示内容个数不一并延伸到屏幕外时,可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。
*
List组件
-
List组件
List子项过多一屏放不下时,未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到极限的回弹效果。
```ts
@Entry
@Component
struct ListExample1 {
@State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
@State alignListItem: ListItemAlign = ListItemAlign.Start
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.border({ width: 2, color: Color.Green })
}, item => item)
}
.border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
.scrollBar(BarState.On) // 滚动条常驻
.edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
纵向List:
```
ts
@Entry
@Component
struct ListExample1 {
@State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
@State alignListItem: ListItemAlign = ListItemAlign.Start
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.border({ width: 2, color: Color.Green })
}, item => item)
}
.border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
.scrollBar(BarState.On) // 滚动条常驻
.edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}
}
}
```
![](figures/listcolumn.gif)
```
ts
@
Entry
@
Component
struct
ListExample2
{
@
State
arr
:
string
[]
=
[
"
0
"
,
"
1
"
,
"
2
"
,
"
3
"
,
"
4
"
,
"
5
"
,
"
6
"
,
"
7
"
,
"
8
"
,
"
9
"
,
"
10
"
,
"
11
"
,
"
12
"
,
"
13
"
,
"
14
"
,
"
15
"
]
@
State
alignListItem
:
ListItemAlign
=
ListItemAlign
.
Start
build
()
{
Column
()
{
List
({
space
:
20
,
initialIndex
:
0
})
{
ForEach
(
this
.
arr
,
(
item
)
=>
{
ListItem
()
{
Text
(
''
+
item
)
.
height
(
'
100%
'
)
.
width
(
100
)
.
fontSize
(
16
)
.
textAlign
(
TextAlign
.
Center
)
.
borderRadius
(
10
)
.
backgroundColor
(
0xFFFFFF
)
}
.
border
({
width
:
2
,
color
:
Color
.
Green
})
},
item
=>
item
)
}
.
border
({
width
:
2
,
color
:
Color
.
Red
,
style
:
BorderStyle
.
Dashed
})
.
scrollBar
(
BarState
.
On
)
// 滚动条常驻
.
edgeEffect
(
EdgeEffect
.
Spring
)
// 滚动到边缘再拖动回弹效果
.
listDirection
(
Axis
.
Horizontal
)
// 列表水平排列
}.
width
(
'
100%
'
).
height
(
'
100%
'
).
backgroundColor
(
0xDCDCDC
).
padding
(
20
)
}
}
```
横向List:
```
ts
@Entry
@Component
struct ListExample2 {
@State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
@State alignListItem: ListItemAlign = ListItemAlign.Start
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.height('100%')
.width(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.border({ width: 2, color: Color.Green })
}, item => item)
}
.border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
.scrollBar(BarState.On) // 滚动条常驻
.edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
.listDirection(Axis.Horizontal) // 列表水平排列
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}
}
```
![](figures/listrow.gif)
- Scroll组件
线性布局中,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动,再内容外层包裹一个可滚动的容器组件Scroll,
线性布局中,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。在Column或者Row外层包裹一个可滚动的容器组件Scroll实现。
```
ts
纵向Scroll:
```
ts
@Entry
@Component
struct ScrollExample {
...
...
@@ -330,10 +332,11 @@ struct BlankExample {
}
```
![](figures/scrollrow.gif)
![](figures/scrollcolumn.gif)
```ts
横向Scroll:
```
ts
@Entry
@Component
struct ScrollExample {
...
...
@@ -356,7 +359,7 @@ struct BlankExample {
}.height('100%')
}
.backgroundColor(0xDCDCDC)
.scrollable(ScrollDirection.Horizontal) // 滚动方向
纵
向
.scrollable(ScrollDirection.Horizontal) // 滚动方向
横
向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(30) // 滚动条宽度
...
...
@@ -364,5 +367,4 @@ struct BlankExample {
}
}
```
!
[](
figures/scrollcolumn.gif
)
![](figures/scrollrow.gif)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录