首页模块实现流程操作指南

首页效果

一、模块概述

首页模块（Home）是蛋糕美食元服务的门面模块，承担品牌展示和快捷导航的核心职责。用户打开应用后首先看到的就是首页，它需要快速传递品牌调性并提供清晰的功能入口。

二、模块职责

职责	说明
品牌展示	渐变色Banner + 品牌口号"每一口都是幸福的味道"
快捷入口	4个核心功能入口（蛋糕订购/外卖配送/门店查询/活动海报）
热销推荐	展示标记为isHot的人气蛋糕列表
活动预览	双列网格展示当前优惠活动海报

三、实现流程

步骤1：创建页面骨架

在 pages/Home.ets 中创建组件，使用 Scroll 作为根容器实现纵向滚动：

@Component
export struct Home {
  @LocalStorageLink('chooseShop') chooseShop: string = ''
  @LocalStorageLink('orderType') orderType: number = 0
  @State hotCakes: CakeDetail[] = []
  @State posters: PosterInfo[] = posterListData

  aboutToAppear(): void {
    this.hotCakes = getHotCakes()
  }

  build() {
    Scroll() {
      Column() {
        // 各区域组件
      }
    }
    .scrollBar(BarState.Off)
  }
}

步骤2：实现品牌Banner

使用 Stack 叠加背景色和文字内容：

Stack() {
  Column() {
    Text('甜蜜时光')
      .fontSize(28)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.White)
    Text('每一口都是幸福的味道')
      .fontSize(14)
      .fontColor('#FFFFFFCC')
      .margin({ top: 8 })
  }
  .alignItems(HorizontalAlign.Start)
  .padding({ left: 20, bottom: 20 })
}
.width('100%')
.height(180)
.backgroundColor('#FF6B35')
.borderRadius({ bottomLeft: 24, bottomRight: 24 })

设计要点：底部圆角使用 borderRadius 的 bottomLeft/bottomRight 属性实现。

步骤3：实现快捷入口网格

使用 @Builder 封装可复用的按钮组件：

@Builder
actionButton(icon: string, title: string, action: () => void) {
  Column() {
    Text(icon)
      .fontSize(28)
      .width(52).height(52)
      .textAlign(TextAlign.Center)
      .backgroundColor('#FFF5E6')
      .borderRadius(16)
    Text(title)
      .fontSize(12)
      .fontColor('#333333')
      .margin({ top: 8 })
  }
  .onClick(() => { action() })
}

通过 Row + FlexAlign.SpaceEvenly 实现4个按钮等距排列，负margin上移实现与Banner的层叠效果。

步骤4：实现人气推荐列表

使用 ForEach 渲染热销蛋糕列表，并集成 CakeCard 公共组件：

ForEach(this.hotCakes.slice(0, 3), (cake: CakeDetail) => {
  CakeCard({
    cake: cake,
    onItemClick: (c: CakeDetail) => {
      RouterModule.push({
        stackName: NavStackMap.MAIN_STACK,
        url: NavRouterMap.PAGE_CAKE_DETAIL,
        param: c
      } as NavRouterInfo)
    },
    onAddToCart: (c: CakeDetail) => {}
  })
  .margin({ bottom: 8 })
})

关键点：slice(0, 3) 限制首页只展示前3个热销蛋糕。

步骤5：实现活动海报区域

使用 GridRow + GridCol 实现双列海报网格：

GridRow({ columns: 2, gutter: 10 }) {
  ForEach(this.posters.slice(0, 4), (poster: PosterInfo) => {
    GridCol() {
      PosterCard({ poster: poster })
    }
  })
}

步骤6：页面跳转逻辑

交互	跳转方式	目标页面
蛋糕订购	修改selectedIndex=1	美食Tab
外卖配送	RouterModule.push	PageTakeOut
门店查询	RouterModule.push	PageShopList
活动海报	RouterModule.push	PagePoster
蛋糕卡片	RouterModule.push	PageCakeDetail

四、数据流图

Home.ets
  ├── aboutToAppear() → getHotCakes() → @State hotCakes
  ├── posterListData (静态数据) → @State posters
  ├── LocalStorageLink → chooseShop, orderType (双向绑定)
  └── 用户点击 → RouterModule.push → 目标页面

五、注意事项

1. 首页数据来自静态模型（CakeModel），实际项目应替换为网络API
2. Scroll 组件需设置 scrollBar(BarState.Off) 隐藏滚动条
3. Banner负margin效果需要父容器 Column 支持层叠
4. AppStorage.setOrCreate('selectedIndex', 1) 用于跨组件切换Tab