【时间盒子】-【7.标题菜单栏】自定义任务页面顶部的标题菜单栏组件 原创

@Preview
@Component
export default struct TitleContainer {
  build() {
    // 行布局
    Row() {
      
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

build() {
  // 行布局
  Row() {
    // 返回按钮
    Button() {
      Image('images/icon_back.png')
        .objectFit(ImageFit.Fill);
    }
    .width(24)
    .height(24)
    .backgroundColor("#00000000")
    .onClick(() => {
      //TODO 按钮事件

    });

    // 标题内容
    Text('标题')
      .fontSize(20)
      .lineHeight(28)
      .fontColor('#182431')
      .fontWeight(FontWeight.Bold)
      .margin({ left: 16 });

    // 占位
    Blank();
  }
  .width("100%")
  .height(56)
  .padding({ left: 24, right: 24 });
}

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.

// 返回按钮图片
private backImg: string | Resource = $r("app.media.icon_cancel");
// 返回按钮点击事件
private backFunc?: () => void;
// 标题
private title: string | Resource = "标题";

1.
2.
3.
4.
5.
6.
7.

build() {
  // 行布局
  Row() {
    // 返回按钮
    Button() {
      Image(this.backImg == null ? $r("app.media.icon_back") : this.backImg)
        .objectFit(ImageFit.Fill);
    }
    .width(SizeUtil.getVp($r("app.float.title_button_size")))
    .height(SizeUtil.getVp($r("app.float.title_button_size")))
    .backgroundColor("#00000000")
    .onClick(() => {
      this.backFunc ? this.backFunc : router.back();
    });

    // 标题内容
    Text(this.title)
      .fontSize(SizeUtil.getFp($r("app.float.title_font_size")))
      .lineHeight(SizeUtil.getVp($r("app.float.title_line_height")))
      .fontColor($r("app.color.grey_divider"))
      .fontWeight(FontWeight.Bold)
      .margin({ left: SizeUtil.getVp($r("app.float.title_margin")) });

    // 占位
    Blank();
    if (this.closeHandle) {
      this.closeHandle();
    }
  }
  .width("100%")
  .height(SizeUtil.getVp($r("app.float.title_height")))
  .padding({
    left: SizeUtil.getVp($r("app.float.title_horizon_margin")),
    right: SizeUtil.getVp($r("app.float.title_horizon_margin"))
  });
}

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.

{
  "name": "title_button_size",
  "value": "24"
},
{
  "name": "title_font_size",
  "value": "20"
},
{
  "name": "title_line_height",
  "value": "28"
},
{
  "name": "title_margin",
  "value": "16"
},
{
  "name": "title_height",
  "value": "56"
},
{
  "name": "title_horizon_margin",
  "value": "24"
}

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.

{
  "name": "grey_divider",
  "value": "#182431"
}

1.
2.
3.
4.
5.