21.[HarmonyOS NEXT Column案例三（下）] 弹性空间分配与底部对齐实现详解

项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ，欢迎fork & star

效果演示

1. 引言

在上一部分中，我们介绍了Column组件的垂直对齐能力和弹性空间分配的基本概念，并分析了三段式布局的整体结构。本教程将继续深入探讨中间内容区的弹性空间分配实现和底部按钮栏的详细设计，帮助开发者掌握更复杂布局的构建技巧。

2. 中间内容区：弹性空间分配实现

2.1 Flex容器的使用

在我们的案例中，中间内容区使用了Flex容器来实现弹性空间分配：

// 弹性填充区域（中间内容）
Flex() {
    Text('中间内容\n弹性填充')
        .textAlign(TextAlign.Center)
        .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
    Text(' 弹性填充')
        .textAlign(TextAlign.Center)
        .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
}
.width('100%')
.backgroundColor(0xF0F0F0)

2.2 Flex与Column的区别

特性	Flex	Column
默认方向	水平方向	垂直方向
主轴	默认为水平方向	垂直方向
交叉轴	默认为垂直方向	水平方向
适用场景	需要在一行内灵活分配空间	需要垂直排列组件

在这个案例中，我们使用Flex容器是为了在水平方向上分配空间，这是Flex的默认行为。如果需要在垂直方向分配空间，可以通过设置Flex的direction属性为FlexDirection.Column来实现。

2.3 Text组件的flexGrow属性详解

在Flex容器中，我们为两个Text组件分别设置了不同的flexGrow值：

Text('中间内容\n弹性填充')
    .textAlign(TextAlign.Center)
    .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3

Text(' 弹性填充')
    .textAlign(TextAlign.Center)
    .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3

2.3.1 flexGrow值的计算方式

当容器中有多个设置了flexGrow的组件时，剩余空间的分配遵循以下公式：

组件获得的额外空间 = 剩余空间 × (组件的flexGrow值 ÷ 所有flexGrow值之和)

在我们的案例中：

第一个Text的flexGrow为2
第二个Text的flexGrow为1
flexGrow值之和为3
第一个Text获得剩余空间的2/3
第二个Text获得剩余空间的1/3

2.3.2 Text组件的其他属性

属性	值	作用
textAlign	TextAlign.Center	设置文本在组件内水平居中对齐
flexGrow	2或1	设置组件在剩余空间中的扩展比例

2.4 Flex容器的样式设置

Flex() {
    // 子组件
}
.width('100%')
.backgroundColor(0xF0F0F0)

属性	值	作用
width	'100%'	设置Flex容器宽度占父容器的100%
backgroundColor	0xF0F0F0	设置背景色为浅灰色，区分不同区域

3. 底部按钮栏：固定高度与底部对齐

3.1 底部区域的整体结构

// 底部按钮栏（固定高度，底部对齐）
Column({
    space: 12
}) {
    Row({ space: 24 }) {
        Button('取消')
            .width(80)
            .height(40)
            .fontColor(0x007DFF)
            .border({ width: 1, color: 0x007DFF })
            .borderRadius(4)

        Button('确定')
            .width(120)
            .height(40)
            .backgroundColor(0x007DFF)
            .fontColor(0xFFFFFF)
            .borderRadius(4)
    }
}
.justifyContent(FlexAlign.End)
.width('100%')
.height(120)
.padding({ bottom: 24, left: 24, right: 24 })

3.2 Column容器属性详解

属性	值	作用
space	12	设置子组件之间的垂直间距为12vp
justifyContent	FlexAlign.End	设置子组件在垂直方向上底部对齐
width	'100%'	设置Column宽度占父容器的100%
height	120	设置Column高度为固定的120vp
padding	{ bottom: 24, left: 24, right: 24 }	设置内边距：底部24vp，左右各24vp

底部按钮栏使用了固定高度的Column容器，通过justifyContent属性设置为FlexAlign.End，确保内部的按钮行位于容器底部。这种设计在弹窗、表单等界面中非常常见，可以确保操作按钮始终位于视图底部，提高用户操作的便捷性。

3.3 Row组件：水平排列按钮

Row({ space: 24 }) {
    // 按钮组件
}

属性	值	作用
space	24	设置子组件之间的水平间距为24vp

Row组件用于水平排列子组件，在这里用于并排放置"取消"和"确定"两个按钮。通过space属性设置按钮之间的间距，使界面更加美观。

3.4 Button组件详解

3.4.1 取消按钮

Button('取消')
    .width(80)
    .height(40)
    .fontColor(0x007DFF)
    .border({ width: 1, color: 0x007DFF })
    .borderRadius(4)

属性	值	作用
width	80	设置按钮宽度为80vp
height	40	设置按钮高度为40vp
fontColor	0x007DFF	设置文字颜色为蓝色
border	{ width: 1, color: 0x007DFF }	设置边框宽度为1vp，颜色为蓝色
borderRadius	4	设置边框圆角为4vp

