【HarmonyOS】鸿蒙开发（四）：数据绑定与表单交互实践
完成“编辑个人资料”页面的开发1. 页面包含姓名、年龄、性别、学号、密码五个输入项，其中性别使用Select组件，其余使用TextInput组件2. 底部设置“保存”和“重置”两个按钮3. 定义UserInfo接口规范数据结构，包含姓名、年龄、性别（二元类型）、学号、密码4. 创建myInfo对象存储用户信息，初始值为空5. 使用@State实现页面数据双向绑定，输入框内容实时同步到myInfo6
鸿蒙开发（四）：数据绑定与表单交互实践
目录
- 一、实验内容
- 二、开发过程与核心知识点
- 三、运行结果
- 四、学习总结
一、实验内容
本次实验目标是完成“编辑个人资料”页面的开发
整体效果：
具体要求如下：
-
页面包含姓名、年龄、性别、学号、密码五个输入项，其中性别使用Select组件，其余使用TextInput组件
-
底部设置“保存”和“重置”两个按钮
-
定义UserInfo接口规范数据结构，包含姓名、年龄、性别（二元类型）、学号、密码
-
创建myInfo对象存储用户信息，初始值为空
-
使用@State实现页面数据双向绑定，输入框内容实时同步到myInfo
-
点击“保存”按钮后，通过弹窗（promptAction）显示输入的信息
-
点击“重置”按钮后，清空所有输入框内容
二、开发过程与核心知识点
1. 数据结构定义
// 定义用户信息接口
interface UserInfo {
name: string;
age: string;
gender: '男' | '女'; // 二元类型，仅允许"男"或"女"
student_ID: string;
password: string;
}
知识点：通过TypeScript接口（interface）规范数据结构，使用联合类型（'男' | '女'）限制性别取值范围。
2. 响应式数据声明
@Entry
@Component
struct PersonInfo {
// 用@State装饰器声明响应式对象，初始值为空
@State myInfo: UserInfo = {
name: '',
age: '',
gender: '男', // 默认性别为男
student_ID: '',
password: ''
}
// ...
}
知识点：@State是ArkUI中的状态装饰器，用于声明组件内部的响应式数据。当数据发生变化时，依赖该数据的UI会自动更新，实现数据与UI的联动。
3. 表单组件实现
（1）姓名输入框
Row() {
Text('姓名').padding({ right: 30 })
TextInput({
placeholder: '请输入姓名',
text: this.myInfo.name // 绑定myInfo.name
})
.onChange((name) => {
this.myInfo.name = name // 输入变化时更新数据
})
.width('70%')
.borderRadius(10)
}
知识点：TextInput组件通过text属性绑定数据（myInfo.name），onChange事件监听输入变化并同步更新数据，实现双向绑定。
（2）性别选择器（Select组件）
Row() {
Text('性别').padding({ right: 30 })
Select([{ value: '男' }, { value: '女' }])
.value(this.myInfo.gender) // 绑定当前选中值
.onSelect((index, value) => {
this.myInfo.gender = value as '男' | '女' // 转换类型并更新数据
})
.width('70%')
.borderRadius(10)
}
知识点：Select组件通过value属性绑定选中值，onSelect事件监听选择变化，将选中值同步到myInfo.gender。
（3）密码输入框（带加密显示）
Row() {
Text('密码').padding({ right: 30 })
TextInput({
placeholder: '请输入密码',
text: this.myInfo.password
})
.type(InputType.Password) // 设置为密码类型，输入内容显示为圆点
.onChange((password) => {
this.myInfo.password = password
})
.width('70%')
.borderRadius(10)
}
知识点：TextInput通过type(InputType.Password)设置为密码输入模式，保护敏感信息。
4. 按钮交互逻辑
（1）保存按钮（弹窗提示）
Button('保存')
.width(140)
.backgroundColor('#353a88')
.onClick(() => {
// 调用promptAction显示弹窗
promptAction.showToast({
message: `保存成功:\n姓名：${this.myInfo.name}\n年龄：${this.myInfo.age}\n性别：${this.myInfo.gender}\n学号：${this.myInfo.student_ID}\n密码：${this.myInfo.password}`
})
})
知识点：promptAction.showToast用于显示轻量级弹窗，message属性支持换行符（\n）格式化文本，展示保存的用户信息。
（2）重置按钮（清空数据）
Button('重置')
.width(140)
.backgroundColor('#2d3f8b')
.onClick(() => {
// 重置myInfo所有属性为空（性别恢复默认值）
this.myInfo.name = ''
this.myInfo.age = ''
this.myInfo.gender = '男'
this.myInfo.student_ID = ''
this.myInfo.password = ''
})
知识点：通过点击事件（onClick）直接修改myInfo的属性值，由于数据被@State修饰，UI会自动同步更新，实现输入框清空效果。
5. 完整代码
// 导入弹窗工具
import { promptAction } from '@kit.ArkUI';
// 定义用户信息接口
interface UserInfo {
name: string;
age: string;
gender: '男' | '女';
student_ID: string;
password: string;
}
@Entry
@Component
struct PersonInfo {
// 响应式数据对象
@State myInfo: UserInfo = {
name: '',
age: '',
gender: '男',
student_ID: '',
password: ''
}
build() {
Column() {
// 顶部标题栏
Row() {
Image($r('app.media.ic_public_arrow_left')).width(30)
Text('编辑个人资料')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.offset({ x: '25%' })
}
.width('100%')
.padding(10)
// Logo图片
Image($r('app.media.HenuLogo')).width(140).padding({ top: 20, bottom: 40 })
// 表单内容区
Column() {
// 姓名输入行
Row() {
Text('姓名').padding({ right: 30 })
TextInput({ placeholder: '请输入姓名', text: this.myInfo.name })
.onChange((name) => { this.myInfo.name = name })
.width('70%')
.borderRadius(10)
}.width('100%').padding({ left: 25, bottom: 5 })
// 年龄输入行
Row() {
Text('年龄').padding({ right: 30 })
TextInput({ placeholder: '请输入年龄', text: this.myInfo.age })
.onChange((age) => { this.myInfo.age = age })
.width('70%')
.borderRadius(10)
}.width('100%').padding({ left: 25, bottom: 5 })
// 性别选择行
Row() {
Text('性别').padding({ right: 30 })
Select([{ value: '男' }, { value: '女' }])
.value(this.myInfo.gender)
.onSelect((index, value) => { this.myInfo.gender = value as '男' | '女' })
.width('70%')
.borderRadius(10)
}.width('100%').padding({ left: 25, bottom: 5 })
// 学号输入行
Row() {
Text('学号').padding({ right: 30 })
TextInput({ placeholder: '请输入学号', text: this.myInfo.student_ID })
.onChange((ID) => { this.myInfo.student_ID = ID })
.width('70%')
.borderRadius(10)
}.width('100%').padding({ left: 25, bottom: 5 })
// 密码输入行
Row() {
Text('密码').padding({ right: 30 })
TextInput({ placeholder: '请输入密码', text: this.myInfo.password })
.type(InputType.Password)
.onChange((password) => { this.myInfo.password = password })
.width('70%')
.borderRadius(10)
}.width('100%').padding({ left: 25, bottom: 25 })
// 按钮行
Row({ space: 10 }) {
Button('保存')
.width(140)
.backgroundColor('#353a88')
.onClick(() => {
promptAction.showToast({
message: `保存成功:\n姓名：${this.myInfo.name}\n年龄：${this.myInfo.age}\n性别：${this.myInfo.gender}\n学号：${this.myInfo.student_ID}\n密码：${this.myInfo.password}`
})
})
Button('重置')
.width(140)
.backgroundColor('#2d3f8b')
.onClick(() => {
this.myInfo = {
name: '',
age: '',
gender: '男',
student_ID: '',
password: ''
}
})
}
}
}
}
}
三、运行结果
页面运行后呈现以下效果：
- 初始状态：所有输入框为空，性别默认选中“男”
- 输入交互：在输入框中填写信息时，内容实时同步到myInfo对象
- 保存功能：点击“保存”后，弹窗显示完整的用户信息（姓名、年龄、性别、学号、密码）
- 重置功能：点击“重置”后，所有输入框清空，性别恢复为默认值“男”
四、学习总结
掌握的知识点
- 学会使用TypeScript接口定义数据结构，规范数据格式
- 理解并应用
@State装饰器实现数据双向绑定，确保UI与数据同步 - 掌握TextInput（含密码类型）和Select组件的使用，实现表单输入
- 学会使用
promptAction.showToast显示弹窗提示，反馈用户操作结果 - 通过按钮点击事件实现数据保存与重置逻辑
遇到的问题及解决思路
- 问题：
promptAction.showToast中showToast被划横线，提示写法老旧
说明：可能是API版本更新导致方法名称或参数变化，需查阅最新官方文档确认新的弹窗调用方式（如prompt.showToast）
本次实验聚焦于表单交互与数据管理，通过响应式状态实现了页面的动态更新，为后续更复杂的用户交互功能奠定了基础。
火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。
更多推荐
36
0- 0
已为社区贡献4条内容
所有评论(0)