HarmonyOS开发实战：小分享-DiscoverPage发现页——搜索栏+推荐模板+热门分享

前言发现页是用户探索新内容的入口包含搜索栏、推荐模板横向滑动、热门分享列表等模块。小分享 App 的 DiscoverPage 使用 TextInput 实现搜索横向 Scroll 展示推荐模板。本篇讲解搜索栏设计、横向模板滑动、热门分享卡片等。详细 API 可参考 HarmonyOS TextInput 官方文档。一、DiscoverPage 完整代码import router from ohos.router; import { BottomTabBar } from ../components/BottomTabBar; import { RecommendTemplateItem, HotShareItem } from ../common/interfaces; Entry Component struct DiscoverPage { State searchKey: string ; private recommendTemplates: ArrayRecommendTemplateItem [ { title: 水墨古风, color: #FFF8F0 }, { title: 简约现代, color: #F0F8FF }, { title: 文艺清新, color: #F0FFF0 }, { title: 节日喜庆, color: #FFF0F5 } ]; private hotShares: ArrayHotShareItem [ { author: 文艺青年, content: 生活不在别处当下即是全部。 }, { author: 旅行达人, content: 世界那么大我想去看看。 }, { author: 美食博主, content: 唯有美食与爱不可辜负。 } ]; build() { Column() { // Header 搜索栏 Column({ space: 12 }) { Row() { Text(发现).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1) Text().fontSize(22) } .width(100%).padding({ left: 20, right: 20, top: 12, bottom: 8 }) Row({ space: 8 }) { Text().fontSize(16).fontColor(#999999) TextInput({ placeholder: 搜索内容、模板、用户, text: this.searchKey }) .fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1) .onChange((value: string) { this.searchKey value }) } .width(100%).height(40).backgroundColor(#F5F5F5).borderRadius(20) .padding({ left: 16, right: 16 }).margin({ left: 20, right: 20, bottom: 12 }) } .backgroundColor(Color.White) Scroll() { Column({ space: 20 }) { // 推荐模板 Column({ space: 12 }) { Row() { Text(精选模板推荐).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1) Text(更多 ›).fontSize(13).fontColor(#F5A623) .onClick(() { router.pushUrl({ url: pages/TemplateSelectPage }) }) } .width(100%).padding({ left: 20, right: 20 }) Scroll() { Row({ space: 12 }) { ForEach(this.recommendTemplates, (item: RecommendTemplateItem, index: number) { Column({ space: 8 }) { Column() { Text().fontSize(36) } .width(120).height(80).backgroundColor(item.color).borderRadius(12) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) Text(item.title).fontSize(12).fontColor(#666666) } .onClick(() { router.pushUrl({ url: pages/TemplateDetailPage }) }) }, (item: RecommendTemplateItem, index: number) item.title) } .padding({ left: 20, right: 20 }) } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off) } // 热门分享 Column({ space: 12 }) { Row() { Text(热门分享).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1A1A1A).layoutWeight(1) Text(更多 ›).fontSize(13).fontColor(#F5A623) } .width(100%).padding({ left: 20, right: 20 }) ForEach(this.hotShares, (item: HotShareItem, index: number) { Column({ space: 8 }) { Row({ space: 10 }) { Column() { Text().fontSize(16) } .width(32).height(32).backgroundColor(#F5A623).borderRadius(16) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) Text(item.author).fontSize(13).fontColor(#666666).layoutWeight(1) } .width(100%) Text(item.content).fontSize(15).fontColor(#1A1A1A).width(100%) } .width(100%).padding(16).backgroundColor(Color.White).borderRadius(12) .margin({ left: 20, right: 20 }) }, (item: HotShareItem, index: number) ${item.author}_${index}) } } .padding({ bottom: 80 }) } .layoutWeight(1).scrollBar(BarState.Off) BottomTabBar({ currentIndex: 1 }) } .width(100%).height(100%).backgroundColor(#F5F5F5) } }二、搜索栏设计2.1 TextInput 搜索框TextInput({ placeholder: 搜索内容、模板、用户, text: this.searchKey }) .fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1) .onChange((value: string) { this.searchKey value })2.2 搜索栏容器Row({ space: 8 }) { Text().fontSize(16).fontColor(#999999) TextInput({ placeholder: 搜索..., text: this.searchKey }).layoutWeight(1) } .width(100%).height(40).backgroundColor(#F5F5F5).borderRadius(20) .padding({ left: 16, right: 16 })三、推荐模板横向滑动3.1 横向 ScrollScroll() { Row({ space: 12 }) { ForEach(this.recommendTemplates, (item) { Column({ space: 8 }) { Column() { Text().fontSize(36) } .width(120).height(80).backgroundColor(item.color).borderRadius(12) Text(item.title).fontSize(12).fontColor(#666666) } .onClick(() { router.pushUrl({ url: pages/TemplateDetailPage }) }) }) } .padding({ left: 20, right: 20 }) } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)四、热门分享卡片Column({ space: 8 }) { Row({ space: 10 }) { Column() { Text().fontSize(16) } .width(32).height(32).backgroundColor(#F5A623).borderRadius(16) Text(item.author).fontSize(13).fontColor(#666666).layoutWeight(1) } Text(item.content).fontSize(15).fontColor(#1A1A1A) } .width(100%).padding(16).backgroundColor(Color.White).borderRadius(12)五、本文核心知识点5.1 发现页核心要点TextInput 搜索框圆角 20横向 Scroll 展示推荐模板热门分享卡片白色背景圆角5.2 实战开发要点搜索栏使用 State 绑定输入横向 Scroll 设置 scrollable(Horizontal)更多链接用›箭头附录发现页的完整实现细节1. 完整的页面布局结构Column (主容器背景 #F5F5F5) ├─ Column (搜索栏区白色背景) │ ├─ Row (Header) │ │ ├─ Text(发现) 标题 │ │ └─ Text() 搜索图标 │ └─ Row (搜索框) │ ├─ Text() 16px 灰色 │ └─ TextInput (输入框) ├─ Scroll (可滚动内容区) - layoutWeight(1) │ └─ Column (space: 20) │ ├─ Column (推荐模板区) │ │ ├─ Row (标题 更多) │ │ └─ Scroll (横向滑动) │ │ └─ Row (模板卡片列表) │ └─ Column (热门分享区) │ ├─ Row (标题 更多) │ └─ Column (分享卡片列表) └─ BottomTabBar (底部导航) - currentIndex: 12. 搜索栏的完整实现Row({ space: 8 }) { Text().fontSize(16).fontColor(#999999) TextInput({ placeholder: 搜索内容、模板、用户, text: this.searchKey }) .fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1) .onChange((value: string) { this.searchKey value }) } .width(100%).height(40).backgroundColor(#F5F5F5).borderRadius(20) .padding({ left: 16, right: 16 }).margin({ left: 20, right: 20, bottom: 12 })3. 推荐模板横向滑动Scroll() { Row({ space: 12 }) { ForEach(this.recommendTemplates, (item: RecommendTemplateItem) { Column({ space: 8 }) { Column() { Text().fontSize(36) } .width(120).height(80).backgroundColor(item.color).borderRadius(12) Text(item.title).fontSize(12).fontColor(#666666) } .onClick(() { router.pushUrl({ url: pages/TemplateDetailPage }) }) }, (item: RecommendTemplateItem) item.title) } .padding({ left: 20, right: 20 }) } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)4. 热门分享卡片Column({ space: 8 }) { Row({ space: 10 }) { Column() { Text().fontSize(16) } .width(32).height(32).backgroundColor(#F5A623).borderRadius(16) Text(item.author).fontSize(13).fontColor(#666666).layoutWeight(1) } Text(item.content).fontSize(15).fontColor(#1A1A1A) } .width(100%).padding(16).backgroundColor(Color.White).borderRadius(12) .margin({ left: 20, right: 20 })5. 数据模型export interface RecommendTemplateItem { title: string; color: string; } export interface HotShareItem { author: string; content: string; }6. 完整代码文件索引文件路径说明pages/DiscoverPage.ets发现页common/interfaces.ets接口定义components/BottomTabBar.ets底部导航7. 本文涉及的所有 APIAPI/组件用途文档链接TextInput搜索输入TextInputScroll横向滚动ScrollState状态管理State Guiderouter.pushUrl()路由跳转RouterForEach循环渲染ForEachBottomTabBar底部导航自定义组件8. 实现要点总结发现页的核心实现要点搜索栏TextInput 组件圆角 20灰色背景推荐模板横向 Scroll 滑动固定宽度 120px热门分享白色卡片圆形头像 内容文字State 管理searchKey绑定搜索输入底部导航BottomTabBar currentIndex: 19. 总结本文详细讲解了 DiscoverPage 发现页的完整实现涵盖搜索栏、推荐模板横向滑动、热门分享卡片等核心功能。相关资源HarmonyOS TextInput 官方文档TextInput ReferenceHarmonyOS Scroll 组件Scroll ComponentHarmonyOS State 装饰器State GuideHarmonyOS Router 路由Router APIHarmonyOS ForEach 渲染ForEach ReferenceHarmonyOS Row 组件Row ComponentHarmonyOS borderRadius 属性BorderRadius开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践并能够独立实现类似功能。在实际开发中建议读者结合官方文档深入理解每个 API 的参数含义和适用场景并在项目中灵活运用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力