HarmonyOS应用开发实战：萌宠日记 - 日记编辑器整体布局设计

HarmonyOS应用开发实战：萌宠日记 - 日记编辑器整体布局设计

前言

日记编辑器是萌宠日记的核心功能页面，用户在这里记录爱宠的日常。编辑器包含标题输入、正文输入、照片附件、心情选择、地点天气等完整功能模块。页面采用顶部导航栏 + Scroll 可滚动编辑区的经典布局，让用户在编辑长文时获得流畅的输入体验。

本文将从萌宠日记的 WriteDiaryPage 实现出发，深入解析日记编辑器的整体布局设计、导航栏结构、可滚动编辑区组织，以及各功能模块的排列顺序。

一、编辑器整体布局

1.1 页面结构

┌─────────────────────────────────────┐ │ ‹ 豆豆 › 2024年5月5日 ›│ ← 顶部导航栏（固定） ├─────────────────────────────────────┤ │ Scroll (可滚动编辑区) │ │ ┌─────────────────────────────────┐ │ │ │ 标题 │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ 快乐的周末 │ │ │ ← TextInput 标题 │ │ └───────────────────────────┘ │ │ │ │ ───────────────────────────────│ │ ← Divider 分隔线 │ │ │ │ │ │ 正文 │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ 今天阳光很好，带豆豆去 │ │ │ │ │ │ 公园玩了飞盘，它跑得特 │ │ │ ← TextArea 正文 │ │ │ 别开心... │ │ │ │ │ └───────────────────────────┘ │ │ │ │ │ │ │ │ 照片附件 │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │🐶 │ │🐶 │ │🐶 │ │ + │ │ │ ← 照片 + 添加按钮 │ │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ │ │ │ │ 心情 │ │ │ │ 😊 😌 😐 😢 😠 │ │ ← 心情选择器 │ │ │ │ │ │ 地点 天气 │ │ │ │ 公园 ○ 晴天 26°C ˅ │ │ ← 标签选择器 │ │ │ │ │ │ 保存 │ │ │ │ [ 保存 ] │ │ ← 保存按钮 │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘

1.2 核心代码

// WriteDiaryPage.ets — 编辑器整体布局 @Entry @Component export struct WriteDiaryPage { @State title: string = '' @State content: string = '' @State selectedMood: number = 0 @State location: string = '公园' @State weather: string = '晴天 26°C' @State date: string = '2024年5月5日' build() { Column() { // 1. 顶部导航栏（固定） this.HeaderBar() // 2. 可滚动编辑区 Scroll() { Column({ space: 20 }) { // 标题输入 this.TitleInput() // 分隔线 Divider().color('#F0EBE3') // 正文输入 this.ContentInput() // 照片附件 this.PhotoGallery() // 心情选择 this.MoodSelector() // 地点与天气 this.LocationWeather() // 保存按钮 this.SaveButton() } .padding({ left: 16, right: 16 }) } .layoutWeight(1) // 撑满剩余空间 } .width('100%') .height('100%') .backgroundColor('#FFF8F0') } }

提示：编辑器采用Column 固定导航栏 + Scroll 可滚动区域的布局。导航栏固定在顶部，不随滚动而移动，确保用户随时可以看到日期和返回按钮。编辑区使用layoutWeight(1)撑满剩余空间，实现自适应高度。

二、顶部导航栏

2.1 导航栏实现

