refactor(basic): 重构确认对话框组件
- 重新设计了确认对话框的布局和样式,增加了关闭按钮和标题 - 优化了对话框的显示和关闭逻辑 - 调整了文本样式和间距 -增加了线性渐变背景
这个提交包含在:
父节点
ab97abedf9
当前提交
0136bb54f9
@ -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() {
|
||||||
|
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)
|
.fontSize(16)
|
||||||
.fontColor('#00BE87')
|
.fontColor($r('sys.color.black'))
|
||||||
.textAlign(TextAlign.Center)
|
.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%')
|
.width('100%')
|
||||||
.height(60)
|
.height(60)
|
||||||
.backgroundColor('#F0FFFA')
|
.justifyContent(FlexAlign.SpaceBetween)
|
||||||
.borderRadius({
|
.alignItems(VerticalAlign.Top)
|
||||||
topLeft: 10,
|
.padding(9)
|
||||||
topRight: 10
|
|
||||||
|
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(() => {
|
.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)
|
})
|
||||||
}
|
}
|
||||||
|
.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 {
|
interface ThrottleInterface {
|
||||||
@ -222,11 +286,14 @@ export class ToolsHelper {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
static closeAlertDialog(content: ComponentContent<Object>) {
|
static closeAlertDialog(dialogTag: string) {
|
||||||
|
if (ToolsHelper.mapAlertDialog.get(dialogTag)) {
|
||||||
try {
|
try {
|
||||||
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(content)
|
GlobalContext.getUiContext().getPromptAction().closeCustomDialog(ToolsHelper.mapAlertDialog.get(dialogTag))
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
}
|
}
|
||||||
|
ToolsHelper.mapAlertDialog.remove(dialogTag)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -236,7 +303,8 @@ 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),
|
||||||
|
new AlertBean({ title: options.title, msg: options.msg, confirm: options.action }, dialogTag))
|
||||||
ui.getPromptAction().openCustomDialog(c, {
|
ui.getPromptAction().openCustomDialog(c, {
|
||||||
autoCancel: false
|
autoCancel: false
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
@ -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 |
正在加载...
在新工单中引用
屏蔽一个用户