Qt Quick对话框是自Qt 5.1开始逐步增加的功能模块。目前，Qt Quick所能提供的对话框类型有Dialog (封装了标准按钮的通用Qt Quick对话框）、FileDialog (供用户从本地文件系统中选择文件的对话框）、FontDialog (供用户选择字体的对话框)、ColorDialog (供用户选取颜色的对话框）和MessageDialog (显示弹出消息的对话框）。

本节通过一个实例介绍几种Qt Quick对话框的用法，运行效果如下图所示。

单击“选择...”按钮弹出“选择日期”对话框，选择某个日期后单击“Save”按钮，该日期自动填入“日期：”栏；单击“打开...”按钮，从弹出的“打开”对话框中选择某个目录下的文件并打开，该文件名及路径字符串被填入“文件：”栏；单击“字体...”按钮，在弹出的“字体”对话框中可设置文本区内容的字体样式；单击“颜色...”按钮，在弹出的“颜色”对话框中可设置文本区文字的颜色。

实现步骤如下。

(1) 新建项目

用Qt Creator创建Qt Quick Application应用程序，项目名称为“Dialogs”。

(2) 创建主窗口

在项目中添加“MainForm.qml”文件，编写代码如下：

import QtQuick 2.7
import QtQuick.Controls 1.5 //导入 Qt Quick Controls 1.5 库
import QtQuick.Layouts 1.3 //导入Qt Quick布局库
Item { //QML通用的根元素
  width: 320
  height: 280
  /* 定义属性别名，为在main.qml中引用各个控件*/
  property alias date: date // “日期”文本框
  property alias btnSelect: btnSelect // “选择…”按钮
  property alias file: file // “文件”文本框
  property alias btnOpen: btnOpen // “打开…”按钮
  property alias content: content //文本区
  property alias btnFont: btnFont // “字体…”按钮
  property alias btnColor: btnColor // “颜色…”按钮
  ColumnLayout { //列布局
    anchors.centerIn: parent
    RowLayout { //该行提供日期选择功能
      Label { text: "日期：" }
      TextField { id: date }
      Button {
        id: btnSelect
        text: qsTr("选择…")
      }
    }
    RowLayout { //该行提供文件选择功能
      Label { text: "文件：" }
      TextField { id: file }
      Button {
        id: btnOpen
        text: qsTr("打开…")
      }
    }
    TextArea { //文本区
      id: content
      Layout.fillWidth: true //将文本区拉伸至与上两栏等宽
      text:"Qt Quick Controls 编程" //文本内容
      font.pixelSize: 14
    }
    RowLayout { //该行提供字体、颜色选择功能
      Layout.alignment: Qt.AlignRight //右对齐
      Button {
        id: btnFont
        text: qsTr("字体…")
      }
      Button {
        id: btnColor
        text: qsTr("颜色…")
      }
    }
  }
}

(3) 编写主程序

打开“main.qml”文件，修改代码如下:

import QtQuick 2.7
import QtQuick.Controls 1.5 //导入 Qt Quick Controls 1.5 库
import QtQuick.Dialogs 1.2 //导入Qt Quick对话框库
ApplicationWindow { //主应用窗口
  title: qsTr("对话框示例")
  width: 320
  height: 280
  visible: true
  MainForm { //主窗体
    id: main //窗体标识
    anchors.fill: parent
    btnSelect.onClicked: dateDialog.open() //打开“选择日期〃对话框
    btnOpen.onClicked: fileDialog.open() //打开标准文件对话框
    btnFont.onClicked: fontDialog.open() //打开标准字体对话框
    btnColor.onClicked: colorDialog.open() //打开标准颜色对话框
  }
  Dialog { // (a)
    id: dateDialog
    title: "选择日期"
    width: 275
    height: 300
    standardButtons: StandardButton.Save | StandardButton.Cancel //(b)
    onAccepted: main.date.text = calendar.selectedDate.toLocaleDateString() //(c)
    Calendar { //日历控件
      id: calendar
      //双击日历就等同于单击“Save”按钮
      onDoubleClicked: dateDialog.click(StandardButton.Save)
    }
  }
  FileDialog { //文件标准对话框
    id: fileDialog
    title: "打开"
    nameFilters: ["Text files (*.txt)", "Image files (*. jpg *.png)", "All files (*)"] //(d)
    onAccepted: main.file.text = fileDialog.fileUrl //(e)
  }
  FontDialog { //字体标准对话框
    id: fontDialog
    title:"字体"
    font: Qt.font({ family:"宋体",pointSize: 12, weight: Font.Normal }) //初始默认选中的字体
    modality: Qt.WindowModal //(f)
    onAccepted: main.content.font = fontDialog.font //设置字体
  }
  ColorDialog { //颜色标准对话框
    id: colorDialog
    title: "颜色"
    modality: Qt.WindowModal
    onAccepted: main.content.textColor = colorDialog.color //设置文字色彩
  }
}

其中，

• (a) Dialog: 这是Qt 5.3引入的类型，是Qt Quick提供给用户自定义的通用对话框组件。它包含一组为特定平台定制的标准按钮且允许用户往对话窗体中放置任何内容，其默认属性contentltem是用户放置的元素（其中还可包含多层子元素），对话框会自动调整大小以适应这些内容元素和标准按钮，例如：

Dialog {
  …
  contentltem: Rectangle {
    color: "lightskyblue"
    implicitWidth: 400
    implicitHeight: 100
    Text {
      text: "你好，蓝天!"
      color: "navy"
      anchors.centerIn: parent
    }
  }
}

就在对话框中放了一个天蓝色矩形,其中显示文字。本例则放了一个日历控件取代默认的contentltem。

• (b) standardButtons: StandardButton.Save | StandardButton.Cancel:对话框底部有一组标准按钮，每个按钮都有一个特定“角色”决定了它被按下时将发出何种信号。用户可通过设置standardButtons属性为一些常量位标志的逻辑组合来控制所要使用的按钮。这些预定义常量及对应的标准按钮、按钮角色见下图。

• (c) onAccepted: …：onAccepted定义了对话框在接收到accepted()信号时要执行的代码，accepted()信号是当用户按下具有Accept角色的标准按钮（如“OK” “Open” “Save” “Save All” “Retry” “Ignore”）时所发出的信号。
• (d) nameFilters: […]: 文件名过滤器。它由一系列字符串组成，每个字符串可以是一个由空格分隔的过滤器列表，过滤器可包含“?”和通配符。过滤器列表可用“[]”括起来，并附带对每种过滤器提供一个文字描述。例如本例定义的过滤器列表：

["Text files (*.txt)", "Image files (*. jpg *.png)", "All files (*)"]

所对应的界面外观如下：

选择其中相应的列表项即可指定过滤出想要显示的文件类型，但不可过滤掉目录和文件夹。

• (e) onAccepted: main.file.text = fileDialog.fileUrl: 其中的fileUrl是用户所选择文件的路径，该属性只能储存一个特定文件的路径。若要同时存储多个文件路径，可改用fileUrls属性，它能存放用户所选的全部文件路径的列表。另外，可用folder属性指定用户打开文件标准对话框时所在的默认当前文件夹。
• (f) modality: Qt.WindowModal: 设定该对话框为模式对话框。模式对话框是指在得到事件响应之前，阻止用户切换到其他窗体的对话框。本例的“字体”和“颜色”对话框均设为模式对话框，即在用户尚未选择字体和颜色或单击“Cancel”按钮取消之前，是无法切换回主窗体中进行其他操作的。modality属性取值Qt.NonModal为非模式对话框。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！