diff --git a/src/main/ets/view/SafeView.ets b/src/main/ets/view/SafeView.ets index 02e0779..69b4df6 100644 --- a/src/main/ets/view/SafeView.ets +++ b/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() { - Row() - .height(WindowHelper.topRectHeight) - .width('100%') - .backgroundColor('#999999') - Row() { + this.customBuilderParam() + } + .padding({ + top: this.isImmersive ? 0 : WindowHelper.topRectHeight + 44 + }) + .align(Alignment.Top) + .width('100%') + .height('100%') + Row() + .height(WindowHelper.topRectHeight) + .width('100%') + .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 ?? '') - .maxLines(1) - .ellipsisMode(EllipsisMode.CENTER) - .textOverflow({ - overflow: TextOverflow.Ellipsis - }) - - Row() { + 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 + }) } - } - .justifyContent(FlexAlign.SpaceBetween) - .padding({ - left: 15, - right: 15 - }) - .height(44) - .width('100%') - this.customBuilderParam() + }.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 + }) .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 + }) } } \ No newline at end of file