HarmonyOS开发实战：小分享-TextEditPage文字编辑器——Header+TextArea+工具栏

发布时间：2026/10/14 6:40:23

HarmonyOS开发实战：小分享-TextEditPage文字编辑器——Header+TextArea+工具栏
前言欢迎加入开源鸿蒙跨平台社区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 工程中的位置。第一步了解组件的基本用法第二步掌握组件的核心属性如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

Beyond Compare 5开源逆向工程方案：Python授权密钥生成器深度解析

Beyond Compare 5开源逆向工程方案：Python授权密钥生成器深度解析

Beyond Compare 5开源逆向工程方案：Python授权密钥生成器深度解析 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 当软件开发者和系统管理员面临Beyond Compare 5的30天评估期限制时…

2026/10/10 11:55:27 阅读更多 →
比亚迪商标中暗藏向上箭头”负空间设计如何隐喻鹏城展翅？

比亚迪商标中暗藏向上箭头”负空间设计如何隐喻鹏城展翅？

比亚迪商标中暗藏的“向上箭头”：负空间设计如何隐喻“鹏城展翅”？2021年元旦，比亚迪发布全新品牌标识，取消了沿用多年的椭圆型边界，用简约流畅的金属质感线条，构成极具“向前”动感的“BYD”字样-8。但真正…

2026/10/11 6:53:19 阅读更多 →
浏览器端EPUB构建技术栈：零部署的现代电子书编辑解决方案

浏览器端EPUB构建技术栈：零部署的现代电子书编辑解决方案

浏览器端EPUB构建技术栈：零部署的现代电子书编辑解决方案 【免费下载链接】EPubBuilder 一款在线的epub格式书籍编辑器 项目地址: https://gitcode.com/gh_mirrors/ep/EPubBuilder 技术挑战：传统电子书编辑器的架构困境 在数字化内容创作领域&am…

2026/10/13 2:49:40 阅读更多 →

最新新闻

纯Python实现猜数字游戏：从零到避坑的完整指南

纯Python实现猜数字游戏：从零到避坑的完整指南

猜数字游戏大概是很多人的第一个编程项目。它不像计算器那样枯燥，也不需要复杂的界面，但一套完整流程走下来，变量、输入输出、条件判断、循环、异常处理这些编程入门核心概念全部能练到。我最近又把这个小项目从头写了一遍，用最基…

2026/10/14 6:39:29 阅读更多 →
Vibe Coding工具链选型四步框架：效率提升27%与成本控制24倍

Vibe Coding工具链选型四步框架：效率提升27%与成本控制24倍

1. 效率提升27%背后的真实账本先把结论摆出来：同样一个中等复杂度的业务模块，用对工具链和用错工具链，交付效率差距能拉到27%左右，而综合成本差距可以到24倍。这个数字不是拍脑袋来的，是我在三个不同类型的项目里反复测…

2026/10/14 6:39:29 阅读更多 →
两个模型同价，真正拉开成本的是那个默认值

两个模型同价，真正拉开成本的是那个默认值

📋 目录 一、两个模型，一个价二、纠错一：跑量模型不等于更便宜三、纠错二：贵的是 quality，而且它默认不贵四、逐档成本表，和一个反直觉的发现五、纠错三：分辨率不是按像素收费六、参考图才是隐…

2026/10/14 6:39:29 阅读更多 →
Vibe Coding工具选型与四步实施框架：效率提升27%与成本差24倍背后的工程实践

Vibe Coding工具选型与四步实施框架：效率提升27%与成本差24倍背后的工程实践

1. 效率数字背后的真实账本先把标题里两个数字拆开看。效率提升27%这个量级，放在任何研发团队里都算得上可观，但它不是凭空冒出来的——它通常来自编码环节中重复劳动被压缩、上下文切换次数减少、以及试错周期缩短这三块的叠加。而成本差24倍这个说法&a…

2026/10/14 6:39:29 阅读更多 →
新手入门3D视觉（一）WSL2+Ubuntu22.04+PCL环境配置

新手入门3D视觉（一）WSL2+Ubuntu22.04+PCL环境配置

「零基础转行工业 3D 视觉」系列第一篇。 本文记录我用 WorkBuddy 把第 1 周环境搭起来的完整过程：3 个步骤，手动敲的命令不超过 3 条。 全程用到的 3 个脚本放在文末附件里，可以直接下载复用。开始之前：一条最重要的提醒不要装 V…

2026/10/14 6:39:29 阅读更多 →
深度学习损失函数选型实战：从MSE到Focal Loss的原理与踩坑

深度学习损失函数选型实战：从MSE到Focal Loss的原理与踩坑

损失函数这玩意儿，说起来是深度学习里最基础的组件之一，但恰恰是很多同学在实战里翻车最频繁的地方。我带项目的时候经常看到有人模型结构抄得挺像样，学习率调度也配了一堆，可训练出来的结果就是不对，Loss 曲线跟心电图…

2026/10/14 6:38:29 阅读更多 →

日新闻

AnyPS5通用适配层设计：兼容性与性能的工程取舍

AnyPS5通用适配层设计：兼容性与性能的工程取舍

1. 从"AnyPS5"这个名字说起：它到底想解决什么问题第一次看到"AnyPS5"这个标题，我脑子里冒出来的第一个念头是：这大概率是一个围绕"跨平台运行"或者"通用适配"做文章的项目。名字里的"Any"…

2026/10/14 0:00:41 阅读更多 →
Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

1. 项目概述：Flutter跨平台二手交易应用开发作为一名长期从事移动应用开发的工程师，我最近完成了一个基于Flutter框架的二手物品交易平台项目。这个项目最吸引我的地方在于它完美结合了Flutter的跨平台优势与HarmonyOS的生态特性，实现了"…

2026/10/14 0:00:41 阅读更多 →
DFS算法解决飞机降落调度问题实战

DFS算法解决飞机降落调度问题实战

1. 项目背景与核心思路飞机降落问题是一个经典的调度优化场景，也是算法竞赛和面试中的高频题目。这个题目要求我们合理安排多架飞机的降落顺序和时间，确保所有飞机都能安全着陆而不发生冲突。在实际航空管制中，这类问题直接关系到飞行安全和机…

2026/10/14 0:00:41 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/14 3:30:28 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/13 16:22:04 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 22:01:27 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →