提交 6a642a65 编写于 作者: S sienna1128

update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 6da29c7a
......@@ -47,7 +47,6 @@ struct BlankExample {
1. 父容器尺寸确定时,设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。
```ts
@Entry
@Component
......@@ -97,8 +96,8 @@ struct BlankExample {
![](figures/layoutWeight.gif)
2. 父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。
3. 父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。
```ts
@Entry
......@@ -129,14 +128,13 @@ struct BlankExample {
![](figures/width.gif)
上例中,在任意大小的设备中,子组件的宽度占比固定。
上例中,在任意大小的设备中,子组件的宽度占比固定。
## 定位能力
* 相对定位
- 相对定位
使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
```ts
@Entry
@Component
......@@ -171,10 +169,10 @@ struct BlankExample {
![](figures/offset.gif)
* 绝对定位
线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。
- 绝对定位
线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。
```ts
@Entry
......@@ -219,12 +217,13 @@ struct BlankExample {
自适应延伸是在不同尺寸设备下,当页面显示内容个数不一并延伸到屏幕外时,可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。
* List组件
- List组件
List子项过多一屏放不下时,未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到极限的回弹效果。
```ts
纵向List:
```ts
@Entry
@Component
struct ListExample1 {
......@@ -259,7 +258,9 @@ struct BlankExample {
![](figures/listcolumn.gif)
```ts
横向List:
```ts
@Entry
@Component
struct ListExample2 {
......@@ -295,10 +296,11 @@ struct BlankExample {
- Scroll组件
线性布局中,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动,再内容外层包裹一个可滚动的容器组件Scroll,
线性布局中,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。在Column或者Row外层包裹一个可滚动的容器组件Scroll实现。
纵向Scroll:
```ts
```ts
@Entry
@Component
struct ScrollExample {
......@@ -330,10 +332,11 @@ struct BlankExample {
}
```
![](figures/scrollrow.gif)
![](figures/scrollcolumn.gif)
横向Scroll:
```ts
```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.
先完成此消息的编辑!
想要评论请 注册