鸿蒙HarmonyOS 开发通过 @BuilderParam装饰器：引用@Builder函数实现自定义标题栏

1. 创建Navbar.ets组件文件,内容如下:

import router from '@ohos.router';

@Component
export struct Navbar {
    title: string = "";

    @Builder rightAreaBuilder() {
    };

    @BuilderParam rightArea: () => void = this.rightAreaBuilder;

    build() {
        Column() {
            Row() {
                Column() {
                    if (parseInt(router.getLength()) > 1){
                        Image($r("app.media.left_arrow")).width(30).height(30).onClick(() => {
                            router.back();
                        }).alignSelf(ItemAlign.Start)
                    }

                }.layoutWeight(1)
                
                Text(this.title).fontSize(16).height(50)

                Column() {//右侧区域
                    this.rightArea();
                }.layoutWeight(1)

            }.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({ left: 10, right: 10 })
        }.width('100%').backgroundColor("#f5f5f5")
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2.在Home.ets文件中引用

import { Navbar } from "../../components/Navbar/Navbar"
import promptAction from '@ohos.promptAction'


@Component
export struct Home {
    @State messageList: number[] = [
        1, 23, 56, 6, 8, 2, 23, 45, 67, 85, 23, 42, 12, 34, 65, 85, 2334, 6575, 7567, 234, 123, 2314
    ]


    //首页
    build() {
        Column() {
        	//标题栏组件
            Navbar({ title: "微信", rightArea: this.addBuilder })
            //数据列表
            List() {
                ForEach(this.messageList, (item, key) => {
                    ListItem() {
                        Text(`${item}`).fontSize(16).padding(20)
                    }
                })
            }.divider({ strokeWidth: 1, color: "#eee" })

        }.width("100%").height("100%").padding({ bottom: 50 })
    }

    @Builder addBuilder() {
        Image($r("app.media.jiahao")).width(30).height(30).alignSelf(ItemAlign.End).onClick(() => {
            promptAction.showToast({
                message: "菜单",
            })
        })
    }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3.效果图