前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net文字编辑器是小分享 App 的核心功能之一用户在此输入文字内容、调整格式最终生成分享卡片。本篇以 TextEditPage 为例讲解Header 导航栏、TextArea 多行输入、Builder 工具栏、State 双向绑定等核心实现。详细 API 可参考 HarmonyOS TextArea 官方文档。一、TextEditPage 完整代码1.1 页面完整实现importrouterfromohos.router;EntryComponentstruct TextEditPage{StatetextContent:string生活的美好在于分享;StatefontSize:number16;build(){Column(){// Header 导航栏Row(){Text(‹).fontSize(24).fontColor(#1A1A1A).onClick((){router.back()})Text(文字编辑).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1).textAlign(TextAlign.Center)Text(完成).fontSize(16).fontColor(#F5A623).onClick((){router.pushUrl({url:pages/PreviewPage})})}.width(100%).padding({left:16,right:16,top:12,bottom:12}).backgroundColor(Color.White)// 编辑区Scroll(){Column({space:16}){// 标题展示Text(this.textContent).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).width(100%).padding({left:16,right:16,top:20})// 多行输入TextArea({text:生活的美好在于分享...,placeholder:输入你想分享的内容...}).fontSize(15).fontColor(#333333).backgroundColor(Color.Transparent).width(100%).height(300).padding({left:16,right:16}).onChange((value:string){this.textContentvalue})// 配图占位Column(){Text().fontSize(60)}.width(100%).height(180).backgroundColor(#FFF8F0).borderRadius(12).margin({left:16,right:16}).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}.layoutWeight(1)// 底部工具栏Column(){// 工具行Row({space:0}){this.ToolItem(A,样式)this.ToolItem(️,排版)this.ToolItem(,背景)this.ToolItem(,配图)}.width(100%).height(50).backgroundColor(#F8F8F8).justifyContent(FlexAlign.SpaceAround)// 格式行Row({space:0}){this.FormatItem(A,#F5A623)this.FormatItem(T,#333333)this.FormatItem(,#333333)this.FormatItem(,#333333)}.width(100%).height(50).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround).shadow({radius:4,color:#10000000,offsetY:-2})}}.width(100%).height(100%).backgroundColor(Color.White)}BuilderToolItem(icon:string,label:string){Column({space:2}){Text(icon).fontSize(18)Text(label).fontSize(10).fontColor(#666666)}.alignItems(HorizontalAlign.Center)}BuilderFormatItem(text:string,color:string){Text(text).fontSize(18).fontColor(color).fontWeight(FontWeight.Bold)}}二、Header 导航栏2.1 三栏布局Header 采用左中右三栏布局Row(){Text(‹)// 左侧返回按钮Text(文字编辑)// 居中标题Text(完成)// 右侧操作按钮}2.2 布局结构位置内容作用样式左侧‹返回fontSize 24, router.back()居中文字编辑标题fontSize 18, Bold, layoutWeight(1)右侧完成确认fontSize 16, #F5A623, 跳转预览页三、TextArea 组件3.1 基本用法TextArea({text:默认文字,placeholder:输入你想分享的内容...}).fontSize(15).fontColor(#333333).backgroundColor(Color.Transparent).width(100%).height(300).padding({left:16,right:16}).onChange((value:string){this.textContentvalue// 状态绑定})3.2 TextArea 常用属性属性作用示例值text初始文本默认文字placeholder占位符输入内容...onChange内容变化回调(value) {}maxLength最大字符数500editable是否可编辑trueheight高度3003.3 代码块TextInput 对比// TextInput - 单行输入TextInput({placeholder:搜索...,text:this.searchKey}).onChange((value){this.searchKeyvalue})// TextArea - 多行输入TextArea({text:this.textContent,placeholder:输入内容...}).height(300).onChange((value){this.textContentvalue})四、State 文本双向绑定4.1 状态声明StatetextContent:string生活的美好在于分享;StatefontSize:number16;4.2 双向绑定TextArea({text:this.textContent,placeholder:输入...}).onChange((value:string){this.textContentvalue// 状态变化 → UI 自动刷新})提示onChange回调中更新State变量ArkUI 会自动重新渲染依赖该变量的 UI 组件。五、Builder 工具栏5.1 Builder 定义BuilderToolItem(icon:string,label:string){Column({space:2}){Text(icon).fontSize(18)Text(label).fontSize(10).fontColor(#666666)}.alignItems(HorizontalAlign.Center)}BuilderFormatItem(text:string,color:string){Text(text).fontSize(18).fontColor(color).fontWeight(FontWeight.Bold)}5.2 Builder 调用Row({space:0}){this.ToolItem(A,样式)this.ToolItem(️,排版)this.ToolItem(,背景)this.ToolItem(,配图)}5.3 Builder 与 Component 对比对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态管理调用方式this.xxx()标签调用适用场景简单 UI 复用复杂独立组件六、编辑区布局6.1 布局结构Scroll (可滚动) └─ Column (space: 16) ├─ Text (标题展示) 22px Bold ├─ TextArea (编辑区) 300px 高度 └─ Column (配图占位) 180px #FFF8F06.2 配图占位区Column(){Text().fontSize(60)}.width(100%).height(180).backgroundColor(#FFF8F0).borderRadius(12).margin({left:16,right:16}).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)七、页面跳转流程7.1 路由跳转// 返回按钮router.back()// 完成按钮 → 跳转预览页router.pushUrl({url:pages/PreviewPage})7.2 路由策略按钮路由 API说明‹ 返回router.back()返回编辑页✕ 关闭router.back()返回首页完成router.pushUrl()跳转预览页八、常见问题8.1 问题 1TextArea 高度无法自适应原因height属性固定了高度内容超出时会滚动。解决不设置height让 TextArea 根据内容自动扩展。8.2 问题 2State 更新后 UI 不刷新原因直接修改字符串变量是有效的但如果修改对象属性需要创建新对象。九、核心知识点9.1 技术要点TextArea 多行文本输入支持 onChange 双向绑定State 管理编辑内容状态工具栏用 Builder 封装复用Header 三栏布局控制9.2 实战建议onChange 中更新 State 实现双向绑定工具栏用 Builder 复用 UI 片段完成按钮用 pushUrl 跳转预览页总结本文详细讲解了 TextEditPage 文字编辑器的完整实现从Header 三栏布局、TextArea 多行输入、State 双向绑定到Builder 工具栏涵盖了文字编辑器的全部核心功能。下一篇我们将深入 ImageEditPage 图片编辑器的实现。相关资源HarmonyOS TextArea 官方文档TextArea ReferenceHarmonyOS TextInput 文档TextInput ReferenceHarmonyOS Builder 装饰器Builder GuideHarmonyOS State 装饰器State GuideHarmonyOS 状态管理State ManagementHarmonyOS Router 路由Router APIHarmonyOS Scroll 组件Scroll Component开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net附录编辑器的完整实现细节1. 完整的 Builder 工具栏小分享 App 的 TextEditPage 使用两个工具栏行工具行和格式行。工具行包含样式、排版、背景、配图四个功能入口格式行包含字号加粗、斜体、下划线等格式控制。BuilderToolItem(icon:string,label:string){Column({space:2}){Text(icon).fontSize(18)Text(label).fontSize(10).fontColor(#666666)}.alignItems(HorizontalAlign.Center)}2. 路由跳转策略按钮目标API效果‹ 返回上一页router.back()出栈返回完成PreviewPagerouter.pushUrl()入栈跳转3. TextArea 与 TextInput 对比对比维度TextAreaTextInput行数多行单行高度可设置固定高度自适应滚动内容溢出时自动滚动不滚动适用场景文章编辑、评论输入搜索框、用户名4. 编辑区布局的完整代码Scroll(){Column({space:16}){// 标题展示Text(this.textContent).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).width(100%).padding({left:16,right:16,top:20})// 多行输入TextArea({text:生活的美好在于分享...,placeholder:输入你想分享的内容...}).fontSize(15).fontColor(#333333).backgroundColor(Color.Transparent).width(100%).height(300).padding({left:16,right:16}).onChange((value:string){this.textContentvalue})// 配图占位区Column(){Text().fontSize(60)}.width(100%).height(180).backgroundColor(#FFF8F0).borderRadius(12).margin({left:16,right:16}).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}.layoutWeight(1)5. 完整的页码结构Column (主容器) ├─ Row (Header 导航栏) - 左‹ 中标题 右完成 ├─ Scroll (编辑区) - layoutWeight(1) 撑开 │ └─ Column (space: 16) │ ├─ Text (标题展示) │ ├─ TextArea (编辑区) │ └─ Column (配图占位) └─ Column (底部工具栏) ├─ Row (工具行) └─ Row (格式行)提示以上布局结构是小分享 App 所有编辑器的标准模板后续的 ImageEditPage 和 LinkEditPage 均采用类似的三段式布局。6. 编辑器的扩展方向扩展功能实现方式优先级字号选择State fontSize 滑动选择器高字体颜色State fontColor 色板选择高加粗/斜体State isBold Toggle 切换中对齐方式State textAlign 三选一按钮中配图上传PhotoViewPicker 选择图片高7. 完整的代码文件结构entry/src/main/ets/ ├── pages/ │ └── TextEditPage.ets # 文字编辑器页面 ├── components/ │ └── StyleToolbar.ets # 样式工具栏组件可选抽取 ├── common/ │ └── interfaces.ets # 公共接口定义 └── entryability/ └── EntryAbility.ets # 入口 Ability上述文件结构展示了 TextEditPage 在小分享 App 工程中的位置。第一步了解组件的基本用法第二步掌握组件的核心属性如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
