前言为了方便开发人员的使用，对于一些特定功能的对话框Qt做了封装，提供了一套标准的通用对话框。在QML中，我们需要导入相关的模块。下面我们将介绍几种常用的对话框。颜色选择对话框第一种是颜色选择对话框——ColorDialog，其实，随着Qt自身的发展，像这种对话框的使用方法也在随之改变，以ColorDialog为例，我们来学习一下它的变迁史。QtQuick.Dialogs版本自Qt5.1开始，我们想要调用ColorDialog，需要导入QtQuick.Dialogs模块。ColorDialog允许用户选择一种颜色，该对话框最初是不可见的，需要设置属性visible设置为true或者是调用open()。它的属性也很简单。
方法
我们通过一个例程来学习一下它的使用，之前在Button的学习中我们通过信号和槽改变窗体颜色。现在我们通过一个颜色选择对话框来实现。 import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Controls 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("ColorDialog")
color: colorDialog.color
Button{
text: qsTr("选择颜色")
height: 48
width: 120
anchors.centerIn: parent
MouseArea{
anchors.fill: parent
onClicked: {
colorDialog.open();
}
}
}
ColorDialog {
id: colorDialog
title: qsTr("选择颜色")
color: "#AAAAAA"
}
}定义一个选择颜色按钮和鼠标事件MouseArea，当点击按键时，会使colorDialog打开。定义colorDialog的颜色为"#AAAAAA"，而整个窗体的颜色设置为ColorDialog的颜色。这样，就可以实现点击按钮选择颜色后窗体的颜色随之改变。运行看一下效果，注意，这里可能会由于Qt版本的不同，导致ColorDialog对话框显示不完整。 比如Qt5.14的效果可能如下图所示：
大家可以换一个低版本，重新运行一下，正常的运行结果如下图：
Qt.labs.platform版本但是，随着Qt5.8的出现，我们有了新的模块,它就是Qt.labs.platform。通过导入这个模块，我们就可以ColorDialog了，ColorDialog类型为本地平台颜色对话框提供了QML API。要想显示颜色对话框，需要构造ColorDialog的实例，设置需要的属性，然后调用open()。 注意，要想使用来自Qt Labs Platform模块的类型的应用程序应链接到QtWidgets并使用QApplication而不是QGuiApplication。所以我们需要修改.pro文件。 QT += quick widgets 创建实例的QApplication在main()内。 #include <QApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}然后打开qml文件，导入import Qt.labs.platform 1.0模块，将Window修改为ApplicationWindow，其他的控件的使用都和之前一样就可以，我们运行下程序看看效果。
如果出现找不到Qt.labs.platform模块，则需要我们手动进行安装。命令行中输入 sudo apt-get install qml-module-qt-labs-platform 这个大家可以回看第二章教程，我们尽量还是和Qt一起进步，所以后面的其他对话框我们也都采用这个版本。 字体选择对话框FontDialog类型提供了原生平台字体对话框的一个QML API,要显示字体对话框，请构造FontDialog的实例，设置所需的属性，然后调用open()。它的属性font保存最终接受的字体，而currentFont保存对话框中当前选择的字体。Column{
anchors.centerIn: parent
spacing: 100
Text{
id: text
font: fontDialog.font
text: "Hello World"
}
Button{
text: qsTr("选择字体")
height: 48
width: 120
MouseArea{
anchors.fill: parent
onClicked: {
fontDialog.open();
}
}
}
}
FontDialog{
id: fontDialog
font.pixelSize: 25
onAccepted: {
console.debug(qsTr("选择的字体名称是: ") + fontDialog.currentFont.family)
console.debug(qsTr("选择的字体大小是: ") + fontDialog.currentFont.pointSize)
}
}我们定义了两个控件，一个Text和一个Button，当点击按钮时，会打开字体选择对话框，当我们选择完毕后，会触发accepted()信号来获得最终选择，打印出当亲对话框中选择的字体属性。并且将font属性设置给Text,实现字体选择的变化。
文件对话框FileDialog类型为本地平台文件对话框提供了QML API，FileDialog的属性如下：
可用值：
详细信息参考链接 我们还是给大家一个小例程： Button{
text: qsTr("打开文件")
height: 48
width: 120
anchors.centerIn: parent
MouseArea{
anchors.fill: parent
onClicked: {
fileDialog.open()
}
}
}
FileDialog {
id: fileDialog
fileMode: FileDialog.OpenFile
nameFilters: ["图像文件 (*.png *.jpg *.gif *.bmp)", "全部文件 (*.*)"]
options :FileDialog.ReadOnly
onAccepted: {
console.log(fileDialog.currentFile)
}
}还是熟悉的按钮，打开文件，设置fileMode为选择现有的文件。设置nameFilters为图像文件，最后设置一下options为ReadOnly，指示该对话框不允许创建目录。当选择结束时，打印选择的文件路径。
总结源码：20.zip |
