Hello！我是程序员Feri—— 13 年编程老炮，实战派技术人，拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。

在App的世界里，输入框是用户与产品对话的"麦克风"——无论是登录时的账号密码、外卖备注的"少放香菜"，还是社交软件里的长篇评论，都离不开它。今天我们就来拆解两个"对话专家"：单行输入框（TextInput）和多行输入框（TextArea），看看它们如何让用户的输入既顺畅又精准。

一、输入框：不止是"一个框"那么简单

想象你去咖啡店点单：

• 告诉店员"要一杯拿铁"（短信息）——对应TextInput（单行输入，适合简短内容）；
• 补充"加两份浓缩，奶泡要薄，杯套选粉色，再帮我写张便签'送给隔壁工位的小李'"（长信息）——对应TextArea（多行输入，适合大段内容）。

这两个组件看似相似，却各有专攻：TextInput追求"短平快"，TextArea专注"畅所欲言"。

二、单行输入TextInput：短信息的"高效传递员"

TextInput是处理简短输入的能手，比如手机号、验证码、用户名等。它的核心能力是"精准控制输入格式"，让用户少犯错，开发者少处理异常。

1. 基础用法：给输入框"立规矩"

@State username: string = "";build() {  Column({ space: 15 }) {    // 带提示的输入框：告诉用户该填什么    TextInput({ placeholder: "请输入用户名（3-10个字符）" })      .width("90%")      .padding(15)      .border({ width: 1, radius: 8 })  // 加个边框，让用户知道"这里可以点"      .onChange((input) => {        this.username = input;  // 实时获取输入内容      })    // 显示输入结果    Text(`你输入的用户名：${this.username || "还没输入哦～"}`)      .fontSize(14)  }  .padding(20)}

这里的placeholder是个贴心设计——就像店员主动问"您想点什么？"，避免用户对着空白框发呆。

2. 核心属性：给输入"定格式"

最关键的属性是type，它不仅限制输入内容，还会自动调出对应键盘（比如数字键盘、邮箱键盘），从源头减少输入错误。

举个栗子：手机号输入框用Number类型，既方便用户快速输入，又避免无效字符：

TextInput({ placeholder: "请输入手机号" })  .type(InputType.Number)  // 只允许数字输入  .maxLength(11)  // 限制最多11位（符合手机号规则）  .onChange((phone) => {    if (phone.length === 11) {      console.log("手机号格式有效");    }  })

3. 核心事件：实时响应输入变化

onChange事件是输入框的"神经中枢"——用户每输入一个字符，它都会立刻触发，让你能实时处理内容（比如验证格式、计算长度）。

经典案例：闰年判断器（用户输入年份，实时显示结果）

@Entry@Componentstruct LeapYearChecker {  @State result: string = "";  @State textColor: string = "#666666";  // 默认灰色  // 判断闰年的核心逻辑：4年一闰，100年不闰，400年再闰  checkLeapYear(year: number): string {    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {      this.textColor = "#FF0000";  // 闰年标红      return `${year}是闰年，2月有29天哦～`;    } else {      this.textColor = "#008000";  // 平年标绿      return `${year}是平年，2月只有28天`;    }  }  build() {    Column({ space: 20 }) {      Text("闰年判断器")        .fontSize(20)        .fontWeight(FontWeight.Bold)      TextInput({ placeholder: "请输入年份（比如2024）" })        .type(InputType.Number)  // 只允许数字输入        .width("80%")        .padding(15)        .border({ width: 1, radius: 5 })        .onChange((input) => {          const year = parseInt(input);  // 把输入的字符串转成数字          // 输入为空时清空结果，避免显示"NaN是平年"          this.result = input ? this.checkLeapYear(year) : "";        })      Text(this.result)        .fontColor(this.textColor)        .fontSize(16)    }    .height("100%")    .width("100%")    .justifyContent(FlexAlign.Center)  }}

这个例子的巧思在于：用户输入时实时反馈，输入为空时自动清空结果，避免出现"NaN是平年"这种尴尬情况——细节见真章～

三、多行输入TextArea：长文本的"自由创作区"

当用户需要输入大段内容（比如评论、意见反馈、备注）时，TextInput就不够用了（总不能让用户在单行里硬换行吧）。这时候，TextArea登场了——它会自动换行，高度还能跟着内容"长大"，就像一本可以无限翻页的笔记本。

1. 基础用法：给用户"足够的空间"

@State comment: string = "";build() {    Column({ space: 15 }) {      Text("商品评价")        .fontSize(18)      // 多行输入框：默认高度随内容变化，宽度撑满      TextArea({ placeholder: "说说你对这件商品的看法吧～" })        .width("100%")        .height(100)  // 设置高度，避免一开始太"矮"        .padding(15)        .border({ width: 1, radius: 8 })        .onChange((v:string) => {          this.comment = v;        })      // 显示输入字数（社交App常见设计）      Row(){        Text(`已输入${this.comment.length}字`)          .fontSize(12)          .fontColor("#999999")          .textAlign(TextAlign.End)  // 右对齐，贴近输入框          .padding({ right: "5%" })      }      .width("100%")      .justifyContent(FlexAlign.End)    }    .padding(20)    .alignItems(HorizontalAlign.Start)    .width("90%")    .height("100%")  }

TextArea和TextInput的用法几乎一样

2. 实用技巧：给长文本"划边界"

• 限制最大长度：比如评论最多500字，超过就不让输了： .maxLength(500)
• 禁止自动换行：特殊场景下（比如输入代码）需要横向滚动，而非自动换行： .textWrap(TextWrap.NO_WRAP)
• 固定高度：如果不想让输入框"无限长高"，可以设置height固定值，内容超出时显示滚动条： .height(200)

四、进阶设计：让输入框更"懂"用户

好的输入框设计，能让用户感觉"它知道我要做什么"。分享几个提升体验的技巧：

1. 实时格式校验（以邮箱为例）

@State email: string = "";@State emailTips: string = "";build() {  TextInput({ placeholder: "请输入邮箱" })    .type(InputType.Email)    .onChange((input) => {      this.email = input;      // 简单的邮箱格式校验：包含@和.      const isVaild = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input);      this.emailTips = isVaild ? "邮箱格式正确" : "请输入正确的邮箱（比如xxx@example.com）";    })    Text(this.emailTips)    .fontSize(12)    .fontColor(this.email ? (this.emailTips.includes("正确") ? "#008000" : "#FF0000") : "#999999")}

用正则表达式实时校验，配合颜色提示，用户不用等到提交才知道输错了。

2. 自动聚焦（提升操作效率）

打开页面时，让输入框自动获得焦点（调出键盘），适合登录页、搜索页：
.focus(true)

3. 清除按钮（快速重置）

输入内容后显示"×"按钮，点击清空输入，比手动删除更方便（API 10+支持）：
.showClearIcon(true)

五、练手项目：从"能用"到"好用"

基础题：做一个"年龄计算器"

• 用TextInput（Number类型）让用户输入出生年份；
• 实时计算年龄（当前年份 - 出生年份）；
• 显示结果（比如"你今年25岁啦"）。

进阶题：做一个"外卖备注助手"

• 用TextArea让用户输入备注（比如"不要香菜，多放醋，餐具要两双"）；
• 显示剩余可输入字数（最大200字）；
• 当输入包含"辣"字时，自动提示"需要少辣/中辣/特辣吗？"；
• 加一个"常用备注"按钮（比如点击后自动填入"请尽快送达"）。

输入框是App的"门面"之一——一个设计贴心的输入框，能让用户从"不得不填"变成"轻松完成"。记住：好的输入体验，藏在每一个对细节的打磨里～