添加 title bar

common_ui/src/main/ets/component/ComponentConst.ets

@@ -0,0 +1,4 @@
+
+export class  ComponentConst {
+  public static readonly ContainerId: string = "__container__";
+}

common_ui/src/main/ets/component/TitleBar.ets

@@ -0,0 +1,83 @@
+import { ComponentConst } from './ComponentConst'
+
+
+@Preview
+@Component
+export struct TitleBar {
+
+  @State barHeight: number = 48;
+  @State menuPadding: number = 8;
+
+  @State leftText: ResourceStr = "Back";
+  @State leftTextVisible: Visibility = Visibility.Hidden;
+  @State leftIconVisible: Visibility = Visibility.Visible;
+
+  @State rightText: ResourceStr = "Menu";
+  @State rightTextVisible: Visibility = Visibility.Hidden;
+  @State rightIconVisible: Visibility = Visibility.Hidden;
+
+  @State title: ResourceStr = "Title";
+  @State titleTextAlign: TextAlign = TextAlign.Start;
+  @State titleVisible: Visibility = Visibility.Visible;
+
+  onLeftClicked?: Function;
+  onRightClicked?: Function;
+
+  build() {
+    Row() {
+      RelativeContainer() {
+        Button() {
+          Stack() {
+            Text(this.leftText).textAlign(TextAlign.Center)
+              .width(this.barHeight).height(this.barHeight).textAlign(TextAlign.Center)
+              .visibility(this.leftTextVisible)
+            Image($r("app.media.ic_chevron_left"))
+              .width(this.barHeight).height(this.barHeight).padding(this.menuPadding)
+              .visibility(this.leftIconVisible)
+          }
+        }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true)
+        .onClick((event) => {
+          this.onLeftClicked?.(event);
+        }).alignRules({
+          top: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Top},
+          left: {anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start},
+          bottom: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+        })
+        .id("left_menu")
+
+        Text(this.title).visibility(this.titleVisible).textAlign(this.titleTextAlign).margin({left: this.menuPadding})
+          .alignRules({
+            top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top},
+            left: { anchor: "left_menu", align: HorizontalAlign.End},
+            right: { anchor: "right_menu", align: HorizontalAlign.Start},
+            bottom: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+          }).id("center_row")
+
+        Stack(){
+          Button() {
+            Image($r("app.media.ic_close"))
+              .width(this.barHeight).height(this.barHeight)
+              .padding(this.menuPadding)
+          }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true).visibility(this.rightIconVisible)
+          .onClick((event) => {
+            this.onRightClicked?.(event);
+          });
+
+          Button() {
+            Text(this.rightText).textAlign(TextAlign.Center)
+              .width(this.barHeight).height(this.barHeight).textAlign(TextAlign.Center)
+          }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true).visibility(this.rightTextVisible)
+          .onClick((event) => {
+            this.onRightClicked?.(event);
+          });
+        }.alignRules({
+          top: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Top},
+          right: {anchor: ComponentConst.ContainerId, align: HorizontalAlign.End},
+          bottom: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+        })
+        .id("right_menu")
+      }
+      .width('100%').height('100%')
+    }.height(this.barHeight)
+  }
+}

common_ui/src/main/resources/base/media/ic_chevron_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>chevron-left</title><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg>

common_ui/src/main/resources/base/media/ic_close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>close</title><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>