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 模块间距间距位置值说明Column space20vp模块之间的垂直间距左右内边距16vp内容与屏幕边缘四、布局权重控制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 不同屏幕适配屏幕宽度内边距输入框高度字号 360vp12vp100vp14fp360-414vp16vp120vp15fp414-600vp20vp150vp16fp 600vp24vp200vp18fp十、最佳实践10.1 编辑器设计原则有序列表 — 编辑器设计的 5 个原则导航栏固定导航栏保持在顶部不随滚动移动编辑区可滚动内容超过屏幕时自动滚动模块化组织各功能模块独立封装便于复用状态统一管理所有编辑状态集中在 State 中间距舒适模块间 20vp 间距视觉舒适10.2 萌宠日记编辑器布局总结布局要素值说明整体布局Column Scroll固定导航栏 可滚动编辑区导航栏高度约 48vp固定高度编辑区高度layoutWeight(1)撑满剩余空间模块间距20vpColumn space左右边距16vp统一标准背景色#FFF8F0暖白总结本文从萌宠日记的日记编辑器布局实现出发深入解析了编辑器页面的完整设计整体布局Column 固定导航栏 Scroll 可滚动编辑区导航栏设计返回、宠物选择、日期显示、切换编辑区组织7 个功能模块20vp 间距layoutWeight 控制编辑区撑满剩余空间State 状态管理6 个编辑状态统一管理数据流设计输入 → 状态 → 保存的完整链路页面间数据传递编辑已有日记的参数回填下一篇我们将深入TextInput 与 TextArea 输入组件详解解析输入组件的详细用法。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Scroll 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scrollColumn 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnlayoutWeight 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-layout-constraintsState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-stateTextInput 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinputTextArea 组件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