feat(basic): 实现自定义 AlertDialog 并优化上下文管理- 新增自定义 AlertDialog 功能,提供更灵活的弹窗样式和交互
- 实现全局 UI 上下文管理,支持跨组件弹窗显示 - 优化 SafeView 组件,自动管理 UI 上下文生命周期 - 调整默认弹窗配置,提高用户体验
这个提交包含在:
父节点
ecdec4a9ca
当前提交
ab97abedf9
@ -7,6 +7,7 @@ import { WindowHelper } from './utils/WindowHelper';
|
||||
|
||||
declare namespace globalThis {
|
||||
let _brushEngineContext: common.UIAbilityContext;
|
||||
let _uiUIContext: UIContext[];
|
||||
};
|
||||
|
||||
export class GlobalContext {
|
||||
@ -18,5 +19,17 @@ export class GlobalContext {
|
||||
globalThis._brushEngineContext = context;
|
||||
WindowHelper.windowClass = context.windowStage.getMainWindowSync()
|
||||
}
|
||||
static pushUIContext(context: UIContext): void {
|
||||
if (!globalThis._uiUIContext) {
|
||||
globalThis._uiUIContext = []
|
||||
}
|
||||
globalThis._uiUIContext.push(context);
|
||||
}
|
||||
static popUIContext(): void {
|
||||
globalThis._uiUIContext.splice(globalThis._uiUIContext.length-1,1)
|
||||
}
|
||||
static getUiContext(): UIContext {
|
||||
return globalThis._uiUIContext[globalThis._uiUIContext.length-1];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,18 @@ import { buffer, HashMap, util } from '@kit.ArkTS';
|
||||
import { DeviceInfo } from '../bean/DeviceInfo';
|
||||
import { common } from '@kit.AbilityKit';
|
||||
import { md5_hex } from '../util/md5';
|
||||
import { LogHelper } from '../../../../Index';
|
||||
import { GlobalContext, LogHelper } from '../../../../Index';
|
||||
import { ComponentContent } from '@kit.ArkUI';
|
||||
|
||||
class AlertBean {
|
||||
options: AlertOptions
|
||||
dialogTag: string
|
||||
|
||||
constructor(options: AlertOptions, dialogTag: string) {
|
||||
this.options = options
|
||||
this.dialogTag = dialogTag
|
||||
}
|
||||
}
|
||||
|
||||
export interface Btn {
|
||||
text?: string | Resource;
|
||||
@ -128,6 +139,30 @@ function customDialogBuilder<T>(option: ListOptions<T>, dialogTag: string) {
|
||||
}.justifyContent(FlexAlign.Start)
|
||||
}
|
||||
|
||||
@Builder
|
||||
function alertDialogBuilder(options: AlertBean) {
|
||||
|
||||
Column() {
|
||||
Text('---------')
|
||||
.fontSize(16)
|
||||
.fontColor('#00BE87')
|
||||
.textAlign(TextAlign.Center)
|
||||
.width('100%')
|
||||
.height(60)
|
||||
.backgroundColor('#F0FFFA')
|
||||
.borderRadius({
|
||||
topLeft: 10,
|
||||
topRight: 10
|
||||
})
|
||||
.onClick(() => {
|
||||
if (ToolsHelper.mapAlertDialog.get(options.dialogTag)) {
|
||||
ToolsHelper.closeAlertDialog(ToolsHelper.mapAlertDialog.get(options.dialogTag))
|
||||
ToolsHelper.mapAlertDialog.remove(options.dialogTag)
|
||||
}
|
||||
})
|
||||
}.justifyContent(FlexAlign.Start)
|
||||
}
|
||||
|
||||
interface ThrottleInterface {
|
||||
startTime: number; //调用的时间
|
||||
timeoutNumber: number; //setTimeout的句柄
|
||||
@ -187,31 +222,47 @@ export class ToolsHelper {
|
||||
return true
|
||||
}
|
||||
|
||||
/**kio9
|
||||
static closeAlertDialog(content: ComponentContent<Object>) {
|
||||
try {
|
||||
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content)
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹出Alert弹窗
|
||||
* @param options
|
||||
*/
|
||||
static showAlertDialog(options: AlertOptions) {
|
||||
try {
|
||||
promptAction.showDialog({
|
||||
alignment: DialogAlignment.Center,
|
||||
title: options.title,
|
||||
message: options.msg,
|
||||
buttons: [{
|
||||
text: options.action?.text ?? "确定",
|
||||
color: options.action?.color ?? "#000000",
|
||||
}]
|
||||
})
|
||||
.then(() => {
|
||||
options.action?.onClick && options.action?.onClick()
|
||||
const dialogTag = ToolsHelper.getUuid()
|
||||
const ui = GlobalContext.getUiContext()
|
||||
const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder), new AlertBean(options, dialogTag))
|
||||
ui.getPromptAction().openCustomDialog(c,{
|
||||
autoCancel: false
|
||||
}).then(() => {
|
||||
ToolsHelper.mapAlertDialog.set(dialogTag, c)
|
||||
}).catch(() => {
|
||||
try {
|
||||
promptAction.showDialog({
|
||||
alignment: DialogAlignment.Center,
|
||||
title: options.title,
|
||||
message: options.msg,
|
||||
buttons: [{
|
||||
text: options.action?.text ?? "确定",
|
||||
color: options.action?.color ?? "#000000",
|
||||
}]
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
// ToolsHelper.showMessage(err.message)
|
||||
})
|
||||
} catch (error) {
|
||||
let message = (error as BusinessError).message
|
||||
// ToolsHelper.showMessage(message)
|
||||
}
|
||||
.then(() => {
|
||||
options.action?.onClick && options.action?.onClick()
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
ToolsHelper.showMessage(err.message)
|
||||
})
|
||||
} catch (error) {
|
||||
let message = (error as BusinessError).message
|
||||
ToolsHelper.showMessage(message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@ -252,6 +303,7 @@ export class ToolsHelper {
|
||||
}
|
||||
|
||||
public static mapDialog = new HashMap<string, number>()
|
||||
public static mapAlertDialog = new HashMap<string, ComponentContent<Object>>()
|
||||
|
||||
/**
|
||||
* 弹出List弹窗
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { WindowHelper } from '../utils/WindowHelper';
|
||||
import { inputMethod } from '@kit.IMEKit';
|
||||
import { GlobalContext } from '../ContextConfig';
|
||||
|
||||
export interface TitleBarBtn {
|
||||
text?: string | Resource;
|
||||
@ -47,6 +48,13 @@ export struct SafeView {
|
||||
// 设置导航栏底下标题
|
||||
@Prop bottomTitleText: ResourceStr
|
||||
|
||||
aboutToAppear(): void {
|
||||
GlobalContext.pushUIContext(this.getUIContext())
|
||||
}
|
||||
aboutToDisappear(): void {
|
||||
GlobalContext.popUIContext()
|
||||
}
|
||||
|
||||
@Builder
|
||||
doNothingBuilder() {
|
||||
}
|
||||
|
||||
正在加载...
在新工单中引用
屏蔽一个用户