线性布局容器（Row、Column）
线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。
主轴和纵轴概念
什么是主轴和纵轴？对于线性容器来说，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。
Row
Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。
Row定义介绍
interface RowInterface {
(value?: { space?: string | number }): RowAttribute;
}
- value：可选参数，
space表示设置Row的子组件在水平方向上的间距，简单样例如下所示：
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属性介绍
declare class RowAttribute extends CommonMethod<RowAttribute> {
alignItems(value: VerticalAlign): RowAttribute;
justifyContent(value: FlexAlign): RowAttribute;
}
-
alignItems：参数类型为
VerticalAlign，表示子组件在竖直方向上的布局方式，VerticalAlign定义了以下三种对其方式：- Top：设置子组件在竖直方向上居顶部对齐。
- Center（默认值）：设置子组件在竖直方向上居中对其。
- Bottom：设置子组件在竖直方向上居底部对齐。
简单样例如下所示：
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：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
简单样例如下所示：
@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 参数不起作用。
Column
Column 按照竖直方向布局子组件，主轴为竖直方向，纵轴为水平方向。
Column定义介绍
interface ColumnInterface {
(value?: { space?: string | number }): ColumnAttribute;
}
- value：可选参数，
space表示设置Column的子组件在竖直方向上的间距，参数和Row一样，读者可类比Row来理解，具体用法就不再介绍了。
Column属性介绍
declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
alignItems(value: HorizontalAlign): ColumnAttribute;
justifyContent(value: FlexAlign): ColumnAttribute;
}
-
alignItems：设置子组件在水平方向上的布局方式，
HorizontalAlign定义了以下三种对其方式：- Start：设置子组件在水平方向上按照语言方向起始端对齐。
- Center（默认值）：设置子组件在水平方向上居左对齐。
- End：设置子组件在水平方向上按照语言方向末端对齐。
简单样例如下图所示：
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：元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
简单样例如下所示：
@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 参数不起作用。
Blank
Blank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。
#5.1.4.1：Blank定义介绍
interface BlankInterface {
(min?: number | string): BlankAttribute;
}
- min：
Blank组件在容器主轴上的最小尺寸。
Blank属性介绍
declare class BlankAttribute extends CommonMethod<BlankAttribute> {
color(value: ResourceColor): BlankAttribute;
}
- color：设置空白填充的填充颜色。
Blank 组件简单样例如下所示：
@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 参数不能混用。
码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05
①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。
为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：https://qr21.cn/FV7h05
如何快速入门：
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识：https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发：https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05
大厂鸿蒙面试题：：https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
