SafeView

src/main/ets/view/SafeView.ets

@@ -1,75 +1,138 @@
-import { WindowHelper } from '../utils/WindowHelper'
-import { inputMethod } from '@kit.IMEKit'
+import { WindowHelper } from '../utils/WindowHelper';
+import { inputMethod } from '@kit.IMEKit';
 
+export interface TitleBarBtn {
+  text?: string | Resource;
+  img?: PixelMap | ResourceStr | DrawableDescriptor;
+  color?: string | Resource;
+  onClick: () => void
+}
 
 @Preview
 @Component
 export struct SafeView {
   @Consume('pageInfos') pageInfos?: NavPathStack
   @Link isLoading: boolean
-  @State _titleText: ResourceStr=''
-  private _onBackEvent?: () => void
+  // 是不是沉浸式
+  @Prop isImmersive: boolean
+  // 设置导航栏标题
+  @Prop titleText: ResourceStr
+  // 设置导航栏背景色
+  @Prop backgroundColorY: ResourceColor
+  // 设置导航栏背景不透明度
+  // 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。
+  @Prop opacitys: number | Resource
+  // 设置返回按钮事件
+  onBackEvent?: () => void = undefined
+  // 设置返回按钮事件
+  onClickLeft?: TitleBarBtn
+  onClickRight?: TitleBarBtn
 
   @Builder
   doNothingBuilder() {
   }
 
-  onBack(event: () => void) {
-    this._onBackEvent = event
-    return this
-  }
-
-  titleText(title: ResourceStr) {
-    this._titleText = title
-    return this
-  }
-
   @BuilderParam customBuilderParam: () => void = this.doNothingBuilder
 
   build() {
     NavDestination() {
       Stack() {
         Column() {
+          this.customBuilderParam()
+        }
+        .padding({
+          top: this.isImmersive ? 0 : WindowHelper.topRectHeight + 44
+        })
+        .align(Alignment.Top)
+        .width('100%')
+        .height('100%')
+
         Row()
           .height(WindowHelper.topRectHeight)
           .width('100%')
-            .backgroundColor('#999999')
+          .backgroundColor(this.backgroundColorY ?? 'white')
+          .opacity(undefined === this.opacitys ? 1 : this.opacitys > 1 ? 1 : this.opacitys < 0 ? 0 : this.opacitys)
+
         Row() {
 
+          Row() {
             Image($r("app.media.base_back"))
               .height(15)
+              .objectFit(ImageFit.Contain)
               .onClick(() => {
-                if (this._onBackEvent) {
-                  this._onBackEvent()
+                if (this.onBackEvent) {
+                  this.onBackEvent()
                 } else if (this.pageInfos) {
                   this.pageInfos.pop()
                 }
               })
+          }.width(110)
 
-            Text(this._titleText ?? '')
+          Text(`${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:${this.titleText}:`)
             .maxLines(1)
             .ellipsisMode(EllipsisMode.CENTER)
             .textOverflow({
               overflow: TextOverflow.Ellipsis
             })
+            .constraintSize({
+              maxWidth: 120
+            })
 
           Row() {
+            if (!this.onClickLeft?.img && this.onClickLeft) {
+              Text(`${this.onClickLeft?.text}` ?? '确定')
+                .fontColor(this.onClickLeft?.color ?? '#17171A')
+                .onClick(() => {
+                  this.onClickLeft?.onClick && this.onClickLeft?.onClick()
+                })
+            }
+            if (this.onClickLeft?.img) {
+              Image(this.onClickLeft.img)
+                .onClick(() => {
+                  this.onClickLeft?.onClick && this.onClickLeft?.onClick()
+                })
+                .objectFit(ImageFit.Contain)
+                .width(20)
+                .height(20)
+            }
+            if (!this.onClickRight?.img && this.onClickRight) {
+              Text(this.onClickRight?.text ?? '确定')
+                .fontColor(this.onClickRight?.color ?? '#17171A')
+                .onClick(() => {
+                  this.onClickRight?.onClick && this.onClickRight?.onClick()
+                })
+                .margin({
+                  left: 10
+                })
+            }
+            if (this.onClickRight?.img) {
+              Image(this.onClickRight.img)
+                .onClick(() => {
+                  this.onClickRight?.onClick && this.onClickRight?.onClick()
+                })
+                .objectFit(ImageFit.Contain)
+                .width(20)
+                .height(20)
+                .margin({
+                  left: 10
+                })
+            }
 
+          }.width(110)
+          .justifyContent(FlexAlign.End)
         }
-          }
+        .backgroundColor(this.backgroundColorY ?? 'white')
+        .opacity(undefined === this.opacitys ? 1 : this.opacitys > 1 ? 1 : this.opacitys < 0 ? 0 : this.opacitys)
         .justifyContent(FlexAlign.SpaceBetween)
+        .height(44)
         .padding({
           left: 15,
           right: 15
         })
-          .height(44)
         .width('100%')
-
-          this.customBuilderParam()
-        }
-        .width('100%')
-        .height('100%')
-        .justifyContent(FlexAlign.Start)
+        .margin({
+          top: WindowHelper.topRectHeight
+        })
 
         Column() {
           LoadingProgress()
@@ -85,11 +148,24 @@ export struct SafeView {
         .backgroundColor('#40000000')
         .justifyContent(FlexAlign.Center)
       }
-    }.onClick(() => {
+      .align(Alignment.Top)
+      .width('100%')
+      .height('100%')
+    }
+    .onClick(() => {
       inputMethod.getController().stopInputSession()
     })
     .hideTitleBar(true)
     .width('100%')
     .height('100%')
+    .backgroundColor('white')
+    .onBackPressed(() => {
+      if (this.onBackEvent) {
+        this.onBackEvent()
+      } else if (this.pageInfos) {
+        this.pageInfos.pop()
+      }
+      return true
+    })
   }
 }