概述
线性布局(LinearLayout)是开发中最常用的布局,通过线性容器 Row
和 Column
构建。线性布局是其他布局的基础,其子元素在主轴方向(水平方向或垂直方向)依次排列。根据排列方向的不同,开发者可以选择使用 Row
或 Column
容器来创建线性布局。
基本概念
- 布局容器:具有布局能力的容器组件,可以承载其他元素作为其子元素,并对其进行尺寸计算和排列。
- 布局子元素:布局容器内部的元素。
- 主轴:线性布局容器的布局方向轴线,子元素默认沿主轴排列。
Row
容器主轴为水平方向,Column
容器主轴为垂直方向。 - 交叉轴:垂直于主轴方向的轴线。
Row
容器交叉轴为垂直方向,Column
容器交叉轴为水平方向。 - 间距:布局子元素之间的间距,可以通过
space
属性设置。
布局子元素的间距
通过 space
属性可以在 Column
和 Row
容器中设置子元素在主轴方向上的间距。
- Column 容器中的间距:
Column({ space: 20 }) {
Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
Row().width('90%').height(50).backgroundColor(0xF5DEB3)
Row().width('90%').height(50).backgroundColor(0xD2B48C)
Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')
Row({ space: 35 }) {
Text('space: 35').fontSize(15).fontColor(Color.Gray)
Row().width('10%').height(150).backgroundColor(0xF5DEB3)
Row().width('10%').height(150).backgroundColor(0xD2B48C)
Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9ab29366fb02460db4f2a8b2b5c6fdf6.png#pic_center)
布局子元素在交叉轴上的对齐方式
在 Column
和 Row
容器中,通过 alignItems
属性可以设置子元素在交叉轴上的对齐方式。
- Column 容器中的水平对齐:
- 左对齐:
alignItems(HorizontalAlign.Start)
- 居中对齐:
alignItems(HorizontalAlign.Center)
- 右对齐:
alignItems(HorizontalAlign.End)
- 左对齐:
- Row 容器中的垂直对齐:
- 顶部对齐:
alignItems(VerticalAlign.Top)
- 居中对齐:
alignItems(VerticalAlign.Center)
- 底部对齐:
alignItems(VerticalAlign.Bottom)
- 顶部对齐:
布局子元素在主轴上的排列方式
可以通过 justifyContent
属性设置子元素在容器主轴上的排列方式,如从首端对齐、居中对齐、尾端对齐或均匀分布等。
- Column 容器中的垂直排列:
FlexAlign.Start
:从上到下排列。FlexAlign.Center
:居中排列。FlexAlign.End
:从下到上排列。FlexAlign.SpaceBetween
:均匀分配空间,首尾对齐。FlexAlign.SpaceAround
:均匀分配空间,首尾留有间距。FlexAlign.SpaceEvenly
:完全均匀分布。
- Row 容器中的水平排列:
FlexAlign.Start
:从左到右排列。FlexAlign.Center
:居中排列。FlexAlign.End
:从右到左排列。FlexAlign.SpaceBetween
:均匀分配空间,首尾对齐。FlexAlign.SpaceAround
:均匀分配空间,首尾留有间距。FlexAlign.SpaceEvenly
:完全均匀分布。
自适应布局
- 自适应拉伸:通过
Blank
组件自动填充空白空间,实现自适应拉伸效果。
Row({}) {
Column().width('30%').height(50).backgroundColor(0xF5DEB3)
Blank() // 填充空白区域,实现自适应拉伸
Column().width('30%').height(50).backgroundColor(0xD2B48C)
}.width('100%').height(50)
- 自适应缩放:使用
layoutWeight
属性或百分比宽高设置,实现子元素随容器尺寸变化的缩放效果。
6. Row({}) {
Column()
.layoutWeight(1) // 宽度随着剩余空间动态调整
.height(50)
.backgroundColor(0xF5DEB3)
Column()
.layoutWeight(2) // 宽度为前一列的两倍
.height(50)
.backgroundColor(0xD2B48C)
}.width('100%').height(50)
- 自适应延伸:通过
Scroll
组件或List
添加滚动条,实现内容超出屏幕后的滚动展示。
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item:number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderWidth(1)
.borderColor(0x666666)
.margin({ top: 10 })
.textAlign(TextAlign.Center)
.fontSize(20)
}, (item:number) => item.toString())
}.width('100%')
}
.backgroundColor(0xDCDCDC)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarColor(Color.Black)
.scrollBarWidth(10)
.edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset +''+ yOffset)
})
.onScrollEdge((side: Edge) => {
console.info('To the edge')
})
.onScrollEnd(() => {
console.info('Scroll Stop')
})
以上是 HarmonyOS 中使用 Row
和 Column
进行线性布局的基本方法和应用。