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

鸿蒙小林
发布于 2025-6-20 10:33
浏览
0收藏

技术栈

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
收藏
回复
举报
回复
    相关推荐