前言

在"海风日记"中，编辑日记页 (EditDiaryPage) 与写日记页 (WriteDiaryPage) 共享相同的 UI 布局，但编辑页需要预填现有日记数据。

本文将从源码出发，深入讲解编辑页如何复用写日记页的布局，以及通过预填状态数据实现编辑功能。

---

一、编辑页状态初始化

1.1 预填数据

@Entry
@Component
struct EditDiaryPage {
  @State selectedMood: number = 3
  @State selectedWeather: number = 0
  @State diaryText: string = '今天阳光很好，海风轻轻吹来，带走了心中的烦恼。走在沙滩上，脚踩着细软的沙子，听着海浪的声音，感觉整个人都放松了下来。'
  @State title: string = '海边漫步'
}

1.2 与写日记页的对比

状态	写日记页	编辑日记页
title	空字符串	“海边漫步”
diaryText	空字符串	预填内容
selectedMood	3（开心）	3（开心）
selectedWeather	0（晴天）	0（晴天）

---

二、导航栏标题

Row() {
  Button() { ... }  // 关闭按钮
  Blank()
  Text('编辑日记')    // 标题改为"编辑日记"
    .fontSize(16).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold)
  Blank()
  Button('保存') { ... }  // 保存按钮
}

---

三、布局复用

编辑页与写日记页共享相同的布局结构：

1. 顶部导航栏
2. 渐变选择区（标题 + MoodSelector）
3. 波浪分隔
4. 正文编辑区（TextArea + 字数统计）
5. 底部工具栏

---

四、工具栏差异

编辑页的工具栏多了一个"删除"选项：

[
  { icon: $r('sys.symbol.camera'), label: '图片' },
  { icon: $r('sys.symbol.face_smiling'), label: '表情' },
  { icon: $r('sys.symbol.list_bullet'), label: '标签' },
  { icon: $r('sys.symbol.map'), label: '位置' },
  { icon: $r('sys.symbol.trash'), label: '删除' },  // 编辑页特有
]

---

五、常见问题

5.1 预填数据不显示

问题：编辑页预填的数据没有显示在输入框中。

原因：TextInput 和 TextArea 的 text 参数未正确绑定 @State。

解决方案：确保 text 参数绑定到 @State 变量。

---

总结

本文通过"海风日记"的编辑日记页，深入讲解了编辑页的复用实现：

1. 预填数据：通过 @State 初始值预填内容
2. 导航标题：标题改为"编辑日记"
3. 布局复用：共享相同的 UI 结构
4. 工具栏差异：编辑页增加删除选项

下一篇文章将深入讲解 字数统计实时更新，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

---

相关资源：

• @State 装饰器文档
• TextInput 组件文档
• TextArea 组件文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区