OpenHarmony开发者论坛

标题: 【开源三方库】material-dialogs：配置自定义的对话框 [打印本页]

---

作者: lgrong    时间: 2024-4-22 17:10
标题: 【开源三方库】material-dialogs：配置自定义的对话框
[md]## 介绍

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

## 下载安装

```
ohpm install @ohos/material-dialogs
```

ohpm环境配置等更多内容，请[如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tp ... armony_har_usage.md) 。

## 使用说明

#### 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 {
  fontSize: number | string | Resource = 16
  fontColor: ResourceColor = "#000000"
  fontWeight: number | FontWeight | string = 400
  maxLines: number = -1
  backgroundColor: ResourceColor = ''
}
getMessageAttribute(): TextAttributeModel {
    let messageAttribute = new TextAttributeModel()
    messageAttribute.fontColor = "#666666"
    messageAttribute.fontSize = 16
    return messageAttribute
}

//设置对话框标题样式
class TextAttributeModel {
  fontSize: number | string | Resource = 16
  fontColor: ResourceColor = "#000000"
  fontWeight: number | FontWeight | string = 400
  maxLines: number = -1
  backgroundColor: ResourceColor = ''
}

getTitleAttribute(): TextAttributeModel {
    let titleAttribute = new TextAttributeModel()
    titleAttribute.fontSize = 20
    return titleAttribute
}
```

###### 对话框搭配单选项使用

```
//监听选择的选项
class SingleChoiceListener1 implements SingleChoiceListener {
  onSelected(value: string, index: number) {
    prompt.showToast({ message: "Selected item " + value + " at index " + index })
  }
}
function singleChoiceListener(): SingleChoiceListener {
let back: SingleChoiceListener = new SingleChoiceListener1()
  return back
}

//初始化对话框
init()

//初始化数据
private items: string[] = ['Twitter', 'Ohos', 'Instagram', 'Facebook']

//打开对话框
private showSingleChoiceDialog() {
    this.model.reset()
    //设置标题
    this.model.title('xxxx')
    //设置单选列表以及监听函数
    this.model.listItemsSingleChoice(this.items, 1, true, null, -1, -1, singleChoiceListener())
    this.model.setStacked(false)
    this.dialogController.open()
  }
  
Text("SINGLE CHOICE")
   .onClick(() => {
     this.showSingleChoiceDialog()
   })
```

效果图：


###### 对话框搭配多选项使用

```
//监听选择的选项
class MultiChoiceListener1 implements MultiChoiceListener {
  onSelected(indices: number[], items: string[]) {
    prompt.showToast({ message: "Selected item " + items.toString() + " at index " + indices.toString() })
  }
}

function multiChoiceListener(): MultiChoiceListener {
  let back: MultiChoiceListener = new MultiChoiceListener1()
  return back
}

//初始化对话框
init()

//初始化数据
private items: string[] = ['Twitter', 'Ohos', 'Instagram',         'Facebook']

//打开对话框
private showMultipleChoiceDialog() {
    this.model.reset()
    //设置标题
    this.model.title('xxxx', this.getTitleAttribute())
    //设置多选框列表以及监听函数
    this.model.listItemsMultiChoice(this.items, null, [1, 3], true, false, multiChoiceListener())
    this.model.setStacked(false)
    this.dialogController.open()
  }  
  
Text("MULTIPLE CHOICE")
   .onClick(() => {
     this.showMultipleChoiceDialog()
   })

```

效果图：


###### 对话框搭配颜色选择器使用

```
//监听选择回调
class ColorCallback1 implements ColorCallback {
  onSelected(color: string) {
    console.info('onSelected color is ' + color)
    prompt.showToast({ message: "Selected color: " + color })
  }
}
function colorCallback(): ColorCallback {
  let back: ColorCallback = new ColorCallback1()
  return back
}}

//确定/取消监听回调
class ClickCallback1 implements ClickCallback {
  value1: string = ''
  type: number = 0
  onClick(value?: string) {
    if(this.type === 0) {
      console.info(this.value1)
    }else if(this.type === 1) {
      console.info('ClickCallback when the confirm button is clicked')
      prompt.showToast({ message: this.value1 })
    }else if(this.type === 2) {
      prompt.showToast({ message: this.value1 })
    }else {
      console.info('ClickCallback when the confirm button is clicked')
      prompt.showToast({ message: this.value1 + value })
    }
  }
  constructor(value: string, type: number){
    this.value1 = value
    this.type = type
  }
}
function Callback(value1: string, type: number): ClickCallback {
  let back: ClickCallback = new ClickCallback1(value1, type)
  return back
}

function Callback(value1: string, type: number): ClickCallback {
  let back: ClickCallback = new ClickCallback1(value1, type)
  return back
}

//初始化对话框
init()

//打开对话框
private showColorPrimaryDialog() {
    this.model.reset()
    this.model.title($r('xxxx'), this.getTitleAttribute())
    this.model.colorChooser(ColorPalette.primary, ColorPalette.primarySub, -1, true, false, false, false, colorCallback())
    this.model.positiveButton("xxxx", Callback('ClickCallback when the confirm button is clicked', 0))
    this.model.negativeButton("xxxx", Callback('ClickCallback when the negative button is clicked', 0))
    this.model.setScrollHeight(400)
    this.model.setStacked(false)
    this.dialogController.open()
  }  
  
Text("COLOR CHOOSER, PRIMARY")
   .onClick(() => {
      this.showColorPrimaryDialog()
   })
```

效果图：


## 接口说明

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

| 属性                           | 释义               |
| ------------------------------ | ------------------ |
| model.icon()                   | 显示图标           |
| model.title()                  | 显示标题           |
| model.message()                | 显示描述信息       |
| model.positiveButton()         | 显示确定按钮       |
| model.negativeButton()         | 显示取消按钮       |
| model.neutralButton()          | 显示中立按钮       |
| model.setStacked()             | 按钮是否堆叠显示   |
| model.checkBoxPrompt()         | 显示复选框         |
| model.setActionButtonEnabled() | 设置按钮是否可用   |
| model.listItems()              | 显示列表内容       |
| model.listItemsSingleChoice()  | 显示单选列表内容   |
| model.listItemsMultiChoice()   | 显示多选列表内容   |
| model.input()                  | 显示输入框         |
| model.colorChooser()           | 显示颜色选择器     |
| model.dateTimePicker()         | 显示日期时间选择器 |

## 源码链接

以上就是material-dialogs的一些基本介绍，如果您对 material-dialogs 的源代码感兴趣，可以在以下链接找到它的源码：[源码地址链接](https://gitee.com/openharmony-sig/material-dialogs)，请随时查阅这些资源，以获取关于 material-dialogs 的更多信息和详细说明。
[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5