ArkUI容器类组件-线性布局容器（Row、Column）
线性布局容器（Row、Column）线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。
主轴和纵轴概念什么是主轴和纵轴？对于线性容器来说，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。
RowRow 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。
Row定义介绍代码语言：ts复制interface RowInterface {
(value?: { space?: string | number }): RowAttribute;
}value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距，简单样例如下所示：代码语言：ts复制 Row() {
Text()
.width(90)
.height('100%')
.backgroundColor("#aabbcc")
Text() // 模拟子组件之间的间隔为20
.width(20)
.height('100%')
Text()
.width(20)
.height('100%')
.layoutWeight(1)
.backgroundColor("#ccaabb")
}
.width('100%')
.height(60)
Row({space: 20}) { // 设置子组件之间的间隔为20
Text()
.width(90)
.height('100%')
.backgroundColor("#aabbcc")
Text()
.width(20)
.height('100%')
.layoutWeight(1)
.backgroundColor("#ccaabb")
}
.margin({top: 10})
.width('100%')
.height(60)样例运行结果如5_1所示：
Row属性介绍代码语言：ts复制declare class RowAttribute extends CommonMethod
alignItems(value: VerticalAlign): RowAttribute;
justifyContent(value: FlexAlign): RowAttribute;
}alignItems：参数类型为 VerticalAlign ，表示子组件在竖直方向上的布局方式， VerticalAlign 定义了以下三种对其方式：Top：设置子组件在竖直方向上居顶部对齐。Center（默认值）：设置子组件在竖直方向上居中对其。Bottom：设置子组件在竖直方向上居底部对齐。简单样例如下所示：
代码语言：ts复制 Row() {
Text("Top")
.fontSize(26)
.backgroundColor("#aabbcc")
}
.alignItems(VerticalAlign.Top) // 设置子组件在竖直方向顶部对齐
.borderWidth(2)
.borderColor(Color.Pink)
.width('100%')
.height(60)
Row() {
Text("Center")
.fontSize(26)
.backgroundColor("#aabbcc")
}
.alignItems(VerticalAlign.Center) // 设置子组件在竖直方向居中对齐
.borderWidth(2)
.borderColor(Color.Pink)
.width('100%')
.height(60)
Row() {
Text("Bottom")
.fontSize(26)
.backgroundColor("#aabbcc")
}
.alignItems(VerticalAlign.Bottom) // 设置子组件在竖直方向底部对齐
.borderWidth(2)
.borderColor(Color.Pink)
.width('100%')
.height(60)样例运行结果如下图所示：
justifyContent：设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。简单样例如下所示：
代码语言：ts复制 @Entry @Component struct RowTest {
build() {
Column({space: 10}) {
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.Start)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.Center)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.End)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.SpaceBetween)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.SpaceAround)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
Row() {
Text()
.size({width: 90, height: 50})
.backgroundColor('#aabbcc')
Text()
.size({width: 90, height: 50})
.backgroundColor('#bbccaa')
Text()
.size({width: 90, height: 50})
.backgroundColor('#ccaabb')
}
.justifyContent(FlexAlign.SpaceEvenly)
.size({width: "100%", height: 90})
.borderWidth(2)
.borderColor(Color.Pink)
}
.padding(10)
.size({width: "100%", height: '100%'})
}
}样例运行结果如下图所示：
📢：如果 Row 设置了 space 参数，则 justifyContent 参数不起作用。
ColumnColumn 按照竖直方向布局子组件，主轴为竖直方向，纵轴为水平方向。
Column定义介绍代码语言：ts复制interface ColumnInterface {
(value?: { space?: string | number }): ColumnAttribute;
}value：可选参数， space 表示设置 Column 的子组件在竖直方向上的间距，参数和 Row 一样，读者可类比 Row 来理解，具体用法就不再介绍了。Column属性介绍代码语言：ts复制declare class ColumnAttribute extends CommonMethod
alignItems(value: HorizontalAlign): ColumnAttribute;
justifyContent(value: FlexAlign): ColumnAttribute;
}alignItems：设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：Start：设置子组件在水平方向上按照语言方向起始端对齐。Center（默认值）：设置子组件在水平方向上居左对齐。End：设置子组件在水平方向上按照语言方向末端对齐。简单样例如下图所示：
代码语言：ts复制 Column() {
Text("Start")
.fontSize(22)
.backgroundColor('#aabbcc')
}
.alignItems(HorizontalAlign.Start)
.size({width: "100%", height: 60})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text("Center")
.fontSize(22)
.backgroundColor('#aabbcc')
}
.alignItems(HorizontalAlign.Center)
.size({width: "100%", height: 60})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text("End")
.fontSize(22)
.backgroundColor('#aabbcc')
}
.alignItems(HorizontalAlign.End)
.size({width: "100%", height: 60})
.borderWidth(2)
.borderColor(Color.Pink)样例运行结果如下图所示：
justifyContent：设置子组件在竖直方向上的对齐方式， FlexAlign 定义了一下几种类型：Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。SpaceEvenly：元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。简单样例如下所示：
代码语言：ts复制 @Entry @Component struct ColumnTest {
build() {
Column({space: 5}) {
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.End)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
Column() {
Text()
.size({width: 160, height: 25})
.backgroundColor('#aabbcc')
Text()
.size({width: 160, height: 25})
.backgroundColor('#bbccaa')
Text()
.size({width: 160, height: 25})
.backgroundColor('#ccaabb')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceEvenly)
.size({width: "100%", height: 120})
.borderWidth(2)
.borderColor(Color.Pink)
}
.padding(10)
.size({width: "100%", height: '100%'})
}
}样例运行结果如下图所示：
📢：如果 Column 设置了 space 参数，则 justifyContent 参数不起作用。
BlankBlank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。
5.1.4.1：Blank定义介绍代码语言：ts复制interface BlankInterface {
(min?: number | string): BlankAttribute;
}min： Blank 组件在容器主轴上的最小尺寸。Blank属性介绍代码语言：ts复制declare class BlankAttribute extends CommonMethod
color(value: ResourceColor): BlankAttribute;
}color：设置空白填充的填充颜色。Blank 组件简单样例如下所示：
代码语言：ts复制@Entry @Component struct Index {
build() {
Column({space: 10}) {
Row() {
Text('Bluetooth').fontSize(18) // 靠左显示
Blank() // 铺满剩余尺寸
Toggle({ type: ToggleType.Switch }) // 靠右显示
}
.width('100%')
.backgroundColor(Color.Pink)
.borderRadius(15)
.padding({ left: 10})
}
.padding(10)
.size({ width: "100%", height: '100%' })
}
}样例运行结果如下图所示：
📢： Blank 具有以下特性：
只在 Row 和 Column 中生效。除了 color 外不支持通用属性。只在 Row 和 Column 有剩余空间才生效。适合用在多设备适配场景中。小结本节介绍了线性容器布局里的主轴和纵轴的概念以及 Column 和 Row 的使用方法，读者可以借助线性容器组件实现简单的UI布局了，最后主要注意的是 Column 和 Row 的 space 和 justifyContent 参数不能混用。
写在最后如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂鸿蒙开发；