取消按钮采用了镂空设计（只有边框，无背景色），这是常见的次要操作按钮样式，视觉重量较轻。

3.4.2 确定按钮

Button('确定')
    .width(120)
    .height(40)
    .backgroundColor(0x007DFF)
    .fontColor(0xFFFFFF)
    .borderRadius(4)

属性	值	作用
width	120	设置按钮宽度为120vp，比取消按钮宽
height	40	设置按钮高度为40vp
backgroundColor	0x007DFF	设置背景色为蓝色
fontColor	0xFFFFFF	设置文字颜色为白色
borderRadius	4	设置边框圆角为4vp

确定按钮采用了填充设计（有背景色），这是常见的主要操作按钮样式，视觉重量较重，更容易吸引用户注意。

4. 布局设计规范与最佳实践

4.1 三段式布局的设计原则

原则	说明	实现方式
清晰的视觉层次	区分不同功能区域	使用不同的背景色、间距和对齐方式
合理的空间分配	重要内容区域获得更多空间	使用flexGrow属性按比例分配空间
一致的视觉风格	保持组件样式的一致性	统一的颜色、字体、圆角等样式
操作区域的可达性	确保按钮等操作元素易于触达	将操作按钮放在底部，并使用合适的大小

4.2 样式规范

4.2.1 间距规范

元素	间距
按钮之间	24vp
按钮与容器边缘	24vp
内容区域内边距	24vp

4.2.2 颜色规范

元素	颜色值	颜色描述
主要按钮背景	0x007DFF	蓝色
次要按钮边框	0x007DFF	蓝色
主要按钮文字	0xFFFFFF	白色
次要按钮文字	0x007DFF	蓝色
中间内容区背景	0xF0F0F0	浅灰色

4.2.3 尺寸规范

元素	尺寸
主要按钮宽度	120vp
次要按钮宽度	80vp
按钮高度	40vp
底部区域高度	120vp
按钮圆角	4vp

5. 完整代码分析

@Component
export struct SafeAreaExample {
    build() {
        Column() {
            Column() {
                // 顶部内容（固定高度）
                Text('顶部内容')
                    .fontSize(16)
                    .padding(24)
                    
                // 弹性填充区域（中间内容）
                Flex() {
                    Text('中间内容\n弹性填充')
                        .textAlign(TextAlign.Center)
                        .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
                    Text(' 弹性填充')
                        .textAlign(TextAlign.Center)
                        .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
                }
                .width('100%')
                .backgroundColor(0xF0F0F0)

                // 底部按钮栏（固定高度，底部对齐）
                Column({
                    space: 12
                }) {
                    Row({ space: 24 }) {
                        Button('取消')
                            .width(80)
                            .height(40)
                            .fontColor(0x007DFF)
                            .border({ width: 1, color: 0x007DFF })
                            .borderRadius(4)

                        Button('确定')
                            .width(120)
                            .height(40)
                            .backgroundColor(0x007DFF)
                            .fontColor(0xFFFFFF)
                            .borderRadius(4)
                    }
                }
                .justifyContent(FlexAlign.End)
                .width('100%')
                .height(120)
                .padding({ bottom: 24, left: 24, right: 24 })
            }
        }
    }
}

5.1 代码结构分析

组件定义：使用@Component装饰器定义SafeAreaExample自定义组件
外层容器：使用嵌套的Column组件创建整体布局框架
区域划分：将界面分为顶部内容、中间内容和底部按钮栏三个区域
弹性分配：在中间内容区使用flexGrow属性按2:1的比例分配空间
底部对齐：使用justifyContent(FlexAlign.End)实现底部按钮栏的底部对齐
按钮排列：使用Row组件水平排列取消和确定按钮
样式设置：为各个组件设置适当的样式属性，包括尺寸、颜色、边框等

5.2 链式调用的优势

HarmonyOS NEXT的ArkUI框架采用了链式调用的方式设置组件属性，这种方式有以下优势：

代码简洁：减少重复的组件引用，使代码更加简洁
可读性强：属性设置与组件定义紧密关联，易于理解
灵活性高：可以根据需要灵活添加或调整属性
开发效率：提高开发效率，减少代码量

6. 总结

通过本教程的两个部分，我们详细讲解了如何使用Column组件的垂直对齐能力（justifyContent）和弹性空间分配（flexGrow）创建结构合理的三段式布局，包括：

Column组件的垂直对齐能力和FlexAlign枚举值的使用
flexGrow属性的工作原理和空间分配计算方式
三段式布局的整体结构和各区域的实现细节
中间内容区的弹性空间分配实现
底部按钮栏的固定高度和底部对齐设计
布局设计规范与最佳实践