关于页面：品牌展示 + 版本信息 + 法律条款

张

张建站

2026/7/19 4:01:07

10分钟阅读

前言“海风日记“的关于页面展示了应用的品牌 Logo、版本号、开发商信息和法律条款是用户了解应用信息的窗口。本文将从AboutPage.ets源码出发深入讲解关于页面的实现。一、关于页面布局Entry Component struct AboutPage { build() { Column() { // 导航栏 Row() { Button() { SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([COLOR_TEXT_MAIN]) } .backgroundColor(transparent).width(44).height(44) .onClick(() router.back()) Blank() Text(关于海风).fontSize(17).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold).margin({ right: 44 }) Blank() }.width(100%).height(56).padding({ left: 8 }) Scroll() { Column({ space: 24 }) { // 品牌 Logo Column({ space: 12 }) { Stack() { Circle().width(80).height(80).fill(COLOR_AVATAR_BG) .shadow({ radius: 16, color: COLOR_SHADOW_PRIMARY_MID }) Text().fontSize(38) } Text(海风日记).fontSize(22).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold).letterSpacing(2) Text(Version 1.0.0).fontSize(13).fontColor(COLOR_TEXT_HINT) Text(让每一天随海风飘散).fontSize(14).fontColor(COLOR_TEXT_SECONDARY).fontStyle(FontStyle.Italic) } .width(100%).alignItems(HorizontalAlign.Center).padding({ top: 28, bottom: 8 }) // 信息列表 Column() { ForEach([ { label: 版本号, value: 1.0.0 }, { label: 开发商, value: 海风科技 }, { label: 更新日期, value: 2025年1月 }, { label: 用户协议, value: 查看 › }, { label: 隐私政策, value: 查看 › }, ], (item) { Row() { Text(item.label).fontSize(14).fontColor(COLOR_TEXT_MAIN).layoutWeight(1) Text(item.value).fontSize(14) .fontColor(item.value.includes(›) ? COLOR_AMBER : COLOR_TEXT_SECONDARY) }.height(50).padding({ left: PAGE_PADDING, right: PAGE_PADDING }) Divider().color(COLOR_DIVIDER).margin({ left: PAGE_PADDING }) }) } .backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: COLOR_SHADOW_LIGHT, offsetY: 2 }) .margin({ left: PAGE_PADDING, right: PAGE_PADDING }) // 版权信息 Column({ space: 6 }) { Text( 用文字守护每一天的珍贵).fontSize(13).fontColor(COLOR_AMBER).fontStyle(FontStyle.Italic) Text(© 2025 海风科技. All rights reserved.).fontSize(11).fontColor(COLOR_TEXT_HINT) }.width(100%).alignItems(HorizontalAlign.Center).padding({ bottom: 40 }) } } .layoutWeight(1).scrollBar(BarState.Off) } .width(100%).height(100%).backgroundColor(COLOR_BG_PAGE) } }二、内容反馈页面Entry Component struct EmailFeedbackPage { State feedbackType: number 0 State feedbackText: string State email: string build() { Column() { // 导航栏 Row() { ... } Scroll() { Column({ space: 16 }) { // 反馈类型选择 Row({ space: 8 }) { ForEach([功能建议,问题反馈,体验问题,其他], (label, i) { Text(label).fontSize(13) .fontColor(this.feedbackType i ? COLOR_WHITE : COLOR_TEXT_MAIN) .backgroundColor(this.feedbackType i ? COLOR_PRIMARY : COLOR_BUTTON_INACTIVE_BG) .borderRadius(14).padding({ left: 12, right: 12, top: 5, bottom: 5 }) .onClick(() { this.feedbackType i }) }) } // 反馈内容 TextArea({ placeholder: 请详细描述您遇到的问题, text: this.feedbackText }) .constraintSize({ minHeight: 140 }) // 联系邮箱 TextInput({ placeholder: 方便我们回复您, text: this.email }).type(InputType.Email) // 提交按钮 Button(提交反馈) .enabled(this.feedbackText.trim().length 10) .onClick(() { router.back() }) } } } } }三、总结本文通过“海风日记“的关于页面和反馈页面深入讲解了品牌展示和用户反馈的实现品牌展示Logo 版本标语信息列表版本号、开发商、法律条款反馈表单类型选择、内容输入、提交版权信息底部版权声明如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Circle 组件文档TextArea 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区