一、前言在鸿蒙 ArkUI 声明式开发中所有文字相关组件分为两大体系只读文本展示组件Text/Span、可交互文本输入组件TextInput/TextArea/Search。二者定位完全隔离本篇一次性梳理清楚区别、特性与适用场景方便开发选型。二、第一类文本显示组件Text / Span—— 仅展示不可编辑1. Text 基础文本容器是独立的文字容器可以直接放在 Row、Column 这些布局里用来承载一整段文字。能设置字体大小、颜色、行高文字太长还能设置省略、滚动。内部可以嵌套 Span实现同一段文字多种样式。适用场景页面标题、提示文字、按钮上的文字、静态说明文案。2. Span 行内富文本子组件不能单独拿出来用只能写在 Text 里面属于行内子组件。作用是给一段文字里的一小部分单独改样式比如关键字标红、添加下划线还能单独加点击事件做页面里的协议链接、跳转文字。示例代码Text(欢迎使用) { Span(鸿蒙应用) .fontColor(Color.Blue) .fontSize(22) .onClick(() console.log(点击跳转)) Span(开发平台).fontColor(Color.Grey) }三、第二类文本输入组件TextInput / TextArea / Search—— 用户可输入编辑三者均为可交互输入框接收用户键盘输入仅区分单行 / 多行 / 搜索专用场景。1. TextInput 单行输入框核心特性单行输入超出宽度不自动换行回车可绑定提交逻辑支持密码、数字、手机号等多种输入类型。适用场景登录账号、密码、手机号、验证码、短表单单行填写。2. TextArea 多行文本框核心特性支持自动换行、多行滚动高度可自适应回车换行输入长内容。适用场景评论区、留言、个人简介、长文本备注、意见反馈。3. Search 搜索专用输入框核心特性基于 TextInput 封装自带内置搜索图标、一键清除按钮内置搜索回车回调UI 符合系统搜索规范。适用场景页面顶部搜索栏、商品 / 文章检索、关键词筛选。示例代码typescript// 单行账号输入 TextInput({ text: $$this.account, placeholder: 请输入账号 }) // 多行评论 TextArea({ text: $$this.comment, placeholder: 写下你的评论... }) // 搜索框 Search({ value: $$this.keyword, placeholder: 搜索内容 }) .onSubmit((val) this.searchData(val))四、两大组件体系核心对比快速选型分类组件读写属性核心特点典型业务场景文本显示只读Text仅展示不可输入独立文字容器统一基础样式标题、说明、静态文字Span仅展示不可输入Text 子组件局部文字差异化样式高亮文字、可点击链接文本输入可编辑TextInput可读写输入单行无自动换行账号、密码、短表单TextArea可读写输入多行自动换行支持长文本评论、备注、长文案Search可读写输入内置搜索图标、搜索回调页面搜索栏、检索功能五、开发避坑总结不要混用Text/Span 无法接收用户输入输入框组件不能用来展示静态文字会增加性能开销。Span 限制不能脱离 Text 单独写在 Row/Column 中编译报错。富文本区分简单多色文字用 Span复杂图文混排使用 RichEditor不要强行嵌套多层 Span。输入框选型短内容选 TextInput长内容选 TextArea搜索功能优先使用 Search统一交互规范。六、结尾ArkUI 把文字展示和文字输入分开设计逻辑很清晰。做开发先分清需求是 “只看文字” 还是 “用户要填写”再对应选组件能少出很多样式、交互 bug。后续再慢慢整理各个组件常用 API 和表单校验的写法。