移动应用中提交表单是最常见的用户交互模式之一。用户选择分类、填写内容、留下联系方式——三个步骤完成了从想法到反馈的信息流转。HarmonyOS NEXT ArkUI 提供了 Select下拉选择器和 TextArea多行文本输入框两个核心组件它们与 TextInput单行输入框组合可以构建出完整、专业的表单页面。本文将深入讲解 Select 和 TextArea 组件的使用方法并构建一个完整的用户反馈与建议应用——支持分类选择、内容填写、联系方式输入、表单验证和历史记录管理。关键词HarmonyOS、ArkUI、Select、TextArea、下拉选择器、多行输入、表单验证、用户反馈一、Select 下拉选择器1.1 API 概述Select 是 ArkUI 提供的下拉选择组件。点击组件区域后弹出选项菜单用户选择一个选项后菜单关闭选中的值显示在组件上。Select([{value:功能建议},{value:问题反馈},{value:使用咨询},{value:其他}]).selected(0)// 默认选中第 0 项.value(功能建议)// 显示文本与选中项同步.font({size:14})// 文本样式.selectedOptionBgColor(#F0F5FF)// 选中项背景色.optionBgColor(#FFFFFF)// 选项背景色.onSelect((index:number,value:string){// index: 选中项索引从 0 开始// value: 选中项的文本值this.categoryIndexindex;})核心属性与回调构造函数参数ArraySelectOption每个SelectOption包含value必填选项文本和可选的icon选项图标selected(index)预设选中项的索引。通常在页面初始化时设为 0第一项用户选择后更新value(string)组件上显示的文本。通常与selected指针对应的选项值同步font(Font)文本字体样式包含size字号和weight粗细。注意颜色通过.fontColor()单独设置不在Font对象内selectedOptionBgColor(color)下拉菜单中当前选中项的背景颜色用于高亮当前选择optionBgColor(color)下拉菜单中所有选项的背景颜色onSelect(callback)用户选择选项后触发回调参数为选中项的索引和文本值1.2 SelectOption 接口interfaceSelectOption{value:ResourceStr;// 必填选项文本icon?:ResourceStr;// 可选选项图标symbolIcon?:SymbolGlyphModifier;// API 12Symbol 图标}本文 Demo 使用最简单的纯文本选项Select([{value:功能建议},{value:问题反馈},{value:使用咨询},{value:其他}])如需图标可以传入icon字段如$r(app.media.icon_suggestion)图标会显示在文字左侧。1.3 同步 selected 与 valueselected是索引0-basedvalue是对应的展示文本。两者需要保持同步——当用户通过onSelect选择了新选项需要同步更新selected和valueStatecategoryIndex:number0;StatecategoryValue:string功能建议;// 错误的做法不同步Select([...]).selected(this.categoryIndex)// 用户选择后 index 变了.value(功能建议)// 但 value 仍然是硬编码的默认值// 正确的做法同步更新Select([...]).selected(this.categoryIndex).value(this.categories[this.categoryIndex])// 与 selected 指向同一项.onSelect((index:number,value:string){this.categoryIndexindex;// 同步更新索引})本文 Demo 使用数组索引访问模式——this.getCategories()[this.categoryIndex]——确保value始终与selected指向的选项一致。1.4 样式定制Select 的样式中一个容易出错的地方颜色不在.font()里。ArkUI 的Font类型只包含size和weight颜色需要通过.fontColor()设置// 正确Select([...]).font({size:14}).fontColor(#1a1a2e)// 错误 —— 编译报错color does not exist in type FontSelect([...]).font({size:14,color:#1a1a2e})这个设计与普通Text组件一致——.fontSize()和.fontColor()是分开的属性。二、TextArea 多行输入框2.1 API 概述TextArea 是 ArkUI 的多行文本输入组件支持长文本的输入和编辑。TextArea({text:this.content,placeholder:请详细描述您的建议或问题}).fontSize(14).height(140).borderRadius(8).backgroundColor(#F8F9FA).onChange((value:string){this.contentvalue;this.contentLengthvalue.length;})核心属性与回调text输入框的文本内容双向绑定通过State变量控制placeholder占位提示文本输入框为空时显示灰色字height输入框高度。TextArea 需要显式设置高度否则可能只有一行高onChange(callback)文本内容变化时触发回调参数为当前完整文本内容2.2 与 TextInput 的区别特性TextAreaTextInput行数多行需设 height单行固定高度换行支持回车换行不支持回车提交适用场景正文输入、描述、反馈内容标题、姓名、手机号、URL建议高度120-200vp40-48vp滚动内容超出高度时自动滚动不滚动本文 Demo 将 TextArea 用于反馈内容多行正文将 TextInput 用于联系方式单行短文清晰展示了两个组件的场景差异。2.3 实时字数统计TextArea 的onChange回调可用于实时统计字数Statecontent:string;StatecontentLength:number0;TextArea({text:this.content,placeholder:...}).onChange((value:string){this.contentvalue;this.contentLengthvalue.length;})// 显示字数10字以上变绿Text(this.contentLength.toString().concat( 字)).fontColor(this.contentLength10?#00B894:#BBBBCC)字数颜色在达到最低要求10 字后从灰色变为绿色——这是一种即时反馈设计用户在打字的同时就知道距离可提交还差多少。三、反馈表单的完整设计3.1 页面架构本文 Demo 构建一个用户反馈与建议应用FeedbackPage ├── 标题栏 — 反馈与建议 记录计数 ├── 组件说明卡片 — Select TextArea 介绍 ├── 反馈表单 │ ├── 反馈类型Select 下拉选择 │ ├── 反馈内容TextArea 多行输入 字数统计 │ ├── 联系方式TextInput 单行输入选填 │ └── 提交按钮满足条件后激活 ├── 提交成功提示 继续反馈按钮 └── 反馈记录列表按时间倒序3.2 数据结构interfaceFeedbackRecord{id:number;category:string;// 功能建议 | 问题反馈 | 使用咨询 | 其他content:string;// 反馈正文contact:string;// 联系方式date:string;// 提交时间}Statehistory:FeedbackRecord[][];StatenextId:number1;每条反馈记录包含类型、内容、联系方式、提交时间。新提交的记录通过concat插入数组头部最新的在最上面this.history[record].concat(this.history.slice());slice()创建副本确保State能检测到引用变化并触发 UI 更新。3.3 表单验证提交按钮仅当内容满足最低要求时激活canSubmit():boolean{returnthis.content.trim().length10;}按钮样式根据验证状态动态切换内容 10 字灰色背景.backgroundColor(#CCCCDD)不可点击感内容 10 字蓝色背景.backgroundColor(#1677FF)可点击这是前端验证中最基本的模式——在 submit 之前就告诉用户还差什么而不是点击后才弹出错误提示。3.4 提交与重置submitFeedback():void{if(!this.canSubmit())return;letrecord:FeedbackRecord{id:this.nextId,category:this.getCategories()[this.categoryIndex],content:this.content.trim(),contact:this.contact.trim(),date:this.formatDate()};this.nextId;this.history[record].concat(this.history.slice());this.submittedtrue;}提交成功后submitted true表单区域上方显示成功提示卡片包含继续反馈按钮。点击继续反馈调用resetForm()resetForm():void{this.categoryIndex0;this.content;this.contact;this.contentLength0;this.submittedfalse;}重置后所有字段回到初始状态用户可以提交下一条反馈。四、反馈记录展示4.1 分类标签历史记录中每条反馈的分类使用彩色标签显示getCategoryColor(cat:string):string{if(cat功能建议)return#1677FF;// 蓝色if(cat问题反馈)return#FF4D4F;// 红色if(cat使用咨询)return#E09F3E;// 橙色return#636E72;// 灰色}不同颜色帮助用户快速区分反馈类型——红色的问题反馈一眼可见蓝色的功能建议温和友好。4.2 记录卡片布局每条记录显示分类标签彩色背景白色文字提交时间灰色右上角反馈内容黑色正文最多 3 行省略联系方式如有填写卡片之间用Divider分隔视觉层次清晰。4.3 空状态当history.length 0时整个反馈记录区域隐藏。只有在用户提交至少一条反馈后历史记录区域才出现。这是一个渐进式信息披露的设计——不提前展示空列表容器页面在初始状态下更简洁。五、Select 的高级特性5.1 箭头位置通过arrowPosition控制下拉箭头的显示位置Select([...]).arrowPosition(ArrowPosition.START)// 箭头在左侧.arrowPosition(ArrowPosition.END)// 箭头在右侧默认5.2 菜单对齐通过menuAlign控制下拉菜单与 Select 组件的对齐方式Select([...]).menuAlign(MenuAlignType.START)// 菜单左对齐.menuAlign(MenuAlignType.CENTER)// 菜单居中.menuAlign(MenuAlignType.END)// 菜单右对齐5.3 选项字体与背景除了全局的.font()和.fontColor()还有针对选项的样式Select([...]).optionFont({size:14})// 选项字体.optionFontColor(#1a1a2e)// 选项文字颜色.selectedOptionBgColor(#F0F5FF)// 选中项背景色.optionBgColor(#FFFFFF)// 未选中项背景色六、TextArea 的高级特性6.1 最大字符限制TextArea({text:this.content}).maxLength(500)// 最多 500 字符设置maxLength后用户在达到限制后无法继续输入。结合字数统计显示 “125 / 500”可以给用户明确的边界感。6.2 自定义键盘类型TextArea({text:this.content}).type(InputType.Normal)// 默认键盘.enterKeyType(EnterKeyType.NewLine)// 回车键行为对于反馈场景通常使用.enterKeyType(EnterKeyType.NewLine)回车换行而不是 Send/Go。6.3 TextAreaController类似 TextTimer 的 controllerTextArea 也有 TextAreaControllerprivatecontroller:TextAreaControllernewTextAreaController();// 通过 controller 操作this.controller.caretPosition(10);// 光标定位到第 10 个字符后七、交互流程演示7.1 首次进入页面展示空白表单。Select 默认选中功能建议TextArea 显示占位提示请详细描述您的建议或问题至少10个字“字数统计显示0 字”灰色提交按钮为灰色不可点击状态。7.2 填写表单用户选择分类为问题反馈Select 弹出菜单点击问题反馈菜单关闭组件显示问题反馈。在 TextArea 中输入问题描述字数统计实时更新。当达到 10 字时数字变为绿色提交按钮变为蓝色。7.3 提交成功点击提交反馈成功提示卡片显示绿色对勾、感谢文字、继续反馈按钮。表单自动隐藏submitted true时表单区域仍可见但成功提示占据主要视觉位置。7.4 查看历史下方反馈记录区域出现刚提交的记录。分类标签为红色问题反馈右上角显示提交时间。再次点击继续反馈表单恢复选择新分类功能建议提交第二条记录。历史区域新增一条蓝色标签的记录。八、总结本文通过用户反馈与建议这个实战案例全面讲解了 ArkUI Select 和 TextArea 组件的组合使用。核心知识点包括Select 组件SelectOption 数组、selected/value 同步、onSelect 回调、选项样式TextArea 组件text 绑定、placeholder 提示、onChange 实时监听、字数统计表单验证canSubmit 最低要求、按钮动态激活/禁用提交与重置一次提交 → 成功提示 → 继续反馈的闭环流程历史记录slice concat 新数组引用、分类彩色标签、时间标注Font 类型陷阱color 不属于 Font 对象需用 fontColor() 单独设置Select TextArea TextInput 的组合是移动端表单开发的黄金三角——Select 负责分类选择限定输入域TextArea 负责长文输入开放输入域TextInput 负责短文输入结构化输入域。三者各司其职覆盖了表单输入的三个核心维度。
