【开源三方库】material-dialogs：配置自定义的对话框

介绍

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 {
  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 的源代码感兴趣，可以在以下链接找到它的源码：源码地址链接，请随时查阅这些资源，以获取关于 material-dialogs 的更多信息和详细说明。