16.[HarmonyOS NEXT Column案例一（上）] 使用Column组件构建垂直表单布局的基础指南

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

案例演示

1. 引言

在HarmonyOS NEXT应用开发中，布局是构建用户界面的基础。本教程将详细讲解如何使用Column组件创建垂直排列的表单布局，通过一个登录表单的实例，展示Column组件的基本用法、间距控制和对齐方式等核心知识点。

2. Column组件概述

Column组件是HarmonyOS NEXT中用于垂直排列子组件的容器组件，它基于ArkUI的声明式开发范式，能够简洁高效地构建垂直布局。

2.1 Column组件的基本特性

特性	说明
排列方向	垂直方向（从上到下）
主轴	垂直方向
交叉轴	水平方向
默认尺寸	自适应内容大小
子组件排列	按声明顺序从上到下排列

2.2 Column组件的基本语法

Column(options?: { space?: number | string }) {
  // 子组件
}

其中，options参数可以设置子组件之间的间距：

• space: 子组件之间的垂直间距，可以是数字（表示vp单位）或字符串（可以指定不同单位）

3. 案例分析：登录表单的结构

我们将通过分析一个登录表单的实现，来学习Column组件的使用。这个表单包含以下元素：

1. 标题文本（"用户登录"）
2. 用户名输入框
3. 密码输入框
4. 登录按钮

3.1 组件结构

首先，让我们看一下整个组件的基本结构：

@Component
export struct FormExample {
    @State username: string = ''
    @State password: string = ''

    build() {
        Column({ space: 20 }) {
            // 子组件
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .padding({ top: 40, left: 24, right: 24 })
        .backgroundColor(0xFFFFFF)
        .height('100%')
    }
}

这个结构中：

• @Component装饰器：标识这是一个自定义组件
• @State装饰器：定义了组件的状态变量，用于存储用户名和密码
• build()方法：定义组件的UI结构
• Column({ space: 20 })：创建一个垂直布局容器，子组件之间的间距为20vp

4. Column组件的参数设置

在我们的案例中，Column组件的初始化和属性设置如下：

Column({ space: 20 }) // 子组件垂直间距20vp
{
    // 子组件
}
.justifyContent(FlexAlign.Center)
.width('100%')
.padding({ top: 40, left: 24, right: 24 })
.backgroundColor(0xFFFFFF)
.height('100%') // 撑满屏幕高度

4.1 参数详解

参数/属性	值	作用
space	20	设置子组件之间的垂直间距为20vp
justifyContent	FlexAlign.Center	设置子组件在主轴（垂直方向）上居中对齐
width	'100%'	设置Column宽度占父容器的100%
padding	{ top: 40, left: 24, right: 24 }	设置内边距：上40vp，左右各24vp
backgroundColor	0xFFFFFF	设置背景色为白色
height	'100%'	设置高度占父容器的100%，撑满屏幕

4.2 间距控制

在Column组件中，有两种方式控制间距：

1. 通过space参数：设置所有子组件之间的统一间距

   Column({ space: 20 })
   

2. 通过margin属性：为特定子组件设置外边距（在本例中未使用，但是一种常见的间距控制方法）

4.3 对齐方式

Column组件提供了多种对齐方式控制：

1. 主轴对齐（垂直方向）：通过justifyContent属性控制

   • 本例中使用FlexAlign.Center使子组件在垂直方向居中对齐

2. 交叉轴对齐（水平方向）：

   • 整体对齐：可以通过Column的alignItems属性控制（本例未显式设置）
   • 单个子组件对齐：通过子组件的alignSelf属性控制（如标题文本的左对齐）

5. 总结

本教程的第一部分，我们详细介绍了Column组件的基本概念、参数设置、间距控制和对齐方式。通过登录表单的案例，展示了如何使用Column组件创建垂直布局的基础知识。

在下一部分中，我们将继续深入探讨表单中各个子组件的实现细节，包括Text、TextInput和Button组件的属性设置和样式定制，以及如何通过这些组件构建一个完整的登录表单界面。