下厨房

*核心步骤：*

1. 首页：

   绑定点击事件

​ 点击时跳转页面，并携带数据

​ 携带的内容结合 【详情页】确认

2. 详情页：

​ 接收数据

​ 渲染对应页面结构

利用router可实现页面间的跳转

// -----------传递参数------------
// 普通跳转 并 传递参数
router.pushUrl({
  url:'地址',
  params:{
    // 以对象的形式传递参数
  }
})

// 返回并传递参数
router.back(
  url:'地址',
  params:{
    // 以对象的形式传递参数
  }
)

// -------------页面 B接收并解析参数------------
// aboutToAppear一会展开 （生命周期函数）
aboutToAppear(): void {
  // 1.确认内容
  console.log(JSON.stringify(router.getParams())) 
  // 2.通过 as 类型断言 转为具体的类型
  const params =  router.getParams() as 类型
  // 3. 通过点语法即可取值
  params.xxx 
} 

下厨房首页

import { Category, CategoryContainer } from '..//data/CategoryData'
import { router } from '@kit.ArkUI'


@Entry
@Component
struct XCFDemo {
  @State list: CategoryContainer[] = CategoryContainer.getCategoryContainerList()

  build() {
    Column() {
      // 顶部
      TopCom()
      // 内容
      ContentCom({list:this.list})
        .layoutWeight(1)

      // 底部
      BottomCom()

    }
    .width('100%')
    .height('100%')
  }
}

// 顶部组件：图片代替
@Component
struct TopCom {
  build() {
    Image($r('app.media.ic_public_XCF_TOP'))
      .width('100%')
  }
}

// 内容组件：渲染列表
@Component
struct ContentCom {
  @Prop list:CategoryContainer[]
  build() {
    Scroll() {
      Column({ space: 30 }) {
        ForEach(this.list, (item: CategoryContainer) => {
          Column({ space: 15 }) {
            Text(item.title)
              .fontSize(20)
              .alignSelf(ItemAlign.Start)
              .fontWeight(FontWeight.Medium)
            Grid() {
              ForEach(item.categorizes, (cateItem: Category) => {
                GridItem() {
                  Stack({ alignContent: Alignment.Bottom }) {
                    Image(cateItem.cover)
                    Text(cateItem.title)
                      .fontColor(Color.White)
                      .fontSize(14)
                      .padding({ bottom: 10 })
                  }
                  .borderRadius(10)
                  .clip(true)
                  .onClick(()=>{
                    router.pushUrl({
                      //写/有提示
                      url:'pages/XCFDetailPage',
                      params:{
                        title:cateItem.title,
                        id:cateItem.id
                      }
                    })
                  })
                }
              })
            }
            .columnsTemplate('1fr 1fr 1fr')
            .columnsGap(10)
            .rowsGap(10)
          }
          .height(240)
        })
      }
      .padding(20)
    }
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)

  }
}

// 底部组件：图片代替
@Component
struct BottomCom {
  build() {
    Image($r('app.media.ic_public_XCF_Bottom'))
      .width('100%')
  }
}

下厨房详情页

import { Food, FoodList } from '../data/FoodData';
import { router } from '@kit.ArkUI';

interface ParamType {
  title: string
  id: string
}

@Entry
@Component
struct CategoryPage {
  // 渲染食物列表
  foods: Food[] = []
  @State cover: string = '' //图片素材
  @State cateTitle: string = ''
  @State arr: Food[] = [] //筛选出来的食物清单

  aboutToAppear(): void {
    // 接收路由传递而来的数据
    // console.log(JSON.stringify(router.getParams()))
    const Params = router.getParams() as ParamType
    const arr = FoodList.filter((item: Food) => {
      if (item.categoryId == Params.id) {
        return true
      } else {
        return false
      }
    })
    //console.log('',JSON.stringify(arr))
    this.cover = arr[0].cover // 找到素材中第一个图片
    //console.log(this.cover)
    this.cateTitle = Params.title

    this.arr = arr
  }

  build() {
    Column() {
      // 顶部
      TopCom({ cover: this.cover, cateTitle: this.cateTitle })

      // 列表
      List({ space: 20 }) {
        ForEach(this.arr, (food: Food) => {
          ListItem() {
            Row() {
              Image(food.cover)
                .width(150)
                .height(110)
                .borderRadius(10)
              Column() {
                Text(food.title)
                Text() {
                  Span(`评分:${food.score}    `)
                  Span(`${food.count} 人做过`)
                }
                .fontSize(12)

                Row({ space: 10 }) {
                  // 作者头像
                  Image(food.author.avatar)
                    .width(20)
                    .height(20)
                    .borderRadius(10)
                  // 作者昵称
                  Text(food.author.nickname)
                    .fontSize(10)
                    .fontColor(Color.Gray)
                }
              }
              .alignItems(HorizontalAlign.Start)
              .justifyContent(FlexAlign.SpaceBetween)
              .layoutWeight(1)
              .padding({ top: 5, bottom: 5, left: 10 })
              .height(110)
            }
          }
        })
      }
      .padding(20)
      .layoutWeight(1)
    }
    .height('100%')
  }
}

@Component
struct TopCom {
  @Prop cover: string
  @Prop cateTitle: string

  build() {
    Stack() {
      // 顶部封面
      Image(this.cover)
        .height('100%')
        .width('100%')
      Column() {
        // 返回按钮
        Image($r('app.media.ic_public_arrow_left'))
          .fillColor(Color.White)
          .width(30)
          .onClick(() => {
            router.back()
          })

        // 顶部标题
        Text(this.cateTitle)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .alignItems(HorizontalAlign.Start)
      .padding(20)
      .backgroundColor('rgba(0,0,0,0.4)')
      .width('100%')
      .height('100%')
    }
    .height(220)
  }
}