鸿蒙开发 添加组件(自定义弹窗 (CustomDialog))

往期推文全新看点(文中附带最新·鸿蒙全栈学习笔记)

1.嵌入式开发适不适合做鸿蒙南向开发?一文带你了解

2.鸿蒙众多岗位需求突增!该如何选择?

3.分享一场鸿蒙开发岗位面试经历~

4.待更新中……

CustomDialog是自定义弹窗,可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

创建自定义弹窗

  1. 使用@CustomDialog装饰器装饰自定义弹窗。
  2. @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })

  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
    }
  }
}

3. 创建构造器,与装饰器呼应相连。

 @Entry
 @Component
 struct CustomDialogUser {
   dialogController: CustomDialogController = new CustomDialogController({
     builder: CustomDialogExample(),
   })
 }

4. 点击与onClick事件绑定的组件使弹窗弹出。

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}


弹窗的交互

弹窗可用于数据交互,完成用户一系列响应操作。1. 在@CustomDialog装饰器内添加按钮,同时添加数据函数。

@CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

2. 页面内需要在构造器内进行接收,同时创建相应的函数操作。

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() },
    }),
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}


3.可通过弹窗中的按钮实现路由跳转,同时获取跳转页面向当前页传入的参数。

// Index.ets
import { router } from '@kit.ArkUI';

@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  controller?: CustomDialogController
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }

  build() {
    Column({ space: 20 }) {
      if (this.textValue != '') {
        Text(`第二个页面的内容为:${this.textValue}`)
          .fontSize(20)
      } else {
        Text('是否获取第二个页面的内容')
          .fontSize(20)
      }
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            if (this.controller != undefined && this.textValue != '') {
              this.controller.close()
            } else if (this.controller != undefined) {
              router.pushUrl({
                url: 'pages/Index2'
              })
              this.controller.close()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.borderRadius(10).padding({ top: 20 })
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => {
        this.onCancel()
      },
      confirm: () => {
        this.onAccept()
      },
      textValue: $textValue
    })
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onPageShow() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      this.dialogController?.open()
      this.textValue = params.info as string; // 获取info属性的值
    }
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}
// Index2.ets
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = '点击返回';
  build() {
    Column() {
      Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold).onClick(() => {
        router.back({
          url: 'pages/Index',
          params: {
            info: 'Hello World'
          }
        });
      })
    }.width('100%').height('100%').margin({ top: 20 })
  }
}


弹窗的动画

弹窗通过定义openAnimation控制弹窗出现动画的持续时间,速度等参数。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}


弹窗的样式

弹窗通过定义宽度、高度、背景色、阴影等参数来控制样式。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 20,
    width: '80%',
    height: '100px',
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性,需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性,需要和borderWidth属性一起使用
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}


嵌套自定义弹窗

通过第一个弹窗打开第二个弹窗时,最好将第二个弹窗定义在第一个弹窗的父组件处,通过父组件传给第一个弹窗的回调来打开第二个弹窗。

@CustomDialog
struct CustomDialogExampleTwo {
  controllerTwo?: CustomDialogController
  @State message: string = "I'm the second dialog box."
  @State showIf: boolean = false;
  build() {
    Column() {
      if (this.showIf) {
        Text("Text")
          .fontSize(30)
          .height(100)
      }
      Text(this.message)
        .fontSize(30)
        .height(100)
      Button("Create Text")
        .onClick(()=>{
          this.showIf = true;
        })
      Button ('Close Second Dialog Box')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
        .margin(20)
    }
  }
}
@CustomDialog
struct CustomDialogExample {
  openSecondBox?: ()=>void
  controller?: CustomDialogController

  build() {
    Column() {
      Button ('Open Second Dialog Box and close this box')
        .onClick(() => {
          this.controller!.close();
          this.openSecondBox!();
        })
        .margin(20)
    }.borderRadius(10)
  }
}
@Entry
@Component
struct CustomDialogUser {
  @State inputValue: string = 'Click Me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      openSecondBox: ()=>{
        if (this.dialogControllerTwo != null) {
          this.dialogControllerTwo.open()
        }
      }
    }),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExampleTwo(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })

  aboutToDisappear() {
    this.dialogController = null
    this.dialogControllerTwo = null
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }
  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}


由于自定义弹窗在状态管理侧有父子关系,如果将第二个弹窗定义在第一个弹窗内,那么当父组件(第一个弹窗)被销毁(关闭)时,子组件(第二个弹窗)内无法再继续创建新的组件。

