前言“海风日记“的 Premium 订阅页底部包含固定按钮和服务条款链接通过 Column 布局实现固定底部区域。本文将从源码出发深入讲解底部固定按钮的布局。一、ImageViewerPage 图片查看器Entry Component struct ImageViewerPage { State currentIndex: number 0 private imageUrls: string[] [image1, image2, image3, image4] build() { Column() { // 顶部操作栏 Row() { Button() { SymbolGlyph($r(sys.symbol.xmark)).fontSize(20).fontColor([#FFFFFF]) } .onClick(() router.back()) Text(${this.currentIndex 1} / ${this.imageUrls.length}) Button() { SymbolGlyph($r(sys.symbol.ellipsis_circle)).fontSize(20).fontColor([#FFFFFF]) } } // 主图片轮播 Swiper() { ForEach(this.imageUrls, (url, idx) { Column() { SymbolGlyph($r(sys.symbol.camera)).fontSize(64) } }) } .layoutWeight(1).indicator(false).loop(false) // 缩略图预览条 Scroll() { Row({ space: 8 }) { ForEach(this.imageUrls, (url, idx) { Column().width(56).height(56).borderRadius(8).backgroundColor(#E8A0A0) .onClick(() { this.currentIndex idx }) }) } } } .backgroundColor(#000000) } }二、PrivacyPasswordPage 隐私密码Entry Component struct PrivacyPasswordPage { State hasPassword: boolean false State isSettingMode: boolean false State password: string private readonly KEY_ROWS: string[][] [ [1, 2, 3], [4, 5, 6], [7, 8, 9], [, 0, del] ] handleKey(key: string) { if (key del) { this.password this.password.substring(0, this.password.length - 1) } else if (key.length 0 this.password.length 6) { this.password key } } build() { // 三态未设置 / 输入密码 / 已设置 if (!this.hasPassword !this.isSettingMode) { // 未设置 } else if (this.isSettingMode) { // 输入密码 } else { // 已设置 } } }三、常见问题 FAQEntry Component struct FaqPage { State faqs: FaqItem[] [ { q: 如何备份我的日记, a: 前往「我的 → 数据管理 → 同步备份」, expanded: false }, { q: 日记内容会加密吗, a: 您的所有日记内容均使用 AES-256 加密存储, expanded: false }, ] build() { ForEach(this.faqs, (item: FaqItem, idx: number) { Column() { Row() { Text(Q).fontSize(12).fontColor(COLOR_WHITE) .width(20).height(20).borderRadius(10).backgroundColor(COLOR_PRIMARY) Text(item.q).fontSize(14).fontColor(COLOR_TEXT_MAIN) SymbolGlyph(item.expanded ? $r(sys.symbol.chevron_up) : $r(sys.symbol.chevron_down)) } .onClick(() { this.faqs[idx] { q: item.q, a: item.a, expanded: !item.expanded } this.faqs [...this.faqs] }) if (item.expanded) { Row() { Text(A).fontSize(12).fontColor(COLOR_WHITE) .width(20).height(20).borderRadius(10).backgroundColor(COLOR_AMBER) Text(item.a).fontSize(13).fontColor(COLOR_TEXT_SECONDARY) } } } }) } }四、总结本文通过“海风日记“的多个高级功能页面深入讲解了图片查看、隐私密码和 FAQ 的实现ImageViewerPageSwiper 轮播 缩略图PrivacyPasswordPage自定义数字键盘 三态切换FaqPage手风琴展开 QA 折叠至此第十二系列“高级功能与特殊页面“全部完成下一篇文章开始进入第十三系列鸿蒙特性与最佳实践。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Swiper 组件文档Scroll 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
