refactor(basic): 重构确认对话框组件
- 重新设计了确认对话框的布局和样式,增加了关闭按钮和标题 - 优化了对话框的显示和关闭逻辑 - 调整了文本样式和间距 -增加了线性渐变背景
这个提交包含在:
父节点
ab97abedf9
当前提交
0136bb54f9
@ -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('---------')
|
||||
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('#00BE87')
|
||||
.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)
|
||||
.backgroundColor('#F0FFFA')
|
||||
.borderRadius({
|
||||
topLeft: 10,
|
||||
topRight: 10
|
||||
.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%')
|
||||
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)
|
||||
})
|
||||
}
|
||||
.width('66%')
|
||||
.borderRadius(5)
|
||||
.justifyContent(FlexAlign.Start)
|
||||
.constraintSize({
|
||||
minHeight: 194
|
||||
})
|
||||
.linearGradient({
|
||||
// 0点方向顺时针旋转为正向角度,线性渐变起始角度的默认值为180°
|
||||
colors: [
|
||||
[0xE6F6FA, 0], // 颜色断点1的颜色和比重,对应组件在180°方向上的起始位置
|
||||
[0xffffff, 1.0],// 颜色断点2的颜色和比重,对应组件在180°方向上的终点位置
|
||||
]
|
||||
})
|
||||
}.justifyContent(FlexAlign.Start)
|
||||
}
|
||||
|
||||
interface ThrottleInterface {
|
||||
@ -222,11 +286,14 @@ export class ToolsHelper {
|
||||
return true
|
||||
}
|
||||
|
||||
static closeAlertDialog(content: ComponentContent<Object>) {
|
||||
static closeAlertDialog(dialogTag: string) {
|
||||
if (ToolsHelper.mapAlertDialog.get(dialogTag)) {
|
||||
try {
|
||||
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content)
|
||||
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(ToolsHelper.mapAlertDialog.get(dialogTag))
|
||||
} catch (err) {
|
||||
}
|
||||
ToolsHelper.mapAlertDialog.remove(dialogTag)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -236,7 +303,8 @@ 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))
|
||||
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(() => {
|
||||
@ -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 |
正在加载...
在新工单中引用
屏蔽一个用户