<think>嗯,用户的问题是关于在鸿蒙系统中通过静态方法打开自定义弹窗的示例代码或教程。首先,我需要确认鸿蒙系统的开发框架和常用的UI组件。记得HarmonyOS主要使用ArkTS作为开发语言,之前是Java和JS,但现在可能更多转向ArkTS了。所以示例代码可能需要用ArkTS来写。 接下来,用户提到静态方法。静态方法通常属于类本身,而不是实例。因此,我需要考虑如何设计一个包含静态方法的工具类,用于显示弹窗。例如,创建一个DialogUtils类,里面有一个静态方法showCustomDialog,这个方法负责创建并显示弹窗。 然后,自定义弹窗的结构。在HarmonyOS中,自定义弹窗可能需要使用CustomDialog组件。需要定义布局,设置内容、按钮等。用户可能需要设置标题、内容文本和两个按钮(确认和取消)。布局文件可能是一个ets文件,或者直接在代码中构建UI。 另外,需要处理按钮的点击事件。确认按钮触发回调,取消按钮关闭弹窗。这里要注意,回调函数可能需要通过参数传入,以便用户自定义处理逻辑。 然后,整合静态方法。DialogUtils的showCustomDialog方法需要接收上下文(context)、标题、内容和回调函数作为参数。在方法内部,创建CustomDialog实例,设置布局,绑定按钮事件。这里要注意,HarmonyOS的上下文获取方式,比如在Ability或UI组件中如何获取context。 可能还需要考虑弹窗的样式和自定义属性,比如宽度、高度、圆角等。这些可以通过CustomDialog的构造函数或属性设置来实现。例如,使用CustomDialogController来管理弹窗的显示和隐藏,但用户要求的是静态方法,可能需要直接实例化CustomDialog。 然后,示例代码的结构。首先展示工具类DialogUtils,然后是如何在页面中调用这个静态方法。按钮的onClick事件触发DialogUtils.showCustomDialog,并传递必要的参数。 还要检查是否有官方文档或示例代码支持这种用法。例如,HarmonyOS开发者文档中关于CustomDialog的部分,是否有静态方法调用的示例。如果没有,可能需要根据组件用法推断出正确的代码结构。 用户可能的疑问点包括:如何获取context,如何定义自定义布局,如何处理回调函数,以及静态方法是否正确使用。需要确保示例代码中的context来源正确,比如在Ability中可以使用this.context,或者在UI组件中通过getContext()获取。 另外,需要确认ArkTS的语法是否正确,比如组件的构建方式,装饰器的使用(@Component,@Entry),以及事件绑定的语法。例如,按钮的onClick事件应该用箭头函数还是普通函数,是否需要绑定this。 可能还需要提到一些优化或注意事项,比如避免内存泄漏,确保弹窗在不需要时及时销毁,或者处理屏幕旋转等配置变化时的弹窗状态。 最后,生成相关问题,帮助用户进一步学习,比如如何传递参数到弹窗,如何自定义样式,或者处理弹窗生命周期的问题。这些问题应该围绕用户的需求展开,帮助他们深入理解弹窗的实现和优化。</think>在鸿onyOS中通过静态方法打开自定义弹窗,需要结合ArkUI框架的组件自定义弹窗实现。以下是关键实现步骤和示例代码: ### 一、自定义弹窗实现 1. 定义自定义弹窗类继承`CustomDialog`: ```typescript // CustomDialogExample.ets @CustomDialog struct CustomDialogExample { controller: CustomDialogController title: string content: string onConfirm: () => void build() { Column() { Text(this.title) .fontSize(20) .margin(10) Text(this.content) .fontSize(16) .margin(10) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('确认') .onClick(() => { this.onConfirm() this.controller.close() }) Button('取消') .onClick(() => { this.controller.close() }) }.margin(10) } .padding(20) .width('80%') } } ``` ### 二、静态方法封装 2. 创建工具类`DialogUtils`: ```typescript // DialogUtils.ets export class DialogUtils { static showCustomDialog( context: common.UIAbilityContext, title: string, content: string, confirmCallback: () => void ) { const dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ title: title, content: content, onConfirm: confirmCallback }), cancel: () => {}, autoCancel: true }, context) dialogController.open() } } ``` ### 三、调用示例 3. 在页面组件中调用: ```typescript // Index.ets @Entry @Component struct Index { build() { Column() { Button('打开弹窗') .onClick(() => { DialogUtils.showCustomDialog( getContext() as common.UIAbilityContext, '提示', '确认执行此操作吗?', () => { console.log('用户点击了确认') } ) }) } } } ``` **关键点说明**: 1. `CustomDialogController`需要绑定UIAbility上下文实现生命周期管理[^3] 2. 静态方法通过工具类封装实现代码复用 3. 通过@CustomDialog装饰器声明自定义弹窗组件 4. 弹窗尺寸建议使用百分比布局适配不同设备[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值