《仿盒马》app开发技术分享-- 自定义标题栏&商品详情初探(9)

举报
yd_215151764 发表于 2025/06/30 10:19:36 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了顶部toolbar的地址选择,会员码展示,首页的静态页面就先告一段落,这节我们来实现商品列表item的点击传值、自定义标题栏。## 功能分析1.自定义标题栏当我们进入二级三级页面的时候,就需要向用户介绍我们当前的页面信息,标题栏很好的实现了这个效果,并且进入的页面级别过多,也要给用户一个可点击的退出按钮。当然了,有...


## 技术栈

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)
到这里我们就实现了本节的内容了,下一节我们将要丰富商品详情页的内容

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。