前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net图片编辑器让用户选择图片后添加文字、滤镜等效果。小分享 App 的 ImageEditPage 采用黑色主题背景使用position属性实现文字叠加在图片上。本篇讲解黑色主题设计、position 绝对定位、滤镜条横向滚动、State 选中态管理等核心实现。详细 API 可参考 HarmonyOS position 官方文档。一、ImageEditPage 完整代码1.1 页面完整实现import router from ohos.router; import { FilterItem } from ../common/interfaces; Entry Component struct ImageEditPage { State selectedFilter: number 0; private filters: ArrayFilterItem [ { name: 原图, color: #F0F0F0 }, { name: 清新, color: #E8F5E9 }, { name: 暖色, color: #FFF3E0 }, { name: 胶片, color: #F3E5F5 }, { name: 黑白, color: #E0E0E0 }, { name: 复古, color: #EFEBE9 } ]; build() { Column() { // Header this.HeaderBar() // 图片预览区 文字叠加 this.ImagePreview() // 底部工具栏 this.BottomToolbar() } .width(100%).height(100%).backgroundColor(#1A1A1A) } }二、黑色主题设计2.1 黑色背景.width(100%).height(100%).backgroundColor(#1A1A1A)黑色主题的页面结构Column (主容器黑色背景 #1A1A1A) ├─ Row (Header白色背景) ├─ Column (图片预览区黑色背景) │ ├─ Column (图片占位灰色 #F0F0F0) │ └─ Column (文字叠加层position 定位) └─ Column (工具栏白色背景)2.2 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/SharePreviewPage }) }) } .width(100%).padding({ left: 16, right: 16, top: 12, bottom: 12 }) .backgroundColor(Color.White)三、position 文字叠加3.1 position 定位Column({ space: 8 }) { Text(山川湖海).fontSize(24).fontWeight(FontWeight.Bold).fontColor(Color.White) Text(天地与爱。).fontSize(24).fontWeight(FontWeight.Bold).fontColor(Color.White) } .position({ x: 24, y: 200 })3.2 position 参数参数值说明x24距左侧 24vpy200距顶部 200vp3.3 position 各模式模式语法说明绝对定位position({x, y})相对于父容器定位相对定位offset({x, y})相对于自身原始位置百分比position(50%, 50%)相对于父容器百分比提示position定位的元素会脱离文档流不会影响其他元素的布局。四、滤镜条横向滚动4.1 横向 ScrollScroll() { Row({ space: 12 }) { ForEach(this.filters, (item: FilterItem, index: number) { Column({ space: 6 }) { Column().width(56).height(56) .backgroundColor(item.color).borderRadius(8) .border({ width: this.selectedFilter index ? 2 : 0, color: #F5A623 }) .onClick(() { this.selectedFilter index }) Text(item.name).fontSize(11) .fontColor(this.selectedFilter index ? #F5A623 : #666666) } .alignItems(HorizontalAlign.Center) }, (item: FilterItem, index: number) item.name) } .padding({ left: 16, right: 16 }) } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)4.2 滤镜列表滤镜索引色值说明原图0#F0F0F0无效果清新1#E8F5E9绿色调暖色2#FFF3E0暖色调胶片3#F3E5F5紫色调黑白4#E0E0E0灰度复古5#EFEBE9棕色系五、State 选中态管理5.1 选中态逻辑State selectedFilter: number 05.2 选中态视觉反馈// 边框 - 选中时显示 2px 橙色边框 .border({ width: this.selectedFilter index ? 2 : 0, color: #F5A623 }) // 文字颜色 - 选中时变为主色 .fontColor(this.selectedFilter index ? #F5A623 : #666666)六、工具栏按钮6.1 Builder 封装Builder ToolBtn(icon: string, label: string) { Column({ space: 4 }) { Text(icon).fontSize(20) Text(label).fontSize(11).fontColor(#666666) } .alignItems(HorizontalAlign.Center) }6.2 工具栏布局Row({ space: 0 }) { this.ToolBtn(, 滤镜) this.ToolBtn(, 调整) this.ToolBtn(, 贴纸) this.ToolBtn(T, 文字) this.ToolBtn(, 裁剪) } .width(100%).height(60).backgroundColor(Color.White) .justifyContent(FlexAlign.SpaceAround)七、路由跳转7.1 完成按钮Text(完成).fontSize(16).fontColor(#F5A623) .onClick(() { router.pushUrl({ url: pages/SharePreviewPage }) })7.2 返回按钮Text(‹).fontSize(24).fontColor(#1A1A1A) .onClick(() { router.back() })八、常见问题8.1 问题 1position 定位不生效原因父容器没有设置width和height。解决确保父容器有明确的宽高值。8.2 问题 2横向 Scroll 不滚动原因Row 没有足够的宽度Row 的宽度应该由内容撑开。解决不要给 Row 设置width(100%)让内容决定宽度。九、核心知识点9.1 技术要点黑色背景用backgroundColor(#1A1A1A)文字叠加用position({x, y})绝对定位滤镜条横向滚动用Scroll(scrollable: Horizontal)选中态用Stateborder条件渲染9.2 实战建议黑色背景提升编辑视觉沉浸感position 定位文字在图片上滤镜选中态用 border 条件渲染总结本文详细讲解了 ImageEditPage 图片编辑器的完整实现从黑色主题设计、position 文字叠加、滤镜条横向滚动到State 选中态管理涵盖了图片编辑器的全部核心功能。下一篇我们将深入 LinkEditPage 链接分享的实现。附录图片编辑器的完整实现细节1. 完整的页面结构Column (主容器黑色背景 #1A1A1A) ├─ Row (Header 导航栏白色背景) │ ├─ Text(‹) 返回按钮 │ ├─ Text(图片编辑) 标题 │ └─ Text(完成) 跳转按钮 ├─ Column (图片预览区黑色背景) - layoutWeight(1) │ ├─ Column (图片占位灰色 #F0F0F0) │ │ └─ Text() 80px Emoji │ └─ Column (文字叠加层) │ └─ position({x:24, y:200}) 定位 └─ Column (底部工具栏白色背景) ├─ Row (工具行) - 滤镜/调整/贴纸/文字/裁剪 └─ Scroll (滤镜条横向滚动) └─ Row - 6 个滤镜缩略图2. 工具栏按钮详解Builder ToolBtn(icon: string, label: string) { Column({ space: 4 }) { Text(icon).fontSize(20) Text(label).fontSize(11).fontColor(#666666) } .alignItems(HorizontalAlign.Center) }3. 滤镜选中态的实现方式状态边框宽度边框颜色文字颜色选中2px#F5A623#F5A623未选中0px透明#6666664. 与文字编辑器的对比对比维度ImageEditPageTextEditPage背景色黑色#1A1A1A白色#FFFFFF文字叠加position 定位直接排列滤镜6 种滤镜预设无工具栏双行工具滤镜双行工具格式跳转目标SharePreviewPagePreviewPage5. 扩展方向真实图片选择集成 PhotoViewPicker真实滤镜处理集成 EffectKit图片裁剪功能集成 ImageEditor贴纸功能预置贴纸库文字样式字号、颜色、字体选择以上扩展功能将在后续文章详细介绍。6. 滤镜数据模型export interface FilterItem { name: string; // 滤镜名称 color: string; // 滤镜预览色值 } private filters: ArrayFilterItem [ { name: 原图, color: #F0F0F0 }, { name: 清新, color: #E8F5E9 }, { name: 暖色, color: #FFF3E0 }, { name: 胶片, color: #F3E5F5 }, { name: 黑白, color: #E0E0E0 }, { name: 复古, color: #EFEBE9 } ];7. 键盘快捷键支持// 返回键处理 .onClick(() { router.back() }) // 完成键处理 .onClick(() { router.pushUrl({ url: pages/SharePreviewPage }) })8. 性能优化建议优化项建议原因滤镜预览使用缩略图而非全尺寸减少内存占用图片加载异步加载避免阻塞 UI工具栏使用 Builder 复用减少重复代码状态管理最小化 State 使用减少不必要的 UI 刷新9. 完整代码索引文件路径说明pages/ImageEditPage.ets图片编辑器页面common/interfaces.etsFilterItem 接口定义components/BottomTabBar.ets底部导航栏组件10. 本文涉及的所有 APIAPI用途文档链接State状态管理State GuideBuilderUI 复用Builder Guideposition()绝对定位PositionScroll横向滚动Scroll Componentborder()边框样式Borderrouter.pushUrl()路由跳转Routerrouter.back()返回Router以上 API 的详细用法可参考 HarmonyOS 官方文档。11. 实现要点总结图片编辑器的核心实现要点黑色主题使用#1A1A1A深色背景营造沉浸式编辑体验文字叠加通过position({x, y})将文字层定位在图片之上滤镜横向滚动ScrollScrollDirection.Horizontal实现横向滑动选中态反馈border条件渲染 fontColor条件渲染Builder 复用工具栏按钮通过Builder封装下一步优化方向集成PhotoViewPicker实现真实图片选择集成EffectKit实现真实滤镜效果集成ImageEditor实现裁剪和旋转功能12. 本文总结本文详细讲解了 ImageEditPage 图片编辑器的完整实现。核心知识点包括黑色主题设计#1A1A1A背景营造沉浸式编辑体验、position 文字定位在图片上叠加文字层、滤镜横向滚动ScrollScrollDirection.Horizontal实现横向滑动、State 选中态管理border条件渲染 fontColor条件渲染。这些技术构成了图片编辑器的完整实现基础后续可扩展真实图片选择和滤镜处理。在下一篇文章中我们将继续探讨 LinkEditPage 链接分享编辑器的实现。LinkEditPage 链接分享——PreviewCard Toggle 开关如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力