资源文件

entry/src/main/ets/view/title/TitleBar.ets

+import router from '@ohos.router';
+@Component
+export struct TitleBar {
+  // 左边图标是否显示
+  private isShowLeft = true
+  // 左边图标
+  private leftIcon = $rawfile("icons/back_white.png")
+  // 左边点击事件，默认返回上一页
+  private leftClickEvent = () => {
+    router.back()
+  }
+  // 标题
+  private title = '标题'
+  // 右边图标是否显示
+  private isShowRight = false
+  // 右边图标
+  private rightIcon = $r('app.media.icon')
+  // 左边点击事件
+  private rightClickEvent: () => void
+
+  build() {
+    Column() {
+      Stack() {
+        Text(this.title).fontSize(20).fontColor('#ffffff')
+        Row() {
+          if (this.isShowLeft) {
+            Image(this.leftIcon).size({ width: 55, height: 55 }).padding(15)
+              .onClick(() => this.leftClickEvent())
+          }
+          Blank()
+          if (this.isShowRight) {
+            Image(this.rightIcon).size({ width: 55, height: 55 }).padding(15)
+              .onClick(this.rightClickEvent)
+          }
+        }.width('100%')
+      }.width('100%').height(0).layoutWeight(1)
+      .backgroundColor($r("app.color.title_background"))
+      Divider().color('#4c9a6b')
+    }.width('100%').height(55)
+  }
+}
\ No newline at end of file