线性布局 ( LiearLayout ) 通过线性容器Row( )和Colnum( )构建
1.1 间距
在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。
1.2主轴对齐方式
那个轴是主轴, 根据组件判断. Row( )横轴是主轴, Colnum( )纵轴是主轴. 组件的主轴方向可以是任意方向
属性：
参数：枚举
子元素之间间距相等SpaceAround子元素两侧间距相等
第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半SpaceEvenly相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
1.3交叉轴对齐方式
属性:
参数: 枚举类型
注意:布局容器在交叉轴要有足够的空间, 否则无法生效.
Row组件 默认在交叉轴子元素居中效果
1.4单个子元素交叉轴对齐方式
属性:
参数: 枚举
1.5自适应缩放
用法: 设置layoutWeight属性的 子元素 与 兄弟元素, 会 按照权重 进行分 主轴 的空间,
语法: .layoutWeight(数字)
注意: 设置layoutWeight时要记得给父组件设置主轴空间大小, 因为父组件的主轴没有设置空间大小, 添加layoutWeight后会将父组件的主轴撑到最大, 常导致自己的兄弟组件被挤到屏幕外面去
Flex只提供弹性布局, 不提供滚动
- Flex布局 默认水平排列
调整主轴 direction: FlecDirection.xxx
- 对齐 Row 和 Column: 对齐方式是通过属性的方法 .justifyContent
Flex通过参数进行调整
- Flex的渲染性能没有Row()和Column高
参数: 记住这是参数
值: 枚举
Flex的参数控制换行, 添加后当控制的子元素主轴尺寸之和大于容器的主轴尺寸时, 子元素进行换行
列表是一种容器，当列表项超过List容器组件大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。
使用列表可以结构化显示、可滚动的信息。通过调整在 List 组件中属性, 可使子组件按垂直或者水平方向线性排列，默认是垂直方向。
垂直滚动列表
水平布局
List 表示列表容器，ListItem表示单个列表项，只能有一个子组件。
3.2.1设置主轴方向
List组件主轴默认是垂直方向。
若是水平滚动列表场景，将 List 的 属性设置为 即可实现。 默认为 ，即主轴默认是垂直方向。
属性：
参数：枚举
- ：垂直方向，默认值
- ：水平方向
3.2.2设置交叉轴布局 - 列模式，列对齐方式
列模式
属性：
参数：
- 参数1： 交叉轴方向列数
- 参数2： 交叉轴方向列间距
列对齐方式
List交叉轴方向宽度大于ListItem交叉轴宽度 *列数时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
属性：
参数：枚举
- Start：首部对齐（默认）
- Center：居中对齐
- End：尾部对齐
3.3.1滚动条状态
属性：
参数：枚举
- Off： 不显示
- On：常驻显示
- Auto：按需显示（触摸时显示，2s 后消失）
3.3.2分割线样式
列表默认没有分割线
属性：divider()
参数：{ strokeWidth: 数字， color?: ‘color’, startMargin?: 数字, endMargin?: 数字 }
参数:
属性:divder
通过List组件的sticky属性，即可实现粘性标题
| sticky | StickyStyle | 配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
说明：
sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。 |
| — | — | — |
场景
实现步骤
关键步骤
- 创建控制器(ListScroller)对象
- 将控制器对象设置给List组件
- 调用控制器对象的方法, 实现滚动
参考代码
参数
默认值：false。alignScrollAlign否指定滑动到的元素与当前容器的对齐方式。
默认值：ScrollAlign.START。
事件-onScrollIndex
功能描述:
有子组件划入或画出List显示区域时触发, 可以获取子组件的下标
编程中的事件是指在程序运行过程中，某个特定的操作或状态发生时所触发的一段代码或函数。
计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。
- start: List显示区域内第一个子组件的索引值。
- end: List显示区域内最后一个子组件的索引值。
- center: List显示区域内中间位置子组件的索引值。
核心代码:
如果布局是由 多行 和 多列 所组成、行列可能需要合并、滚动，适合采用网格布局来实现。
每一个Griditem中只能有一个子组件
例如:
说明
:::info
- Grid的子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可
- GridItem 只能有一个子组件
- 宽高分为 2 种情况：
- Grid组件设置了宽高属性，则其尺寸为设置值。
- Grid组件没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。
:::
常用属性
例如：‘1fr 1fr 2fr’rowsTemplatestring设置当前网格布局行的数量或最小行高值
例如：‘1fr 1fr 2fr’columnsGap长度列间距rowsGap长度行间距
如果要实现这个效果 通过 GridItem 的如下属性即可:
使用属性控制滚动
- 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
- 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向
使用代码控制滚动
核心步骤：
- 创建 Scroller 对象
- 设置给 Grid
- 调用 Scroller 对象的 scrollPage 方法
定义有两种方法：
- 使用提供的属性调整（可调整属性有限）
- 使用 ScrollBar 组件自定义（可定制性高）
使用属性调整
默认值：BarState.auto
BarState.off 关闭
BarState.on 常驻
BarState.auto 按需显示scrollBarColorstringnumberscrollBarWidthstringnumber
使用ScrollBar组件自定义
核心步骤:
- 和 Grid 共用同一个 Scroller
- 创建 ScrollBar 组件并设置属性
默认值：ScrollBarDirection.VerticalstateBarState否滚动条状态。
默认值：BarState.Auto
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/53534.html