@Builder HeaderBar() { Row() { Text('‹') // 返回按钮 .fontSize(24) .fontColor('#333333') Text('豆豆 ›') // 宠物选择 .fontSize(16) .fontColor('#333333') .margin({ left: 12 }) Blank() Text(this.date) // 日期显示 .fontSize(14) .fontColor('#666666') Text('›') // 日期切换 .fontSize(16) .fontColor('#999999') .margin({ left: 4 }) } .width('100%') .padding({ left: 16, right: 16, top: 12, bottom: 12 }) }

2.2 导航栏元素

三、可滚动编辑区

3.1 编辑区内容

Scroll() { Column({ space: 20 }) { // 1. 标题输入 // 2. Divider // 3. 正文输入 // 4. 照片附件 // 5. 心情选择 // 6. 地点与天气 // 7. 保存按钮 } .padding({ left: 16, right: 16 }) } .layoutWeight(1)

3.2 模块间距

四、布局权重控制

4.1 layoutWeight 使用

Column() { // 导航栏（固定高度） this.HeaderBar() // 编辑区（撑满剩余空间） Scroll() { // 编辑内容... } .layoutWeight(1) // 撑满剩余垂直空间 } .width('100%') .height('100%')

4.2 高度分配

Column 高度 = 100% ↓ 导航栏（固定高度 ≈ 48vp） ↓ 编辑区 Scroll（剩余高度 = 100% - 48vp） ↓ 编辑区内容超过 Scroll 高度时 → 可滚动

五、@State 状态管理

5.1 编辑状态

@State title: string = '' // 日记标题 @State content: string = '' // 正文内容 @State selectedMood: number = 0 // 选中心情索引 @State location: string = '公园' // 地点 @State weather: string = '晴天 26°C' // 天气 @State date: string = '2024年5月5日' // 日期

5.2 状态更新

// 标题输入变化 TextInput({ placeholder: '快乐的周末' }) .onChange((value: string) => { this.title = value }) // 正文输入变化 TextArea({ placeholder: '今天阳光很好...' }) .onChange((value: string) => { this.content = value }) // 心情选择变化 .onClick(() => { this.selectedMood = index })

六、编辑器的数据流

6.1 数据流方向

用户输入 → onChange 回调 → @State 更新 → UI 重渲染 ↓ 保存时 → 收集所有 @State 数据 → 持久化存储

6.2 数据保存流程

// 保存日记数据 saveDiary(): void { const diaryData = { title: this.title, content: this.content, mood: this.selectedMood, location: this.location, weather: this.weather, date: this.date, createdAt: new Date().toISOString() } // 持久化到本地存储 console.log('Saving diary:', diaryData) }

七、页面间数据传递

7.1 编辑已有日记

// 从日记列表点击编辑已有日记 this.diaryStack.pushPath({ name: 'diary', param: { diaryId: '123', title: '愉快的周末', content: '今天带豆豆去公园...', mood: 0 } }) // 在 WriteDiaryPage 中接收参数 aboutToAppear(): void { // 从路由参数中获取数据 // 填充到 @State 中 }

八、无障碍适配

8.1 输入组件无障碍

TextInput({ placeholder: '快乐的周末' }) .accessibilityText('日记标题输入框') TextArea({ placeholder: '今天阳光很好...' }) .accessibilityText('日记正文输入框')

九、布局响应式

9.1 不同屏幕适配

十、最佳实践

10.1 编辑器设计原则

有序列表 — 编辑器设计的 5 个原则：

1. 导航栏固定：导航栏保持在顶部，不随滚动移动
2. 编辑区可滚动：内容超过屏幕时自动滚动
3. 模块化组织：各功能模块独立封装，便于复用
4. 状态统一管理：所有编辑状态集中在 @State 中
5. 间距舒适：模块间 20vp 间距，视觉舒适

10.2 萌宠日记编辑器布局总结

总结

本文从萌宠日记的日记编辑器布局实现出发，深入解析了编辑器页面的完整设计：

1. 整体布局：Column 固定导航栏 + Scroll 可滚动编辑区
2. 导航栏设计：返回、宠物选择、日期显示、切换
3. 编辑区组织：7 个功能模块，20vp 间距
4. layoutWeight 控制：编辑区撑满剩余空间
5. @State 状态管理：6 个编辑状态统一管理
6. 数据流设计：输入 → 状态 → 保存的完整链路
7. 页面间数据传递：编辑已有日记的参数回填

下一篇我们将深入TextInput 与 TextArea 输入组件详解，解析输入组件的详细用法。

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

相关资源：

• Scroll 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll
• Column 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column
• layoutWeight 属性：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraints
• @State 装饰器：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state
• TextInput 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput
• TextArea 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textarea
• 页面路由：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-routing
• 无障碍开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit