瀏覽代碼

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

- 重新设计了确认对话框的布局和样式,增加了关闭按钮和标题
- 优化了对话框的显示和关闭逻辑
- 调整了文本样式和间距
-增加了线性渐变背景
徐勤民 1 周之前
父節點
當前提交
0136bb54f9

+ 104 - 27
src/main/ets/utils/ToolsHelper.ets

@@ -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>()

二進制
src/main/resources/mdpi/media/dialog_confirm_close.png


二進制
src/main/resources/xldpi/media/dialog_confirm_close.png


二進制
src/main/resources/xxldpi/media/dialog_confirm_close.png


二進制
src/main/resources/xxxldpi/media/dialog_confirm_close.png