线性布局初相识
在 HarmonyOS 开发的奇妙旅程中，界面布局就像是搭建房屋的基石，而线性布局（LinearLayout）无疑是其中最为常用且基础的一块。它是构建有序界面排列的关键，通过线性容器 Row 和 Column，能够让子元素在水平或垂直方向上依次排列，为我们打造出简洁、规整的用户界面。无论是简单的登录页面，还是复杂的应用主界面，线性布局都能发挥重要作用，帮助我们将各种组件合理地组织在一起，提升用户体验。今天，就让我们深入探索线性布局的奥秘，掌握它的使用技巧，为 HarmonyOS 应用开发添砖加瓦。
线性布局的基础原理
（一）布局容器与排列方向
在 HarmonyOS 中，线性布局主要通过 Row 和 Column 这两个容器组件来实现。Row 容器就像是一条水平的轨道，所有放置在其中的子组件会从左到右依次排列，如同在书架上摆放书籍，一本挨着一本从左向右排列。比如，我们要创建一个简单的导航栏，其中包含多个图标和文字按钮，就可以使用 Row 容器将这些图标和按钮水平排列，让用户能够方便地点击切换不同功能。而 Column 容器则是垂直方向的布局能手，它会让子组件从上到下有序排列，就像一列纵队，士兵们依次站列。以登录页面为例，用户名输入框、密码输入框以及登录按钮通常会垂直排列，此时 Column 容器就能派上用场，将这些组件按顺序从上至下布局，使页面看起来整齐规范。
（二）主轴与交叉轴
理解主轴和交叉轴是掌握线性布局的关键。主轴是线性布局中决定子组件排列方向的轴线，而交叉轴则是与主轴垂直的轴线。在 Row 容器中，由于子组件是水平排列的，所以水平方向就是主轴，就像火车行驶的铁轨方向；而垂直方向则是交叉轴，如同铁轨旁的电线杆的排列方向。在 Column 容器里，情况恰好相反，垂直方向成为主轴，因为子组件是垂直排列的；水平方向则是交叉轴。例如，在一个包含多个图片和文字描述的界面中，如果使用 Row 容器来布局图片和文字，那么图片和文字在水平方向上的排列就是沿着主轴方向，而它们在垂直方向上的对齐方式则与交叉轴相关；若使用 Column 容器，图片和文字在垂直方向上依次排列是主轴方向，水平方向的对齐就是基于交叉轴。通过对主轴和交叉轴的理解，我们能够更精准地控制子组件在布局中的位置和排列方式 。
线性布局的使用方法
（一）组件排列
水平排列：使用 Row 容器实现水平排列非常简单。以下是一个代码示例，展示了如何在 Row 容器中放置三个 Text 组件，让它们从左到右依次排列 。
| @Entry @Component struct HorizontalLayout { build() { Row() { Text('组件1') .fontSize(16) .backgroundColor(Color.LightGray) Text('组件2') .fontSize(16) .backgroundColor(Color.LightBlue) Text('组件3') .fontSize(16) .backgroundColor(Color.LightGreen) } .width('100%') .height(100) } } |
在上述代码中，Row 容器包裹了三个 Text 组件，每个 Text 组件设置了不同的背景颜色以便区分，并且设置了字体大小。Row 容器设置了宽度为父容器的 100%，高度为 100，这样三个 Text 组件就会在水平方向上依次排列，填满 Row 容器的宽度 。运行效果为三个带有不同背景颜色的文本组件水平排列在页面上。
垂直排列：Column 容器用于实现组件的垂直排列。下面的代码示例创建了一个包含三个按钮的 Column 布局，按钮将从上到下依次排列。
| @Entry @Component struct VerticalLayout { build() { Column() { Button('按钮1') .width(150) .height(50) .backgroundColor(Color.Orange) Button('按钮2') .width(150) .height(50) .backgroundColor(Color.Pink) Button('按钮3') .width(150) .height(50) .backgroundColor(Color.Yellow) } .width('100%') .height('100%') } } |
这段代码中，Column 容器包含了三个 Button 组件，每个按钮设置了宽度、高度和背景颜色。Column 容器设置了宽度为父容器的 100%，高度也为父容器的 100%，使得按钮能够在垂直方向上依次排列，占据整个 Column 容器的空间 。运行结果是三个不同颜色的按钮垂直排列在页面中。
（二）间距设置
在实际应用中，为了让组件之间的布局更加美观，我们常常需要设置组件间的间距。在 HarmonyOS 的线性布局中，可以通过 space 属性轻松实现这一需求。space 属性可以设置为一个数值（单位为 vp，虚拟像素），表示子组件之间的固定间距。例如，在以下代码中，我们在 Row 容器中设置 space 为 20，让三个 Text 组件之间有 20vp 的间距。
| @Entry @Component struct SpacingExample { build() { Row({ space: 20 }) { Text('文本1') .fontSize(16) .backgroundColor(Color.LightGray) Text('文本2') .fontSize(16) .backgroundColor(Color.LightBlue) Text('文本3') .fontSize(16) .backgroundColor(Color.LightGreen) } .width('100%') .height(100) } } |
在上述代码中，Row 容器的 space 属性设置为 20，这使得三个 Text 组件在水平排列时，彼此之间会有 20vp 的空白间隔。同样，在 Column 容器中也可以使用 space 属性来设置子组件在垂直方向上的间距。比如：
| @Entry @Component struct ColumnSpacingExample { build() { Column({ space: 15 }) { Button('按钮A') .width(150) .height(50) .backgroundColor(Color.Orange) Button('按钮B') .width(150) .height(50) .backgroundColor(Color.Pink) Button('按钮C') .width(150) .height(50) .backgroundColor(Color.Yellow) } .width('100%') .height('100%') } } |
这段代码中，Column 容器的 space 属性设置为 15，因此三个按钮在垂直排列时，它们之间会有 15vp 的垂直间距，使布局看起来更加舒适、整齐 。
（三）对齐方式
水平对齐：在 Row 容器中，子组件在垂直方向（交叉轴）上的对齐方式由 VerticalAlign 枚举值控制。VerticalAlign 枚举主要包含以下几个值：
VerticalAlign.Top：子组件在交叉轴上顶部对齐。
VerticalAlign.Center：子组件在交叉轴上居中对齐，这是默认的对齐方式。
VerticalAlign.Bottom：子组件在交叉轴上底部对齐。
以下是不同对齐方式的代码示例及效果展示：
| @Entry @Component struct HorizontalAlignExample { build() { Column() { // 顶部对齐示例 Row() { Text('短文本') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('很长很长的文本') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(80) } .width('100%') .height(100) .alignItems(VerticalAlign.Top) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 居中对齐示例 Row() { Text('短文本') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('很长很长的文本') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(80) } .width('100%') .height(100) .alignItems(VerticalAlign.Center) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 底部对齐示例 Row() { Text('短文本') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('很长很长的文本') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(80) } .width('100%') .height(100) .alignItems(VerticalAlign.Bottom) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) } .width('100%') .height('100%') } } |
在上述代码中，通过设置 Row 容器的 alignItems 属性为不同的 VerticalAlign 枚举值，实现了子组件在垂直方向上的不同对齐效果。每个 Row 容器都设置了边框和外边距，方便区分不同的示例。在实际效果中，可以看到当设置为 VerticalAlign.Top 时，两个文本组件的顶部对齐；设置为 VerticalAlign.Center 时，它们在垂直方向上居中对齐；设置为 VerticalAlign.Bottom 时，文本组件的底部对齐 。
垂直对齐：对于 Column 容器，子组件在水平方向（交叉轴）上的对齐方式由 HorizontalAlign 枚举值决定。HorizontalAlign 枚举主要有：
HorizontalAlign.Start：子组件在交叉轴上起始端对齐（对于从左到右的语言，就是左对齐）。
HorizontalAlign.Center：子组件在交叉轴上居中对齐。
HorizontalAlign.End：子组件在交叉轴上末端对齐（对于从左到右的语言，就是右对齐）。
下面是不同垂直对齐方式的代码和效果展示：
| @Entry @Component struct VerticalAlignExample { build() { Column() { // 左对齐示例 Column() { Text('内容1') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('内容2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(50) } .width('100%') .height(120) .alignItems(HorizontalAlign.Start) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 居中对齐示例 Column() { Text('内容1') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('内容2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(50) } .width('100%') .height(120) .alignItems(HorizontalAlign.Center) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 右对齐示例 Column() { Text('内容1') .fontSize(16) .backgroundColor(Color.LightGray) .width(100) .height(50) Text('内容2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(150) .height(50) } .width('100%') .height(120) .alignItems(HorizontalAlign.End) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) } .width('100%') .height('100%') } } |
在这段代码中，通过修改 Column 容器的 alignItems 属性为不同的 HorizontalAlign 枚举值，展示了子组件在水平方向上的不同对齐方式。从实际效果可以清晰地看到，设置为 HorizontalAlign.Start 时，文本组件左对齐；设置为 HorizontalAlign.Center 时，居中对齐；设置为 HorizontalAlign.End 时，右对齐 。
（四）排列方式
水平方向排列：在 Row 容器中，通过 justifyContent 属性可以控制子组件在水平方向（主轴）上的排列方式，该属性的值来自 FlexAlign 枚举。FlexAlign 枚举包含以下常见值：
FlexAlign.Start：子组件在主轴上首端对齐，即从左到右排列时，子组件靠左侧对齐。
FlexAlign.Center：子组件在主轴上居中对齐。
FlexAlign.End：子组件在主轴上尾端对齐，即从左到右排列时，子组件靠右侧对齐。
FlexAlign.SpaceBetween：子组件在主轴上两端对齐，且子组件之间的间距相等。
FlexAlign.SpaceAround：子组件在主轴上均匀分布，每个子组件周围的间距相等（包括容器边缘与第一个和最后一个子组件的间距）。
FlexAlign.SpaceEvenly：子组件在主轴上均匀分布，且子组件之间以及子组件与容器边缘的间距都相等。
以下是水平方向不同排列方式的代码示例及效果展示：
| @Entry @Component struct HorizontalArrangementExample { build() { Column() { // 首端对齐 Row({ justifyContent: FlexAlign.Start }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 居中对齐 Row({ justifyContent: FlexAlign.Center }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 尾端对齐 Row({ justifyContent: FlexAlign.End }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 两端对齐，元素之间等间距 Row({ justifyContent: FlexAlign.SpaceBetween }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 元素周围等间距 Row({ justifyContent: FlexAlign.SpaceAround }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) // 元素之间及两端等间距 Row({ justifyContent: FlexAlign.SpaceEvenly }) { Text('元素1') .fontSize(16) .backgroundColor(Color.LightGray) .width(80) .height(50) Text('元素2') .fontSize(16) .backgroundColor(Color.LightBlue) .width(80) .height(50) Text('元素3') .fontSize(16) .backgroundColor(Color.LightGreen) .width(80) .height(50) } .width('100%') .height(80) .border({ width: 1, color: Color.Black }) .margin({ top: 20 }) } .width('100%') .height('100%') } } |
通过上述代码，我们可以直观地看到不同 FlexAlign 值下子组件在水平方向上的排列效果。例如，当设置为 FlexAlign.SpaceBetween 时，三个元素会分别靠左右两端和中间均匀分布；设置为 FlexAlign.SpaceAround 时，元素周围的空白间距相等；设置为 FlexAlign.SpaceEvenly 时，元素之间以及与容器边缘的间距都相等 。
垂直方向排列：在 Column 容器中，同样
权重分配技巧
（一）layoutWeight 属性
在 HarmonyOS 的线性布局中，权重分配是一项非常实用的技巧，它能让我们更灵活地控制子组件在布局中的大小比例。权重分配主要通过 layoutWeight 属性来实现 。layoutWeight 属性是一个浮点数值，用于表示组件在布局中的相对权重。当多个子组件都设置了 layoutWeight 属性时，系统会根据这些权重值来分配剩余空间。简单来说，layoutWeight 属性决定了组件在布局中所占用的空间大小。设置的 layoutWeight 值越大，组件所占用的空间也就越大；相反，值越小，组件所占用的空间也就越小。例如，在一个水平方向的 Row 布局中，有两个子组件 A 和 B，若 A 的 layoutWeight 设为 1，B 的 layoutWeight 设为 2，那么在分配剩余空间时，B 将获得 A 两倍的空间 。
（二）权重分配示例
以下是一个详细的代码示例，展示如何在 HarmonyOS 中使用权重分配。在这个例子中，我们创建一个包含三个 Column 组件的 Row 布局，每个 Column 组件设置不同的 layoutWeight 值，来观察它们的大小变化效果 。
| @Entry @Component struct LayoutWeightExample { build() { Column() { Text('权重比例 1:2:3') .width('100%') .fontSize(18) .textAlign(TextAlign.Center) .margin({ top: 20 }) Row() { Column() { Text('权重为1') .textAlign(TextAlign.Center) .backgroundColor(Color.LightGray) } .layoutWeight(1) .height(150) Column() { Text('权重为2') .textAlign(TextAlign.Center) .backgroundColor(Color.LightBlue) } .layoutWeight(2) .height(150) Column() { Text('权重为3') .textAlign(TextAlign.Center) .backgroundColor(Color.LightGreen) } .layoutWeight(3) .height(150) } .width('100%') .height(200) .backgroundColor(Color.White) .margin({ top: 10 }) .border({ width: 1, color: Color.Black }) Text('权重比例 3:1:2') .width('100%') .fontSize(18) .textAlign(TextAlign.Center) .margin({ top: 20 }) Row() { Column() { Text('权重为3') .textAlign(TextAlign.Center) .backgroundColor(Color.LightGray) } .layoutWeight(3) .height(150) Column() { Text('权重为1') .textAlign(TextAlign.Center) .backgroundColor(Color.LightBlue) } .layoutWeight(1) .height(150) Column() { Text('权重为2') .textAlign(TextAlign.Center) .backgroundColor(Color.LightGreen) } .layoutWeight(2) .height(150) } .width('100%') .height(200) .backgroundColor(Color.White) .margin({ top: 10 }) .border({ width: 1, color: Color.Black }) } .width('100%') .height('100%') .backgroundColor(Color.LightYellow) } } |
在上述代码中，第一个 Row 布局内的三个 Column 组件权重比例为 1:2:3，运行效果可以看到，权重为 3 的 Column 组件占据的宽度最大，权重为 1 的 Column 组件占据宽度最小。第二个 Row 布局中，Column 组件的权重比例变为 3:1:2，此时权重为 3 的 Column 组件宽度再次发生变化，成为最宽的组件，而权重为 1 的 Column 组件宽度最小 。通过这个示例，我们可以清晰地看到不同权重比例下，组件在布局中的大小变化情况，灵活运用权重分配技巧，能够满足各种复杂的界面布局需求 。
案例实战
（一）简单登录页面布局
现在，让我们通过一个实际的案例 —— 构建一个简单的登录页面，来更深入地理解线性布局的应用。登录页面是许多应用程序的基础界面，它通常包含用户名输入框、密码输入框和登录按钮。使用线性布局，我们可以轻松地实现这样一个布局。
| @Entry @Component struct LoginPage { @State username: string = ''; @State password: string = ''; build() { Column() { // 标题 Text('用户登录') .fontSize(24) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .width('100%') .margin({ top: 30 }) // 用户名输入框 Row({ space: 10 }) { Text('用户名:') .fontSize(16) .width(80) TextInput({ placeholder: '请输入用户名' }) .width('60%') .height(40) .onChange((value: string) => { this.username = value; }) } .width('100%') .margin({ top: 20 }) // 密码输入框 Row({ space: 10 }) { Text('密码:') .fontSize(16) .width(80) TextInput({ placeholder: '请输入密码' }) .width('60%') .height(40) .password(true) .onChange((value: string) => { this.password = value; }) } .width('100%') .margin({ top: 20 }) // 登录按钮 Button('登录') .width('50%') .height(40) .backgroundColor(Color.Blue) .fontSize(16) .textColor(Color.White) .margin({ top: 30 }) .onClick(() => { if (this.username === '' || this.password === '') { console.log('用户名或密码不能为空'); return; } console.log('登录成功，用户名:', this.username, '密码:', this.password); }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } } |
在上述代码中，我们使用 Column 容器作为最外层布局，因为我们希望标题、输入框和按钮在垂直方向上依次排列。Column 容器设置了宽度为父容器的 100%，高度为 100%，并通过 justifyContent 属性将子组件在垂直方向上居中对齐，通过 alignItems 属性将子组件在水平方向上居中对齐 。
在 Column 容器内部，首先是一个 Text 组件作为页面标题，设置了较大的字体大小和加粗样式，并居中显示。然后，通过两个 Row 容器分别放置用户名和密码输入框相关的 Text 和 TextInput 组件。每个 Row 容器设置了子组件之间的间距为 10，并且用户名和密码的 Text 组件设置了固定宽度，TextInput 组件设置了宽度为父容器的 60%，以适应不同屏幕尺寸。最后，登录按钮使用 Button 组件实现，设置了宽度为 50%，高度为 40，背景颜色为蓝色，文字颜色为白色，并且添加了点击事件处理函数，用于验证用户名和密码是否为空，并在控制台输出登录信息 。
（二）分析与总结
通过这个简单登录页面的案例，我们可以看到线性布局在实际应用中的便利性和灵活性。线性布局能够快速地将组件按照水平或垂直方向排列，使得界面结构清晰、易于理解和维护。在这个案例中，Column 容器和 Row 容器的配合使用，很好地实现了登录页面的布局需求。
同时，我们也注意到一些在使用线性布局时的要点。例如，合理设置组件的宽度、高度以及对齐方式非常重要，这直接影响到界面的美观和用户体验。在设置组件宽度时，我们可以使用百分比来实现响应式布局，让界面在不同屏幕尺寸下都能保持良好的显示效果。另外，在处理输入框和按钮等交互组件时，要确保它们的大小和位置易于用户操作 。
此外，对于更复杂的登录页面，可能还需要添加更多的组件，如记住密码选项、忘记密码链接等。此时，仍然可以通过线性布局的嵌套和属性设置来实现。例如，可以在用户名和密码输入框的 Row 容器下方再添加一个 Row 容器，用于放置记住密码的 CheckBox 和忘记密码的 Text 组件，并设置合适的排列方式和对齐方式 。总之，掌握线性布局的原理和使用方法，是构建优秀 HarmonyOS 应用界面的重要基础，通过不断实践和总结，我们能够更加熟练地运用它来实现各种复杂的界面布局。
总结与展望
通过今天对 HarmonyOS 线性布局的深入学习，我们掌握了线性布局的基础原理，包括布局容器 Row 和 Column 的使用，以及主轴和交叉轴的概念。在使用方法上，学会了如何进行组件排列、间距设置、对齐方式和排列方式的调整，这些技能将帮助我们打造出美观、整齐的界面布局。同时，权重分配技巧的学习，让我们能够更灵活地控制子组件的大小比例，满足各种复杂的布局需求 。
线性布局是 HarmonyOS 应用开发中不可或缺的基础技能，它的应用场景广泛，无论是简单的界面还是复杂的应用架构，都能发挥重要作用。希望大家在今后的学习和实践中，不断练习和运用线性布局，将其与其他布局方式相结合，创造出更加出色的 HarmonyOS 应用界面 。在后续的学习中，我们还将探索更多关于 HarmonyOS 开发的知识和技巧，敬请期待！
