【OpenHarmony实战开发】三方库material-dialogs：配置自定义的对话框

最新推荐文章于 2025-09-29 11:23:59 发布

原创

最新推荐文章于 2025-09-29 11:23:59 发布 · 890 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #前端 #安卓 #linux

介绍

Material Dialogs 是一个流畅、可定制的对话框，核心模块包含创建基本、列表、单/多选项、时间、自定义等对话框。

下载安装

ohpm install @ohos/material-dialogs

ohpm 环境配置等更多内容，请如何安装 OpenHarmony ohpm 包。

使用说明

1. 引入文件及代码依赖

import { MaterialDialog } from '@ohos/material-dialogs'

2. 初始化 Model 数据

@State model: MaterialDialog.Model= new MaterialDialog.Model();

3. 初始化对话框控制器

dialogController: CustomDialogController = new CustomDialogController({
builder: MaterialDialog({
 model: this.model
}),
cancel: this.existDialog,
autoCancel: true,
alignment: DialogAlignment.Center
})

4. 调用 Model 对应函数并展示目标对话框

this.model.reset()
this.model.message('xxxx'))
this.model.positiveButton('xxxx'), {
 onClick() {
  console.info('ClickCallback when the confirm button is clicked')
 }
})
this.model.negativeButton('xxxx'), {
 onClick() {
  console.info('ClickCallback when the cancel button is clicked')
 }
})
this.model.setScrollHeight(120)
this.dialogController.open()

优势

相比于 openharmony 系统默认的弹框组件，Material Dialog 三方库还支持单选、多选以及颜色的选择，其中单选和多选还支持搭配列表和按钮一起使用，例如：

通用代码：

//对话框初始化函数
let init =  () => {
//初始化Model数据
@State model: MaterialDialog.Model = new MaterialDialog.Model();
//初始化对话框控制器
dialogAttribute = new DialogAttributeModel()
dialogController: CustomDialogController = new               CustomDialogController({
    builder: MaterialDialog({
      model: this.model, dialogAttribute: this.dialogAttribute
    }),
    cancel: this.existDialog,
    autoCancel: true,
    alignment: DialogAlignment.Center,
    customStyle: true
  })
}

//关闭对话框
existDialog() {
  this.dialogController.close()
}

//设置对话框内容样式
class TextAttributeModel