添加 title bar

app/oh-package.json5

@@ -5,6 +5,8 @@
   "main": "",
   "author": "",
   "license": "",
-  "dependencies": {}
+  "dependencies": {
+    "@devwiki/common_ui": "file:../common_ui"
+  }
 }
 

app/src/main/ets/pages/Index.ets

@@ -1,16 +1,23 @@
+import { TitleBar } from '@devwiki/common_ui/src/main/ets/component/TitleBar';
+import { ComposeTitleBar } from '@ohos.arkui.advanced.ComposeTitleBar';
+import { EditableTitleBar } from '@ohos.arkui.advanced.EditableTitleBar';
+import { SelectTitleBar } from '@ohos.arkui.advanced.SelectTitleBar';
+
 @Entry
 @Component
 struct Index {
   @State message: string = 'Hello World';
 
-  build() {
+  onLeftClicked(event: ClickEvent) {
-    Row() {
+    this.message = "TitleBar LeftClicked";
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
   }
-      .width('100%')
+
+  build() {
+    Column() {
+      TitleBar({onLeftClicked: this.onLeftClicked}).height(48);
+      Divider();
+
+      Text(this.message);
     }
     .height('100%')
   }

build-profile.json5

@@ -2,7 +2,21 @@
   // app的构建配置
   "app": {
     //签名配置
-    "signingConfigs": [],
+    "signingConfigs": [
+      {
+        "name": "default",
+        "type": "HarmonyOS",
+        "material": {
+          "certpath": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.cer",
+          "storePassword": "00000019BC13FA4B887BEC2E080C308036113BCA1D1D4599A04C7DE2FC056D9B3D5BBB3F90A2746AFA",
+          "keyAlias": "debugKey",
+          "keyPassword": "0000001912B1B816E14D7892380189718431BDF3997A14E9462470BCB07EBB257FE32FE777D748DAE3",
+          "profile": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.p7b",
+          "signAlg": "SHA256withECDSA",
+          "storeFile": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.p12"
+        }
+      }
+    ],
     //产品配置
     "products": [
       {

common_ui/Index.ets

@@ -1 +1 @@
-export { add } from "./src/main/ets/utils/Calc"
+export { TitleBar } from './src/main/ets/component/TitleBar'

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>