refactor(basic): 重构确认对话框组件

- 重新设计了确认对话框的布局和样式,增加了关闭按钮和标题
- 优化了对话框的显示和关闭逻辑
- 调整了文本样式和间距
-增加了线性渐变背景
这个提交包含在:
徐勤民 2025-04-11 11:10:48 +08:00
父节点 ab97abedf9
当前提交 0136bb54f9
共有 5 个文件被更改,包括 104 次插入27 次删除

查看文件

@ -8,10 +8,10 @@ import { GlobalContext, LogHelper } from '../../../../Index';
import { ComponentContent } from '@kit.ArkUI'; import { ComponentContent } from '@kit.ArkUI';
class AlertBean { class AlertBean {
options: AlertOptions options: ConfirmOptions
dialogTag: string dialogTag: string
constructor(options: AlertOptions, dialogTag: string) { constructor(options: ConfirmOptions, dialogTag: string) {
this.options = options this.options = options
this.dialogTag = dialogTag this.dialogTag = dialogTag
} }
@ -20,6 +20,7 @@ class AlertBean {
export interface Btn { export interface Btn {
text?: string | Resource; text?: string | Resource;
color?: string | Resource; color?: string | Resource;
bgColor?: string | Resource;
onClick?: () => void onClick?: () => void
} }
@ -143,24 +144,87 @@ function customDialogBuilder<T>(option: ListOptions<T>, dialogTag: string) {
function alertDialogBuilder(options: AlertBean) { function alertDialogBuilder(options: AlertBean) {
Column() { Column() {
Text('---------') Row() {
.fontSize(16) Image($r('app.media.dialog_confirm_close'))
.fontColor('#00BE87') .width(17)
.height(17)
.visibility(options.options.cancel ? Visibility.Hidden : Visibility.None)
Text(options.options.title ?? '提示')
.fontSize(16)
.fontColor($r('sys.color.black'))
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height('100%')
.fontWeight(FontWeight.Bold)
.maxLines(1)
.padding({
left: 20,
right: 20
})
.ellipsisMode(EllipsisMode.CENTER)
.textOverflow({
overflow: TextOverflow.Ellipsis
})
Image($r('app.media.dialog_confirm_close'))
.width(17)
.height(17)
.visibility(options.options.cancel ? Visibility.Visible : Visibility.None)
.onClick(() => {
options.options.cancel?.onClick && options.options.cancel.onClick()
ToolsHelper.closeAlertDialog(options.dialogTag)
})
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Top)
.padding(9)
Text(options.options.msg)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor($r('sys.color.black'))
.textAlign(TextAlign.Center) .textAlign(TextAlign.Center)
.lineHeight(20)
.padding({
left: 19,
right: 19
})
.width('100%') .width('100%')
.height(60) Text(options.options.confirm?.text ?? '确定')
.backgroundColor('#F0FFFA') .fontSize(14)
.borderRadius({ .fontWeight(FontWeight.Medium)
topLeft: 10, .fontColor(options.options.confirm?.color ?? $r('sys.color.white'))
topRight: 10 .textAlign(TextAlign.Center)
.margin({
top: 40,
bottom: 40,
left: 18,
right: 18
}) })
.width(215)
.backgroundColor(options.options.confirm?.bgColor ?? '#0E84FA')
.borderRadius(5)
.height(34)
.onClick(() => { .onClick(() => {
if (ToolsHelper.mapAlertDialog.get(options.dialogTag)) { options.options.confirm?.onClick && options.options.confirm.onClick()
ToolsHelper.closeAlertDialog(ToolsHelper.mapAlertDialog.get(options.dialogTag)) ToolsHelper.closeAlertDialog(options.dialogTag)
ToolsHelper.mapAlertDialog.remove(options.dialogTag)
}
}) })
}.justifyContent(FlexAlign.Start) }
.width('66%')
.borderRadius(5)
.justifyContent(FlexAlign.Start)
.constraintSize({
minHeight: 194
})
.linearGradient({
// 0点方向顺时针旋转为正向角度,线性渐变起始角度的默认值为180°
colors: [
[0xE6F6FA, 0], // 颜色断点1的颜色和比重,对应组件在180°方向上的起始位置
[0xffffff, 1.0],// 颜色断点2的颜色和比重,对应组件在180°方向上的终点位置
]
})
} }
interface ThrottleInterface { interface ThrottleInterface {
@ -222,10 +286,13 @@ export class ToolsHelper {
return true return true
} }
static closeAlertDialog(content: ComponentContent<Object>) { static closeAlertDialog(dialogTag: string) {
try { if (ToolsHelper.mapAlertDialog.get(dialogTag)) {
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content) try {
} catch (err) { GlobalContext.getUiContext().getPromptAction().closeCustomDialog(ToolsHelper.mapAlertDialog.get(dialogTag))
} catch (err) {
}
ToolsHelper.mapAlertDialog.remove(dialogTag)
} }
} }
@ -236,8 +303,9 @@ export class ToolsHelper {
static showAlertDialog(options: AlertOptions) { static showAlertDialog(options: AlertOptions) {
const dialogTag = ToolsHelper.getUuid() const dialogTag = ToolsHelper.getUuid()
const ui = GlobalContext.getUiContext() const ui = GlobalContext.getUiContext()
const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder), new AlertBean(options, dialogTag)) const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder),
ui.getPromptAction().openCustomDialog(c,{ new AlertBean({ title: options.title, msg: options.msg, confirm: options.action }, dialogTag))
ui.getPromptAction().openCustomDialog(c, {
autoCancel: false autoCancel: false
}).then(() => { }).then(() => {
ToolsHelper.mapAlertDialog.set(dialogTag, c) ToolsHelper.mapAlertDialog.set(dialogTag, c)
@ -269,8 +337,17 @@ export class ToolsHelper {
* 弹出Confirm弹窗 * 弹出Confirm弹窗
* @param options * @param options
*/ */
static showConfirmDialog(options: ConfirmOptions): Promise<void> { static showConfirmDialog(options: ConfirmOptions) {
return new Promise((reject) => {
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 { try {
promptAction.showDialog({ promptAction.showDialog({
alignment: 1, alignment: 1,
@ -292,14 +369,14 @@ export class ToolsHelper {
} }
}) })
.catch((err: Error) => { .catch((err: Error) => {
// ToolsHelper.showMessage(err.message) ToolsHelper.showMessage(err.message)
}) })
} catch (error) { } catch (error) {
reject() let message = (error as BusinessError).message
// let message = (error as BusinessError).message ToolsHelper.showMessage(message)
// ToolsHelper.showMessage(message)
} }
}) })
} }
public static mapDialog = new HashMap<string, number>() public static mapDialog = new HashMap<string, number>()

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 592 B

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 1.4 KiB

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 2.5 KiB

二进制文件未显示。

之后

宽度:  |  高度:  |  大小: 2.7 KiB