项目已开源，开源地址： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial ， 欢迎fork & star
效果演示
1. 概述
在应用开发中，表单是用户输入信息的重要界面元素。一个设计良好的表单不仅能提高用户体验，还能使界面更加美观整洁。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个表单输入框，重点介绍标签与输入框之间的弹性空间分配技术，帮助开发者构建出专业、美观的表单界面。
2. 表单布局的设计原则
在设计表单布局时，需要考虑以下几个关键原则：
- 一致性：保持标签和输入框的对齐方式一致，提供视觉上的连贯性。
- 空间分配：合理分配标签和输入框的空间，确保输入框有足够的空间显示用户输入的内容。
- 响应式：在不同屏幕尺寸下，表单元素能够自适应调整。
- 可访问性：确保表单元素易于理解和操作，提供清晰的视觉反馈。
3. 案例分析：表单输入框
本案例展示了如何创建一个包含标签和输入框的表单项，通过弹性空间分配技术，使输入框能够自适应占用剩余空间。
3.1 完整代码
@Component export struct FormInputExample { @State username: string = '' build() { Row({ space: 16, }) // 垂直居中，间距16vp { Text('用户名：') .width(60) .fontSize(14) .textAlign(TextAlign.End) // 标签右对齐 TextInput({text:this.username}) .flexGrow(1) // 弹性填充剩余空间 .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4) } .width('80%') .height(48) .padding({ left: 24, right: 24 }) .alignItems (VerticalAlign.Center) } }
3.2 代码详解
3.2.1 组件声明与状态管理
@Component export struct FormInputExample { @State username: string = ''
这部分代码声明了一个名为FormInputExample的自定义组件，并使用@State装饰器定义了一个响应式状态变量username，初始值为空字符串。当用户在输入框中输入内容时，这个状态变量会自动更新，并触发界面重新渲染。
@State装饰器的作用是：
特性 |
说明 |
响应式 |
当状态变量值发生变化时，组件会自动重新渲染 |
局部性 |
状态变量仅在当前组件内有效，不会影响其他组件 |
持久性 |
组件重新渲染时，状态变量的值会被保留 |
3.2.2 Row容器设置
Row({ space: 16, }) // 垂直居中，间距16vp { // 子组件 } .width('80%') .height(48) .padding({ left: 24, right: 24 }) .alignItems (VerticalAlign.Center)
这部分代码创建了一个Row容器，用于水平排列标签和输入框。Row容器的属性设置如下：
属性 |
值 |
说明 |
space |
16 |
子组件之间的间距为16vp |
width |
'80%' |
容器宽度为父容器的80% |
height |
48 |
容器高度为48vp |
padding |
{ left: 24, right: 24 } |
左右内边距各为24vp |
alignItems |
VerticalAlign.Center |
子组件在垂直方向上居中对齐 |
这些设置确保了表单项在视觉上的美观和一致性，同时提供了足够的空间来容纳标签和输入框。
3.2.3 标签组件
Text('用户名：') .width(60) .fontSize(14) .textAlign(TextAlign.End) // 标签右对齐
这部分代码创建了一个文本标签，显示"用户名："。标签的属性设置如下：
属性 |
值 |
说明 |
width |
60 |
标签宽度固定为60vp |
fontSize |
14 |
文字大小为14fp |
textAlign |
TextAlign.End |
文本右对齐，使标签文本靠近输入框 |
标签宽度固定为60vp，这是为了确保所有表单项的标签对齐，提供统一的视觉效果。文本右对齐使标签文本靠近输入框，增强视觉上的关联性。
3.2.4 输入框组件
TextInput({text:this.username}) .flexGrow(1) // 弹性填充剩余空间 .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4)
这部分代码创建了一个文本输入框，用于接收用户输入。输入框的属性设置如下：
属性 |
值 |
说明 |
text |
this.username |
绑定到组件的username状态变量 |
flexGrow |
1 |
弹性填充Row容器中的剩余空间 |
fontSize |
14 |
文字大小为14fp |
padding |
8 |
内边距为8vp，提供足够的文本输入空间 |
border |
{ width: 1, color: 0xD9D9D9 } |
1像素宽的浅灰色边框 |
borderRadius |
4 |
边框圆角为4vp，提供现代感的外观 |
其中，最关键的属性是flexGrow(1)，它使输入框能够自动扩展占用Row容器中的剩余空间，实现了弹性空间分配。
4. 弹性空间分配的核心技术
弹性空间分配是实现响应式布局的关键技术之一。在HarmonyOS NEXT中，可以通过以下属性来控制组件的弹性空间分配：
4.1 flexGrow属性
flexGrow属性定义了组件在容器中分配剩余空间的比例。在本案例中，我们为输入框设置了flexGrow(1)，使其能够占用Row容器中除标签和间距外的所有剩余空间。
TextInput({text:this.username}) .flexGrow(1) // 弹性填充剩余空间
flexGrow的工作原理：
- 首先，容器会为所有子组件分配其固定尺寸（如标签的width: 60）
- 然后，计算容器中的剩余空间
- 最后，根据每个子组件的flexGrow值，按比例分配剩余空间
如果多个子组件都设置了flexGrow，则按照各自的值比例分配剩余空间：
组件 |
flexGrow值 |
分配空间比例 |
组件A |
1 |
1/3 |
组件B |
2 |
2/3 |
4.2 flexShrink属性
与flexGrow相对应，flexShrink属性定义了当容器空间不足时，组件的收缩比例。默认值为1，值越大，收缩得越多。
// 示例：当空间不足时，优先收缩此组件 Component1() .flexShrink(2)
4.3 flexBasis属性
flexBasis属性定义了在分配多余空间之前，组件的初始大小。可以设置为具体的尺寸值或百分比。
// 示例：初始宽度为100vp，然后再考虑flexGrow和flexShrink Component1() .flexBasis(100) .flexGrow(1)
4.4 flex属性（简写）
flex属性是flexGrow、flexShrink和flexBasis的简写形式。
// 等同于.flexGrow(1).flexShrink(1).flexBasis(0) Component1() .flex(1)
5. 表单布局的最佳实践
5.1 标签对齐方式
在表单设计中，标签的对齐方式对用户体验有重要影响。常见的对齐方式有：
对齐方式 |
实现方法 |
适用场景 |
右对齐 |
|
标签长度不一，需要整齐排列 |
左对齐 |
|
强调标签的重要性，易于阅读 |
顶对齐 |
使用Column布局，标签在上 |
空间有限，表单项较多 |
本案例采用了标签右对齐的方式，这是因为：
- 右对齐使标签文本靠近输入框，减少用户视线移动距离
- 当多个表单项垂直排列时，右对齐的标签形成一条垂直线，提供整齐的视觉效果
5.2 输入框样式设计
输入框的样式设计应考虑以下几点：
- 适当的内边距：提供足够的空间显示用户输入的文本
- 明确的边框：使用户能够清楚地识别输入区域
- 适当的圆角：提供现代感的外观，增强视觉舒适度
- 一致的字体大小：与标签保持一致，提供统一的视觉体验
本案例中的输入框样式设计：
TextInput({text:this.username}) .fontSize(14) // 与标签字体大小一致 .padding(8) // 适当的内边距 .border({ width: 1, color: 0xD9D9D9 }) // 明确但不突兀的边框 .borderRadius(4) // 适当的圆角
5.3 响应式布局考虑
为了使表单在不同屏幕尺寸下都能提供良好的用户体验，可以考虑以下响应式布局策略：
- 使用百分比宽度：如本案例中的
.width('80%')，使表单能够适应不同宽度的容器 - 使用flexGrow：使输入框能够自适应占用剩余空间
- 设置最小宽度：确保在小屏幕上，输入框仍有足够的空间供用户输入
// 示例：设置最小宽度 TextInput({text:this.username}) .flexGrow(1) .minWidth(120) // 确保最小宽度
6. 扩展与应用
6.1 多字段表单
基于本案例的设计原则，可以轻松扩展为包含多个字段的表单：
@Component struct MultiFieldForm { @State username: string = '' @State password: string = '' @State email: string = '' build() { Column({ space: 16 }) { // 用户名字段 Row({ space: 16 }) { Text('用户名：') .width(60) .fontSize(14) .textAlign(TextAlign.End) TextInput({text:this.username}) .flexGrow(1) .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4) } .width('80%') .height(48) .alignItems(VerticalAlign.Center) // 密码字段 Row({ space: 16 }) { Text('密码：') .width(60) .fontSize(14) .textAlign(TextAlign.End) TextInput({text:this.password, type: InputType.Password}) .flexGrow(1) .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4) } .width('80%') .height(48) .alignItems(VerticalAlign.Center) // 邮箱字段 Row({ space: 16 }) { Text('邮箱：') .width(60) .fontSize(14) .textAlign(TextAlign.End) TextInput({text:this.email}) .flexGrow(1) .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4) } .width('80%') .height(48) .alignItems(VerticalAlign.Center) } .width('100%') .padding(16) } }
6.2 表单项组件化
为了提高代码复用性，可以将表单项封装为一个独立的组件：
@Component struct FormItem { label: string @Link text: string type?: InputType = InputType.Normal build() { Row({ space: 16 }) { Text(this.label) .width(60) .fontSize(14) .textAlign(TextAlign.End) TextInput({text:this.text, type: this.type}) .flexGrow(1) .fontSize(14) .padding(8) .border({ width: 1, color: 0xD9D9D9 }) .borderRadius(4) } .width('80%') .height(48) .alignItems(VerticalAlign.Center) } }
然后在表单中使用这个组件：
@Component struct LoginForm { @State username: string = '' @State password: string = '' build() { Column({ space: 16 }) { FormItem({ label: '用户名：', text: $username }) FormItem({ label: '密码：', text: $password, type: InputType.Password }) Button('登录') .width(120) .height(40) .margin({ top: 24 }) } .width('100%') .padding(16) } }
6.3 表单验证
在实际应用中，表单通常需要进行输入验证。可以扩展表单项组件，添加验证功能：
@Component struct ValidatedFormItem { label: string @Link text: string type?: InputType = InputType.Normal validator?: (value: string) => string | null // 返回错误信息或null @State errorMsg: string = '' build() { Column({ space: 4 }) { Row({ space: 16 }) { Text(this.label) .width(60) .fontSize(14) .textAlign(TextAlign.End) TextInput({text:this.text, type: this.type}) .flexGrow(1) .fontSize(14) .padding(8) .border({ width: 1, color: this.errorMsg ? 0xFF0000 : 0xD9D9D9 }) .borderRadius(4) .onChange((value) => { if (this.validator) { this.errorMsg = this.validator(value) || '' } }) } .width('80%') .height(48) .alignItems(VerticalAlign.Center) if (this.errorMsg) { Text(this.errorMsg) .fontSize(12) .fontColor(0xFF0000) .margin({ left: 76 }) // 60(标签宽度) + 16(间距) } } } }
7. 总结
本教程详细讲解了如何使用HarmonyOS NEXT的Row组件创建表单输入框，重点介绍了标签与输入框之间的弹性空间分配技术。
