前言“海风日记“的意见反馈页面提供了完整的反馈提交功能包括反馈类型选择、问题描述输入、联系邮箱和提交按钮。本文将从EmailFeedbackPage.ets源码出发深入讲解反馈页面的实现。一、反馈页面完整实现Entry Component struct EmailFeedbackPage { State feedbackType: number 0 State feedbackText: string State email: string 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: 16 }) { // 反馈类型 Column({ space: 8 }) { Text(反馈类型).fontSize(12).fontColor(COLOR_TEXT_HINT) Row({ space: 8 }) { ForEach([功能建议,问题反馈,体验问题,其他], (label: string, i: number) { 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 }) }) } }.width(100%).padding({ left: PAGE_PADDING, right: PAGE_PADDING, top: 12 }) // 反馈内容 Column({ space: 8 }) { Text(问题描述).fontSize(12).fontColor(COLOR_TEXT_HINT) TextArea({ placeholder: 请详细描述您遇到的问题或建议, text: this.feedbackText }) .width(100%).constraintSize({ minHeight: 140 }) .fontSize(14).fontColor(COLOR_TEXT_MAIN).lineHeight(24) .placeholderColor(COLOR_TEXT_HINT) .backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS) .border({ width: 1, color: COLOR_INPUT_BORDER }) .padding(PAGE_PADDING) .onChange((v) { this.feedbackText v }) }.width(100%).padding({ left: PAGE_PADDING, right: PAGE_PADDING }) // 联系邮箱 Column({ space: 8 }) { Text(联系邮箱选填).fontSize(12).fontColor(COLOR_TEXT_HINT) TextInput({ placeholder: 方便我们回复您, text: this.email }) .width(100%).height(50).fontSize(14).type(InputType.Email) .placeholderColor(COLOR_TEXT_HINT).backgroundColor(COLOR_CARD_BG) .borderRadius(INPUT_RADIUS).border({ width: 1, color: rgba(200,180,140,0.20) }) .padding({ left: 14, right: 14 }) .onChange((v) { this.email v }) }.width(100%).padding({ left: PAGE_PADDING, right: PAGE_PADDING }) // 提交按钮 Button(提交反馈) .width(90%).height(50).fontSize(16).fontColor(COLOR_WHITE).fontWeight(FontWeight.Bold) .backgroundColor(this.feedbackText.trim().length 10 ? COLOR_PRIMARY : COLOR_BUTTON_DISABLED_BG) .borderRadius(BTN_RADIUS_FULL) .shadow({ radius: 12, color: #40F5A623, offsetY: 4 }) .enabled(this.feedbackText.trim().length 10) .onClick(() { router.back() }) }.padding({ bottom: 40 }) } .layoutWeight(1).scrollBar(BarState.Off) } .width(100%).height(100%).backgroundColor(COLOR_BG_PAGE) } }二、页面功能总结功能实现说明反馈类型4 个标签按钮单选问题描述TextArea多行输入最小 140vp联系邮箱TextInput选填Email 键盘提交按钮Button条件禁用10 字以上三、总结本文通过“海风日记“的意见反馈页面深入讲解了反馈提交功能的实现反馈类型选择4 种类型单选问题描述多行文本输入邮箱输入选填联系方式提交按钮条件启用至此全部 100 篇文章撰写完成如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextArea 组件文档TextInput 组件文档InputType 枚举海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区