项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
案例演示
1. 引言
在上一篇教程中，我们介绍了Column组件的基本概念和参数设置。本篇将深入探讨登录表单中各个子组件的实现细节，包括Text、TextInput和Button组件的属性设置和样式定制，以及如何将这些组件组合成一个完整的登录表单界面。
2. 表单子组件详解
在我们的登录表单中，主要包含三类子组件：Text（文本）、TextInput（输入框）和Button（按钮）。下面我们将逐一分析这些组件的实现。
2.1 Text组件：标题实现
标题使用Text组件实现，代码如下：
// 标题 Text('用户登录') .fontSize(24) .fontWeight(500) .alignSelf(ItemAlign.Start) // 左对齐
2.1.1 Text组件属性详解
属性 |
值 |
作用 |
fontSize |
24 |
设置字体大小为24vp |
fontWeight |
500 |
设置字体粗细，500表示中等偏粗 |
alignSelf |
ItemAlign.Start |
设置组件在交叉轴（水平方向）上的对齐方式为起始位置（左对齐） |
2.1.2 alignSelf属性的重要性
alignSelf属性允许单个子组件覆盖Column容器的默认对齐方式。在本例中，虽然Column没有显式设置alignItems属性（默认为居中），但标题文本通过alignSelf(ItemAlign.Start)实现了左对齐，这是表单设计中常见的布局方式。
ItemAlign枚举值包括：
Start：起始位置对齐（左对齐）Center：居中对齐End：结束位置对齐（右对齐）Stretch：拉伸填充
2.2 TextInput组件：输入框实现
登录表单包含两个输入框：用户名输入框和密码输入框。它们使用TextInput组件实现，具有相似的样式但功能略有不同。
2.2.1 用户名输入框
// 用户名输入框 TextInput({ text: this.username, placeholder: '请输入用户名' }) .fontSize(16) .padding(12) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(8)
2.2.2 密码输入框
// 密码输入框 TextInput({ text: this.username, placeholder: '请输入密码' }) .fontSize(16) .padding(12) .type(InputType.Password) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(8)
2.2.3 TextInput组件属性详解
属性 |
值 |
作用 |
text |
this.username |
绑定输入框的文本值到组件的状态变量 |
placeholder |
'请输入用户名'/'请输入密码' |
设置输入框的提示文本 |
fontSize |
16 |
设置字体大小为16vp |
padding |
12 |
设置内边距为12vp，使文本与边框保持适当距离 |
type |
InputType.Password（仅密码框） |
设置输入类型为密码，显示为掩码字符 |
border |
{ width: 1, color: 0xD9D9D9 } |
设置边框宽度为1vp，颜色为浅灰色 |
borderRadius |
8 |
设置边框圆角为8vp，使输入框更美观 |
2.2.4 注意事项
在代码中，密码输入框绑定了this.username而非this.password，这可能是一个错误。正确的实现应该是：
// 密码输入框 TextInput({ text: this.password, placeholder: '请输入密码' })
这样才能正确地将密码输入框的值绑定到password状态变量。
2.3 Button组件：登录按钮实现
登录按钮使用Button组件实现，代码如下：
// 登录按钮 Button('立即登录') .width('100%') .height(48) .backgroundColor(0x007DFF) .fontColor(0xFFFFFFFF) .fontSize(16) .borderRadius(8)
2.3.1 Button组件属性详解
属性 |
值 |
作用 |
width |
'100%' |
设置按钮宽度占父容器的100% |
height |
48 |
设置按钮高度为48vp |
backgroundColor |
0x007DFF |
设置背景色为蓝色 |
fontColor |
0xFFFFFFFF |
设置字体颜色为白色 |
fontSize |
16 |
设置字体大小为16vp |
borderRadius |
8 |
设置边框圆角为8vp，使按钮更美观 |
3. 状态管理与数据绑定
在表单组件中，状态管理和数据绑定是重要的概念。我们的FormExample组件使用@State装饰器定义了两个状态变量：
@State username: string = '' @State password: string = ''
3.1 @State装饰器的作用
@State装饰器用于定义组件的内部状态。当状态变量的值发生变化时，框架会自动重新渲染组件，更新UI。
3.2 数据绑定机制
在TextInput组件中，我们通过text参数将输入框的值与状态变量绑定：
TextInput({ text: this.username, placeholder: '请输入用户名' })
这种双向绑定机制确保：
- 当用户在输入框中输入文本时，状态变量的值会自动更新
- 当状态变量的值通过其他方式更新时，输入框的显示也会相应更新
4. 样式一致性与设计规范
在表单设计中，保持样式一致性是提升用户体验的关键。我们的登录表单遵循了以下设计规范：
4.1 间距规范
元素 |
间距 |
子组件之间 |
20vp（通过Column的space参数设置） |
表单与屏幕顶部 |
40vp（通过padding.top设置） |
表单与屏幕左右边缘 |
24vp（通过padding.left和padding.right设置） |
输入框内文本与边框 |
12vp（通过TextInput的padding设置） |
4.2 字体规范
元素 |
字体大小 |
字体粗细 |
标题 |
24vp |
500（中等偏粗） |
输入框 |
16vp |
默认 |
按钮 |
16vp |
默认 |
4.3 颜色规范
元素 |
颜色 |
十六进制值 |
背景 |
白色 |
0xFFFFFF |
输入框边框 |
浅灰色 |
0xD9D9D9 |
按钮背景 |
蓝色 |
0x007DFF |
按钮文字 |
白色 |
0xFFFFFFFF |
4.4 圆角规范
输入框和按钮统一使用8vp的圆角，保持视觉一致性。
5. 完整代码分析
让我们回顾完整的FormExample组件代码：
@Component export struct FormExample { @State username: string = '' @State password: string = '' build() { Column({ space: 20 }) // 子组件垂直间距20vp { // 标题 Text('用户登录') .fontSize(24) .fontWeight(500) .alignSelf(ItemAlign.Start) // 左对齐 // 用户名输入框 TextInput({ text: this.username, placeholder: '请输入用户名' }) .fontSize(16) .padding(12) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(8) // 密码输入框 TextInput({ text: this.username, placeholder: '请输入密码' }) .fontSize(16) .padding(12) .type(InputType.Password) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(8) // 登录按钮 Button('立即登录') .width('100%') .height(48) .backgroundColor(0x007DFF) .fontColor(0xFFFFFFFF) .fontSize(16) .borderRadius(8) } .justifyContent(FlexAlign.Center) .width('100%') .padding({ top: 40, left: 24, right: 24 }) .backgroundColor(0xFFFFFF) .height('100%') // 撑满屏幕高度 } }
5.1 代码结构分析
- 组件定义：使用@Component装饰器定义FormExample自定义组件
- 状态定义：使用@State装饰器定义username和password状态变量
- 布局容器：使用Column组件创建垂直布局
- 子组件排列：按照标题、用户名输入框、密码输入框、登录按钮的顺序排列
- 样式设置：为每个组件设置适当的样式属性
- 容器样式：为Column容器设置对齐方式、尺寸、内边距和背景色
5.2 链式调用的优势
HarmonyOS NEXT的ArkUI框架采用链式调用的方式设置组件属性，这种方式有以下优势：
- 代码简洁：避免了重复的组件引用
- 可读性强：属性设置清晰可见
- 灵活性高：可以方便地添加或移除属性
6. 总结
通过本教程的两个部分，我们详细讲解了如何使用Column组件创建垂直排列的表单布局，包括：
- Column组件的基本概念和参数设置
- 表单子组件（Text、TextInput、Button）的实现细节
- 状态管理与数据绑定机制
- 样式一致性与设计规范
