HarmonyOS 实战：从输入框到完整表单，教你一步步搞定用户输入处理

摘要

在很多应用里，用户输入和表单提交几乎是必不可少的功能。比如注册登录、搜索框、填写订单地址等等，都离不开输入框和表单的处理。在鸿蒙（HarmonyOS）开发中，ArkUI 提供了 TextInput、Form 等组件，让我们可以方便地采集和管理用户输入。本文会结合一个完整 Demo，带你从零开始学会如何在鸿蒙里处理表单输入，并结合 2-3 个实际场景来讲解。

引言

随着鸿蒙应用生态的发展，越来越多的应用需要处理用户数据输入。常见的场景包括：

用户注册时填写用户名、密码；
在外卖 App 中填写收货地址；
在搜索框里输入关键字进行内容查找。

如果你是初学者，可能会疑惑：输入框要怎么监听变化？表单里多个字段要怎么统一管理？数据又该怎么提交？本文会给你一个循序渐进的思路，从最简单的输入监听，到多个输入组合成表单，最后再结合实际场景给你几个可直接使用的示例。

基础：单个输入框的使用

在鸿蒙里，最常见的就是 TextInput 组件。它可以用来采集用户的输入，比如昵称、手机号等。

代码示例：最简单的输入和提交

ts 复制代码

@Entry
@Component
struct Index {
  @State inputValue: string = ''

  build() {
    Column({ space: 20 }) {
      Text('请输入内容：')

      TextInput({
        placeholder: '在这里输入文字',
        onChange: (value: string) => {
          this.inputValue = value
        }
      })

      Button('提交', {
        onClick: () => {
          console.log('输入的值为：' + this.inputValue)
        }
      })
    }
    .padding(20)
  }
}

分析

@State inputValue: string 定义了一个响应式变量，保存输入的内容。
TextInput 的 onChange 会在用户输入时触发，把值保存到 inputValue 里。
点击按钮时，直接输出当前输入的值。

这样，一个最小化的输入和提交功能就完成了。

进阶：多个输入组成表单

当输入框多起来时，一个个去管理就有点麻烦了。ArkUI 没有传统 Web 那种 <form> 标签，但我们可以通过 Column 组合多个输入，再配合状态变量来模拟表单。

代码示例：登录表单

ts 复制代码

@Entry
@Component
struct LoginForm {
  @State username: string = ''
  @State password: string = ''

  build() {
    Column({ space: 16 }) {
      Text('用户登录').fontSize(20).fontWeight(FontWeight.Bold)

      TextInput({
        placeholder: '请输入用户名',
        onChange: (value: string) => {
          this.username = value
        }
      })

      TextInput({
        placeholder: '请输入密码',
        type: InputType.Password,
        onChange: (value: string) => {
          this.password = value
        }
      })

      Button('登录', {
        onClick: () => {
          if (this.username && this.password) {
            console.log(`用户名：${this.username}, 密码：${this.password}`)
          } else {
            console.log('请完整填写用户名和密码')
          }
        }
      })
    }
    .padding(20)
  }
}

分析

username 和 password 分别存放输入框的值。
InputType.Password 让密码输入框自动变成"点点点"显示。
点击按钮时，可以做表单校验，比如判断是否为空。

实际应用场景

场景一：搜索框

在商城或新闻应用里，搜索是最常见的输入场景。

ts 复制代码

@Component
struct SearchBox {
  @State keyword: string = ''

  build() {
    Row({ space: 10 }) {
      TextInput({
        placeholder: '请输入搜索关键词',
        onChange: (value: string) => {
          this.keyword = value
        }
      }).width('70%')

      Button('搜索', {
        onClick: () => {
          console.log('搜索关键词：' + this.keyword)
        }
      })
    }
    .padding(16)
  }
}

用户输入关键词后，点击"搜索"按钮即可触发后台请求。

场景二：注册表单

注册页面通常需要多个输入字段，比如用户名、手机号和密码。

ts 复制代码

@Component
struct RegisterForm {
  @State username: string = ''
  @State phone: string = ''
  @State password: string = ''

  build() {
    Column({ space: 16 }) {
      Text('注册账号').fontSize(22).fontWeight(FontWeight.Bold)

      TextInput({
        placeholder: '请输入用户名',
        onChange: (value: string) => this.username = value
      })

      TextInput({
        placeholder: '请输入手机号',
        type: InputType.Number,
        onChange: (value: string) => this.phone = value
      })

      TextInput({
        placeholder: '请输入密码',
        type: InputType.Password,
        onChange: (value: string) => this.password = value
      })

      Button('注册', {
        onClick: () => {
          if (!this.username || !this.phone || !this.password) {
            console.log('请完整填写注册信息')
            return
          }
          console.log(`注册成功，用户名：${this.username}, 手机号：${this.phone}`)
        }
      })
    }
    .padding(20)
  }
}

这种场景下可以在点击提交时做简单的验证，比如手机号必须是数字，密码不能为空等。

场景三：地址填写

在电商应用中，收货地址的输入很常见。

ts 复制代码

@Component
struct AddressForm {
  @State name: string = ''
  @State phone: string = ''
  @State address: string = ''

  build() {
    Column({ space: 16 }) {
      Text('收货信息').fontSize(22).fontWeight(FontWeight.Bold)

      TextInput({
        placeholder: '收件人姓名',
        onChange: (value: string) => this.name = value
      })

      TextInput({
        placeholder: '手机号',
        type: InputType.Number,
        onChange: (value: string) => this.phone = value
      })

      TextInput({
        placeholder: '详细地址',
        onChange: (value: string) => this.address = value
      }).height(80)

      Button('保存地址', {
        onClick: () => {
          if (!this.name || !this.phone || !this.address) {
            console.log('请填写完整的收货信息')
            return
          }
          console.log(`地址保存成功：${this.name}, ${this.phone}, ${this.address}`)
        }
      })
    }
    .padding(20)
  }
}

这个场景更贴近实际开发，逻辑上也可以扩展，比如：

手机号格式校验；
多个地址保存到本地数据库；
点击保存后跳转到订单确认页。

QA 环节

Q1: ArkUI 有没有类似 Web <form> 的组件？ A1: 没有直接的 form 标签，不过我们可以通过 Column 或 Flex 把多个输入框包裹起来，用 @State 保存值，就能模拟表单功能。

Q2: 如果我想实时显示用户输入的内容，怎么办？ A2: 直接用 Text(this.inputValue) 来绑定显示即可。@State 会自动触发 UI 刷新。

Q3: 表单校验是不是要自己写？ A3: 是的，目前需要开发者自己写校验逻辑，比如用 if 判断是否为空、正则校验手机号等。

总结

在鸿蒙开发中，处理用户输入和表单其实并不复杂，核心思路就是：

用 TextInput 获取用户输入；用 @State 保存输入值，保证 UI 和数据同步；用 Button 触发提交逻辑；根据实际场景编写校验和数据处理逻辑。

本文从最简单的输入框开始，逐步扩展到表单，再结合了登录、注册、搜索、地址填写等实际场景。掌握了这些，你就可以在鸿蒙应用中轻松处理各种用户输入需求。