本文使用 TextInput 文本输入框、密码输入框与按钮组件，搭建一个完整的用户注册页面，讲解输入框基础用法、密码类型设置、表单布局，适合鸿蒙入门学习。

一、功能介绍

本案例实现简易注册表单：

1. 页面居中展示注册标题、账号输入框、两次密码输入框、注册按钮；
2. 密码框设置密文隐藏模式，保护隐私；
3. 统一样式：浅灰色背景、圆角边框，界面整洁美观。

二、原代码问题 & 完整优化代码

原代码存在问题

1. 未使用 @State 状态变量，无法获取输入框内容，注册按钮无实际逻辑；
2. 输入框、按钮缺少间距，布局拥挤；
3. 密码输入框未设置字体大小，样式不统一；
4. 按钮无点击事件，仅为静态样式。

优化后可运行完整版代码

typescript

运行

@Entry
@Component
struct TextInputDemo {
  // 定义状态变量，接收表单输入内容
  @State account: string = ""
  @State pwd: string = ""
  @State rePwd: string = ""

  build() {
    Column() {
      Text('用户注册')
        .fontSize(28)
        .fontWeight(FontWeight.Bolder)
        .margin({ bottom: 20 })

      // 账号输入框
      TextInput({
        text: this.account,
        placeholder: "请输入学号/手机号码"
      })
        .width(320)
        .height(60)
        .backgroundColor(0xf5f5f5)
        .fontSize(20)
        .borderRadius(10)
        .margin({ bottom: 15 })
        .onChange((val: string) => {
          this.account = val
        })

      // 密码输入框（密文模式）
      TextInput({
        text: this.pwd,
        placeholder: "请输入密码"
      })
        .type(InputType.Password)
        .width(320)
        .height(60)
        .backgroundColor(0xf5f5f5)
        .fontSize(20)
        .borderRadius(10)
        .margin({ bottom: 15 })
        .onChange((val: string) => {
          this.pwd = val
        })

      // 确认密码输入框
      TextInput({
        text: this.rePwd,
        placeholder: "请再次输入密码"
      })
        .type(InputType.Password)
        .width(320)
        .height(60)
        .backgroundColor(0xf5f5f5)
        .fontSize(20)
        .borderRadius(10)
        .margin({ bottom: 30 })
        .onChange((val: string) => {
          this.rePwd = val
        })

      // 注册按钮，增加点击校验逻辑
      Button('注册')
        .height(50)
        .width(200)
        .fontSize(25)
        .onClick(() => {
          if (this.account === "") {
            Alert.show({ title: "提示", message: "账号不能为空" })
            return
          }
          if (this.pwd !== this.rePwd) {
            Alert.show({ title: "提示", message: "两次密码输入不一致" })
            return
          }
          Alert.show({ title: "注册成功", message: `账号：${this.account}` })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

三、核心代码解析

1. 状态变量定义

typescript

运行

@State account: string = ""
@State pwd: string = ""
@State rePwd: string = ""

使用 @State 声明三个字符串状态，分别存储账号、密码、确认密码，实现输入内容与数据双向绑定。

2. 整体布局

typescript

运行

Column()
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)

• Column 垂直布局容器铺满全屏；
• justifyContent(FlexAlign.Center)：垂直居中；
• alignItems(HorizontalAlign.Center)：水平居中； 实现整个表单页面居中展示。

3. TextInput 输入框组件

基础输入框（账号）

typescript

运行

TextInput({ text: this.account, placeholder: "请输入学号/手机号码" })

• text：绑定状态变量，回显输入内容；
• placeholder：输入框默认提示文字；
• onChange：监听输入事件，实时把输入内容赋值给状态变量。

密码输入框

typescript

运行

.type(InputType.Password)

InputType.Password 是密码专属类型，输入内容会自动变成小黑点密文，保护账号安全。

4. 样式统一设置

• width / height：固定输入框宽高，界面规整；
• backgroundColor(0xf5f5f5)：浅灰色背景，区分输入框与页面；
• borderRadius(10)：圆角样式，弱化生硬直角；
• margin：设置组件上下间距，避免元素挤压。

5. 注册按钮 & 表单校验

typescript

运行

Button('注册')
  .onClick(() => {
    // 非空判断 + 密码一致性校验
  })

点击按钮后做两层简单校验：

1. 判断账号是否为空；
2. 判断两次输入的密码是否一致； 校验通过则弹出注册成功提示。

四、运行效果

1. 打开页面：标题、三个输入框、注册按钮整体居中；
2. 输入账号、密码，密码框内容自动隐藏；
3. 直接点击注册：提示「账号不能为空」；
4. 两次密码输入不同：提示「两次密码输入不一致」；
5. 全部填写正确：弹出注册成功弹窗，并显示填写的账号。

五、知识点总结

1. TextInput 是表单核心组件，支持普通文本、密码等多种输入类型；
2. InputType.Password 专门用于密码场景，自动密文展示；
3. onChange 事件配合 @State 实现输入内容监听与数据绑定；
4. Column + 居中属性，快速实现登录 / 注册类居中表单布局；
5. 结合 Alert 弹窗，可以完成简单的前端表单校验。

六、拓展优化方向

1. 增加手机号 / 学号格式正则校验；
2. 新增「显示 / 隐藏密码」开关；
3. 增加清空输入框按钮；
4. 结合前面的夜览模式，实现表单主题切换；
5. 对接后端接口，完成真实注册请求。