前言在“海风日记“的写日记页面中渐变选择区和正文写作区之间通过波浪形状的 Shape 组件进行过渡实现了视觉上的无缝衔接。本文将从源码出发深入讲解 Shape 和 Path 组件的使用以及如何通过贝塞尔曲线绘制波浪形状。一、波浪分隔的实现1.1 源码Shape() { Path() .commands(M 0 0 C 80 12 160 -4 240 6 C 320 16 360 0 390 4 L 390 20 L 0 20 Z) .fill(#FFD4A0) .stroke(none) } .width(100%).height(20).margin({ top: -1 })1.2 路径解析命令说明坐标M 0 0移动到左上角(0, 0)C 80 12 160 -4 240 6第一个波浪(0,0)→(240,6)C 320 16 360 0 390 4第二个波浪(240,6)→(390,4)L 390 20直线到右下(390,20)L 0 20直线到左下(0,20)Z闭合路径回到起点二、Shape 组件的属性Shape() { Path() .commands(...) // SVG 路径字符串 .fill(#FFD4A0) // 填充色 .stroke(none) // 无描边 } .width(100%) // 宽度 .height(20) // 高度 .margin({ top: -1 }) // 向上偏移 1px覆盖缝隙三、波浪分隔的视觉作用┌───────────────────────┐ │ 渐变选择区 │ │ (暖橙渐变背景) │ │ │ │ ~~~~~~~~~~~~~~~~~ │ ← 波浪分隔覆盖缝隙 │ ───────────────── │ ← 实际边界 │ │ │ 正文写作区 │ │ (暖白背景) │ └───────────────────────┘四、其他页面的波浪分隔4.1 日记详情页Shape() { Path() .commands(M 0 0 C 80 14 180 -6 270 8 C 340 18 370 2 390 6 L 390 24 L 0 24 Z) .fill(COLOR_HEADER_TOP).stroke(none) } .width(100%).height(24).margin({ top: -1 })4.2 日历页Shape() { Path() .commands(M 0 12 C 65 2 130 22 195 12 C 260 2 325 22 390 12 L 390 24 L 0 24 Z) .fill(COLOR_HEADER_TOP).stroke(none) } .width(100%).height(24)五、常见问题5.1 波浪颜色与背景不匹配问题波浪颜色与下方区域颜色不同出现明显分界。解决方案确保波浪的fill颜色与下方区域背景色一致。总结本文通过“海风日记“的波浪分隔深入讲解了 Shape Path 绘制波浪形状Shape 组件容器组件包裹 PathPath 路径贝塞尔曲线绘制波浪margin top -1覆盖缝隙实现无缝过渡多页面应用不同页面的波浪参数下一篇文章将深入讲解编辑日记页的预填数据与状态初始化敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Shape 组件文档Path 组件文档贝塞尔曲线指南海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区