feat(basic): 实现自定义 AlertDialog 并优化上下文管理- 新增自定义 AlertDialog 功能,提供更灵活的弹窗样式和交互

- 实现全局 UI 上下文管理,支持跨组件弹窗显示
- 优化 SafeView 组件,自动管理 UI 上下文生命周期
- 调整默认弹窗配置,提高用户体验
这个提交包含在:
xuqm 2025-04-10 19:46:57 +08:00
父节点 ecdec4a9ca
当前提交 ab97abedf9
共有 3 个文件被更改,包括 94 次插入21 次删除

查看文件

@ -7,6 +7,7 @@ import { WindowHelper } from './utils/WindowHelper';
declare namespace globalThis { declare namespace globalThis {
let _brushEngineContext: common.UIAbilityContext; let _brushEngineContext: common.UIAbilityContext;
let _uiUIContext: UIContext[];
}; };
export class GlobalContext { export class GlobalContext {
@ -18,5 +19,17 @@ export class GlobalContext {
globalThis._brushEngineContext = context; globalThis._brushEngineContext = context;
WindowHelper.windowClass = context.windowStage.getMainWindowSync() 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 { DeviceInfo } from '../bean/DeviceInfo';
import { common } from '@kit.AbilityKit'; import { common } from '@kit.AbilityKit';
import { md5_hex } from '../util/md5'; 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 { export interface Btn {
text?: string | Resource; text?: string | Resource;
@ -128,6 +139,30 @@ function customDialogBuilder<T>(option: ListOptions<T>, dialogTag: string) {
}.justifyContent(FlexAlign.Start) }.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 { interface ThrottleInterface {
startTime: number; //调用的时间 startTime: number; //调用的时间
timeoutNumber: number; //setTimeout的句柄 timeoutNumber: number; //setTimeout的句柄
@ -187,31 +222,47 @@ export class ToolsHelper {
return true return true
} }
/**kio9 static closeAlertDialog(content: ComponentContent<Object>) {
try {
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content)
} catch (err) {
}
}
/**
* 弹出Alert弹窗 * 弹出Alert弹窗
* @param options * @param options
*/ */
static showAlertDialog(options: AlertOptions) { static showAlertDialog(options: AlertOptions) {
try { const dialogTag = ToolsHelper.getUuid()
promptAction.showDialog({ const ui = GlobalContext.getUiContext()
alignment: DialogAlignment.Center, const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder), new AlertBean(options, dialogTag))
title: options.title, ui.getPromptAction().openCustomDialog(c,{
message: options.msg, autoCancel: false
buttons: [{ }).then(() => {
text: options.action?.text ?? "确定", ToolsHelper.mapAlertDialog.set(dialogTag, c)
color: options.action?.color ?? "#000000", }).catch(() => {
}] try {
}) promptAction.showDialog({
.then(() => { alignment: DialogAlignment.Center,
options.action?.onClick && options.action?.onClick() title: options.title,
message: options.msg,
buttons: [{
text: options.action?.text ?? "确定",
color: options.action?.color ?? "#000000",
}]
}) })
.catch((err: Error) => { .then(() => {
// ToolsHelper.showMessage(err.message) options.action?.onClick && options.action?.onClick()
}) })
} catch (error) { .catch((err: Error) => {
let message = (error as BusinessError).message ToolsHelper.showMessage(err.message)
// ToolsHelper.showMessage(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 mapDialog = new HashMap<string, number>()
public static mapAlertDialog = new HashMap<string, ComponentContent<Object>>()
/** /**
* 弹出List弹窗 * 弹出List弹窗

查看文件

@ -1,5 +1,6 @@
import { WindowHelper } from '../utils/WindowHelper'; import { WindowHelper } from '../utils/WindowHelper';
import { inputMethod } from '@kit.IMEKit'; import { inputMethod } from '@kit.IMEKit';
import { GlobalContext } from '../ContextConfig';
export interface TitleBarBtn { export interface TitleBarBtn {
text?: string | Resource; text?: string | Resource;
@ -47,6 +48,13 @@ export struct SafeView {
// 设置导航栏底下标题 // 设置导航栏底下标题
@Prop bottomTitleText: ResourceStr @Prop bottomTitleText: ResourceStr
aboutToAppear(): void {
GlobalContext.pushUIContext(this.getUIContext())
}
aboutToDisappear(): void {
GlobalContext.popUIContext()
}
@Builder @Builder
doNothingBuilder() { doNothingBuilder() {
} }