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';
class AlertBean {
options: AlertOptions
options: ConfirmOptions
dialogTag: string
constructor(options: AlertOptions, dialogTag: string) {
constructor(options: ConfirmOptions, dialogTag: string) {
this.options = options
this.dialogTag = dialogTag
}
@ -20,6 +20,7 @@ class AlertBean {
export interface Btn {
text?: string | Resource;
color?: string | Resource;
bgColor?: string | Resource;
onClick?: () => void
}
@ -143,24 +144,87 @@ function customDialogBuilder<T>(option: ListOptions<T>, dialogTag: string) {
function alertDialogBuilder(options: AlertBean) {
Column() {
Text('---------')
.fontSize(16)
.fontColor('#00BE87')
Row() {
Image($r('app.media.dialog_confirm_close'))
.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)
.lineHeight(20)
.padding({
left: 19,
right: 19
})
.width('100%')
.height(60)
.backgroundColor('#F0FFFA')
.borderRadius({
topLeft: 10,
topRight: 10
Text(options.options.confirm?.text ?? '确定')
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor(options.options.confirm?.color ?? $r('sys.color.white'))
.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(() => {
if (ToolsHelper.mapAlertDialog.get(options.dialogTag)) {
ToolsHelper.closeAlertDialog(ToolsHelper.mapAlertDialog.get(options.dialogTag))
ToolsHelper.mapAlertDialog.remove(options.dialogTag)
}
options.options.confirm?.onClick && options.options.confirm.onClick()
ToolsHelper.closeAlertDialog(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 {
@ -222,10 +286,13 @@ export class ToolsHelper {
return true
}
static closeAlertDialog(content: ComponentContent<Object>) {
try {
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content)
} catch (err) {
static closeAlertDialog(dialogTag: string) {
if (ToolsHelper.mapAlertDialog.get(dialogTag)) {
try {
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) {
const dialogTag = ToolsHelper.getUuid()
const ui = GlobalContext.getUiContext()
const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder), new AlertBean(options, dialogTag))
ui.getPromptAction().openCustomDialog(c,{
const c = new ComponentContent(ui, wrapBuilder(alertDialogBuilder),
new AlertBean({ title: options.title, msg: options.msg, confirm: options.action }, dialogTag))
ui.getPromptAction().openCustomDialog(c, {
autoCancel: false
}).then(() => {
ToolsHelper.mapAlertDialog.set(dialogTag, c)
@ -269,8 +337,17 @@ export class ToolsHelper {
* 弹出Confirm弹窗
* @param options
*/
static showConfirmDialog(options: ConfirmOptions): Promise<void> {
return new Promise((reject) => {
static showConfirmDialog(options: ConfirmOptions) {
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: 1,
@ -292,14 +369,14 @@ export class ToolsHelper {
}
})
.catch((err: Error) => {
// ToolsHelper.showMessage(err.message)
ToolsHelper.showMessage(err.message)
})
} catch (error) {
reject()
// let message = (error as BusinessError).message
// ToolsHelper.showMessage(message)
let message = (error as BusinessError).message
ToolsHelper.showMessage(message)
}
})
}
public static mapDialog = new HashMap<string, number>()

二进制文件未显示。

之后

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

二进制文件未显示。

之后

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

二进制文件未显示。

之后

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

二进制文件未显示。

之后

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