## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了顶部toolbar的地址选择，会员码展示，首页的静态页面就先告一段落，这节我们来实现商品列表item的点击传值、自定义标题栏。

## 功能分析

1.自定义标题栏

当我们进入二级三级页面的时候，就需要向用户介绍我们当前的页面信息，标题栏很好的实现了这个效果，并且进入的页面级别过多，也要给用户一个可点击的退出按钮。当然了，有些页面是不需要有返回按钮的，这里我们还要兼顾通用性。

2.页面间传值

页面之前的数据传递，是app中比较常见也是比较重要的知识点，这里我们通过点击列表的条目进行数据的传递，然后在详情页进行数据的接收

## 代码实现

自定义标题栏

import router from '@ohos.router'

@Component

export struct CommonTopBar {

  @Prop title: string

  @Prop alpha: number

  private titleAlignment: TextAlign = TextAlign.Center

  private backButton: boolean = true

  private onBackClick?: () => void

  build() {

    Column() {

      Blank()

        .backgroundColor(Color.Red)

        .opacity(this.alpha)

      Stack({ alignContent: Alignment.Start }) {

        Stack()

          .height(50)

          .width("100%")

          .opacity(this.alpha)

          .backgroundColor(Color.Red)

        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {

          Text(this.title)

            .flexGrow(1)

            .textAlign(this.titleAlignment)

            .fontSize(18)

            .fontColor(Color.Black)

            .align(Alignment.Center)

            .maxLines(1)

            .textOverflow({ overflow: TextOverflow.Ellipsis })

        }

        .height(50)

        .margin({ left: 50, right: 50 })

        .alignSelf(ItemAlign.Center)

        if (this.backButton) {

            Stack() {

              Image($r('app.media.ic_back'))

                .height(16)

                .width(12)

                .objectFit(ImageFit.Contain)

                .align(Alignment.Center)

            }

            .onClick(() => {

              this.onBackClick?.()

              router.back();

            })

            .height(50)

            .width(50)

        }

      }

      .height(50)

      .width("100%")

      Divider().strokeWidth(0.5).color("#E6E6E6")

    }.backgroundColor(Color.White)

    .height(51)

  }

}

在标题栏中我们使用了一些逻辑判断，并且设置标题是外部传入的，而且还预留了一个事件的回调，这能让我们的标题栏更加的灵活

页面间传值

首先我们需要创建一个商品详情页的页面，然后把我们的自定义标题栏引入进去

import { CommonTopBar } from '../widget/CommonTopBar';

@Entry

@Component

struct ProductDetailsPage {

  build() {

    Column() {

      CommonTopBar({ title: "商品详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

    }

    .height('100%')

    .width('100%')

  }

}

然后在商品流的点击事件里使用router

.onClick(() => {

            router.pushUrl({

              url: 'pages/component/ProductDetailsPage',

              params: item

            }, (err) => {

              if (err) {

                console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);

                return;

              }

              console.info('Invoke pushUrl succeeded.');

            });

          })

这里我们把整个item的信息都传递过去，方便我们使用

接收

  @State receivedParams: HomeProductList = {} as HomeProductList;

  aboutToAppear(): void {

    let order= router.getParams() as HomeProductList;

    console.info('Received params:',order);

  }

在页面上我们先展示出来

  Text(JSON.stringify(this.receivedParams))

        .fontColor(Color.Black)

到这里我们就实现了本节的内容了，下一节我们将要丰富商品详情页的内容