35.[HarmonyOS NEXT Row案例三] 打造高效表单输入框：标签与输入框的弹性空间分配技巧

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

效果演示

1. 概述

在应用开发中，表单是用户输入信息的重要界面元素。一个设计良好的表单不仅能提高用户体验，还能使界面更加美观整洁。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个表单输入框，重点介绍标签与输入框之间的弹性空间分配技术，帮助开发者构建出专业、美观的表单界面。

2. 表单布局的设计原则

在设计表单布局时，需要考虑以下几个关键原则：

1. 一致性：保持标签和输入框的对齐方式一致，提供视觉上的连贯性。
2. 空间分配：合理分配标签和输入框的空间，确保输入框有足够的空间显示用户输入的内容。
3. 响应式：在不同屏幕尺寸下，表单元素能够自适应调整。
4. 可访问性：确保表单元素易于理解和操作，提供清晰的视觉反馈。

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的工作原理：

1. 首先，容器会为所有子组件分配其固定尺寸（如标签的width: 60）
2. 然后，计算容器中的剩余空间
3. 最后，根据每个子组件的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 标签对齐方式

在表单设计中，标签的对齐方式对用户体验有重要影响。常见的对齐方式有：

对齐方式	实现方法	适用场景
右对齐	.textAlign(TextAlign.End)	标签长度不一，需要整齐排列
左对齐	.textAlign(TextAlign.Start)	强调标签的重要性，易于阅读
顶对齐	使用Column布局，标签在上	空间有限，表单项较多

本案例采用了标签右对齐的方式，这是因为：

1. 右对齐使标签文本靠近输入框，减少用户视线移动距离
2. 当多个表单项垂直排列时，右对齐的标签形成一条垂直线，提供整齐的视觉效果

5.2 输入框样式设计

输入框的样式设计应考虑以下几点：

1. 适当的内边距：提供足够的空间显示用户输入的文本
2. 明确的边框：使用户能够清楚地识别输入区域
3. 适当的圆角：提供现代感的外观，增强视觉舒适度
4. 一致的字体大小：与标签保持一致，提供统一的视觉体验

本案例中的输入框样式设计：

TextInput({text:this.username})
    .fontSize(14)      // 与标签字体大小一致
    .padding(8)        // 适当的内边距
    .border({ width: 1, color: 0xD9D9D9 }) // 明确但不突兀的边框
    .borderRadius(4)   // 适当的圆角

5.3 响应式布局考虑

为了使表单在不同屏幕尺寸下都能提供良好的用户体验，可以考虑以下响应式布局策略：

1. 使用百分比宽度：如本案例中的.width('80%')，使表单能够适应不同宽度的容器
2. 使用flexGrow：使输入框能够自适应占用剩余空间
3. 设置最小宽度：确保在小屏幕上，输入框仍有足够的空间供用户输入

// 示例：设置最小宽度
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组件创建表单输入框，重点介绍了标签与输入框之间的弹性空间分配技术。