单行输入用TextInput多行输入用TextArea——听起来简单但实际工程中聊天框、笔记编辑、评论输入这些场景TextArea的用法远不止多行TextInput那么简单。字数统计、自动增高、键盘避让、聊天布局每一块都有细节。TextArea vs TextInput先明确两者的核心区别特性TextInputTextArea行数单行多行自动换行无有垂直滚动无有(超出高度时)适用场景搜索框、密码框聊天输入、笔记、评论高度固定可配置placeholder支持支持TextArea的高度设置后内容超出会内部滚动也可以用autoHeight让高度随内容增长。基础用法TextArea({text:this.inputText,placeholder:输入消息...}).width(100%).height(80).fontSize(14).borderRadius(8).backgroundColor(#ffffff).onChange((value:string){this.inputTextvalue;})onChange回调的参数就是当前文本内容不需要额外读取。每次输入变化都触发频率跟键盘输入同步。字数统计字数统计是TextArea最常见的附加功能实现方式StatecharCount:number0;StatemaxChars:number200;StatecounterColor:string#888888;TextArea({placeholder:输入内容...}).maxLength(this.maxChars).onChange((value:string){this.charCountvalue.length;this.counterColorvalue.lengththis.maxChars?#e53935:value.lengththis.maxChars*0.9?#fb8c00:#888888;})Text(this.charCount.toString()/this.maxChars.toString()).fontSize(11).fontColor(this.counterColor).textAlign(TextAlign.End).width(100%)三段式颜色正常灰色→接近上限橙色→超出红色。maxLength属性会硬限制输入长度onChange里的颜色逻辑只是视觉提示。注意maxLength限制的是字符数不是字节数。中文一个字算1个字符英文一个字母也算1个。聊天布局聊天界面是TextArea最典型的应用场景布局结构Column ├── List (消息列表layoutWeight(1)) │ └── ForEach(messages) → 气泡组件 └── Row (输入区固定高度) ├── TextArea (layoutWeight(1)) └── Button (发送)关键点是List占满剩余空间输入区固定在底部。消息气泡用条件渲染区分左右interfaceChatMsg{content:string;isMine:boolean;time:string;}Statemessages:ChatMsg[][];StateinputText:string;Row(){if(msg.isMine){Blank()}Column(){Text(msg.content).fontSize(14).fontColor(msg.isMine?#ffffff:#333333).padding(10).borderRadius(8).backgroundColor(msg.isMine?#1a73e8:#ffffff)Text(msg.time).fontSize(10).fontColor(#888888).margin({top:2})}.alignItems(msg.isMine?HorizontalAlign.End:HorizontalAlign.Start).constraintSize({maxWidth:70%})if(!msg.isMine){Blank()}}constraintSize({ maxWidth: ‘70%’ })限制气泡最大宽度避免长消息占满整行。isMine时Blank放前面(右对齐)不是isMine时Blank放后面(左对齐)。发送消息privatesendMessage():void{if(this.inputText.trim().length0){return;}constnow:DatenewDate();consttime:stringnow.getHours().toString().padStart(2,0):now.getMinutes().toString().padStart(2,0);constnewMsgs:ChatMsg[]this.messages.concat([{content:this.inputText.trim(),isMine:true,time:time}]);this.messagesnewMsgs;this.inputText;this.charCount0;}trim()防止发送纯空格。concat创建新数组触发State刷新。发送后清空输入和字数。笔记应用模式笔记比聊天多了标题、搜索、列表管理StatenoteTitle:string;StatenoteContent:string;StatesavedNotes:string[][];privatesaveNote():void{if(this.noteTitle.trim().length0||this.noteContent.trim().length0){return;}this.savedNotesthis.savedNotes.concat([[this.noteTitle] this.noteContent]);this.noteTitle;this.noteContent;}笔记搜索用Array.filterStatesearchText:string;StatesearchResults:string[][];privatedoSearch():void{if(this.searchText.trim().length0){this.searchResults[];return;}constresults:string[][];for(leti0;ithis.savedNotes.length;i){if(this.savedNotes[i].indexOf(this.searchText)0){results.push(this.savedNotes[i]);}}this.searchResultsresults;}简单用indexOf做子串匹配不需要正则。对几十条笔记够用了。删除笔记Text(删除).fontSize(11).fontColor(#e53935).onClick((){constnewNotes:string[]this.savedNotes.slice();newNotes.splice(index,1);this.savedNotesnewNotes;})slice()创建副本splice删元素重新赋值触发刷新。直接splice原数组不会刷新UI——这是State数组操作的铁律。copyOptionTextArea和TextInput都支持copyOption控制复制行为TextArea({placeholder:内容}).copyOption(CopyOptions.LocalDevice)// 仅本设备可复制.copyOption(CopyOptions.CrossDevice)// 跨设备可复制.copyOption(CopyOptions.None)// 禁止复制注意枚举名是CopyOptions复数不是CopyOption。这个s容易漏。barState — 内部滚动条TextArea内容超出高度时内部会出现滚动条可以通过barState控制TextArea({placeholder:长内容}).height(100).barState(BarState.Auto)// 自动显示/隐藏.barState(BarState.Off)// 隐藏.barState(BarState.On)// 始终显示高度固定的TextAreabarState是最稳妥的组合。enableKeyboardOnFocusTextArea({placeholder:输入}).enableKeyboardOnFocus(true)// 获取焦点时自动弹出键盘(默认true)设为false时焦点在TextArea上不会自动弹键盘需要手动调用inputMethod.showKeyboard()。适合预览场景——先显示内容用户点击再弹键盘编辑。多行文本的键盘避让聊天场景下键盘弹出时要避让确保输入框不被遮挡Column(){List().layoutWeight(1)Row(){TextArea(...)Button(发送)}}.width(100%).height(100%)使用this.getUIContext().setKeyboardAvoidMode()控制避让模式aboutToAppear():void{this.getUIContext().setKeyboardAvoidMode(1);// 1RESIZE模式}RESIZE模式下键盘弹出时页面会缩小输入框自然上移。0是OFFSET模式(PAN上推)4是NONE(不避让)。注意KeyboardAvoidMode是const enum不能直接引用枚举值当参数用数字字面量。实战踩坑输入框高度问题TextArea设height(40)跟TextInput一样高但多行内容会内部滚动。如果不想滚动设height大一些(80-120)。发送后清空this.inputText;// 清空状态// TextArea的text参数绑定的是this.inputText// 但onChange已经同步了所以直接清空状态即可消息列表自动滚到底新消息发送后需要List自动滚到最新消息privatelistScroller:ScrollernewScroller();List({scroller:this.listScroller}){...}// 发送消息后this.listScroller.scrollToIndex(this.messages.length-1);搜索性能笔记数量多时(100)indexOf搜索可能有延迟。这时候用防抖privatesearchTimer:number-1;TextInput().onChange((value:string){this.searchTextvalue;clearTimeout(this.searchTimer);this.searchTimersetTimeout((){this.doSearch();},300);})300ms防抖用户停手300ms后才搜索避免每次按键都触发。TextArea的局限没有富文本编辑能力(加粗/斜体/链接)没有内置提及功能没有图片插入能力没有撤销/重做API需要这些能力得用RichEditor组件。TextArea适合纯文本场景RichEditor适合富文本场景。TextArea用法的核心是多行字数聊天这个三角关系。搞清楚onChange的字数统计模式、聊天的左右对齐布局、笔记的CRUD管理大部分多行文本场景都能覆盖。