企业官网建设流程全解析

前言

发现页是用户探索新内容的入口，包含搜索栏、推荐模板横向滑动、热门分享列表等模块。小分享 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: Array<RecommendTemplateItem> = [ { title: '水墨古风', color: '#FFF8F0' }, { title: '简约现代', color: '#F0F8FF' }, { title: '文艺清新', color: '#F0FFF0' }, { title: '节日喜庆', color: '#FFF0F5' } ]; private hotShares: Array<HotShareItem> = [ { 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 横向 Scroll

Scroll() { 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 发现页核心要点

1. TextInput 搜索框，圆角 20
2. 横向 Scroll 展示推荐模板
3. 热门分享卡片，白色背景圆角

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: 1

2. 搜索栏的完整实现

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. 完整代码文件索引

7. 本文涉及的所有 API

8. 实现要点总结

发现页的核心实现要点：

1. 搜索栏：TextInput 组件，圆角 20，灰色背景
2. 推荐模板：横向 Scroll 滑动，固定宽度 120px
3. 热门分享：白色卡片，圆形头像 + 内容文字
4. @State 管理：searchKey绑定搜索输入
5. 底部导航：BottomTabBar currentIndex: 1

9. 总结

本文详细讲解了 DiscoverPage 发现页的完整实现，涵盖搜索栏、推荐模板横向滑动、热门分享卡片等核心功能。

相关资源

• HarmonyOS TextInput 官方文档：TextInput Reference
• HarmonyOS Scroll 组件：Scroll Component
• HarmonyOS @State 装饰器：@State Guide
• HarmonyOS Router 路由：Router API
• HarmonyOS ForEach 渲染：ForEach Reference
• HarmonyOS Row 组件：Row Component
• HarmonyOS borderRadius 属性：BorderRadius
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习，读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践，并能够独立实现类似功能。在实际开发中，建议读者结合官方文档深入理解每个 API 的参数含义和适用场景，并在项目中灵活运用。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！