Roson的Qt之旅＃100 QML四种标准对话框(颜色、字体、文件、提升)

一个完整的应用程序通常需要使用对话框来完成一些交互。有些对话框提供一些通用功能,比如选择文件、选择颜色等。由于这部分对话框对于每个程序都是一样的，QML提供了一系列预定义的对话框,被称为标准对话框。在QML中,使用标准对话框需要导入 Dialogs模块:

import QtQuick. Dialogs 1.1

该模块提供了4种标准对话框:ColorDialog、FileDialog、FontDialog 和 MessageDialog。下面逐个介绍。

颜色对话框

ColorDialog对应着Widgets中的QColorDialog,用于进行颜色选择的对话框。初始状态下,该对话框是不可见的,需要先对其属性进行设置,然后将其visible属性设置为true,或者调用open()函数。
ColorDialog自动作为其父窗口的对话框,因此一般会显示在父窗口的中心。只要平台支持,ColorDialog就会使用平台自身的颜色对话框;否则, ColorDialog 会初始化一个 QColorDialog进行显示。如果连 QColorDialog 都不能初始化,ColorDialog则会显示一个QML 的实现 DefaultColorDialog. qml。在这种情况下,通过编辑DefaultCol-orDialog.qml 即可自定义ColorDialog 的外观。DefaultColorDialog.qml包含了一个用于存放对话框内容的Rectangle组件,这是为了避免某些嵌入式系统不支持多个顶层窗口。当对话框可见时,如果可能, DefaultColorDialog.qml 会被嵌入到一个Win-dow中;如果底层平台只支持一个顶层窗口,在这种情形下,由于主窗口已经是一个顶层窗口,所以颜色对话框不能再成为另外一个顶层窗口,因此，QML选择将其放在主窗口中重新渲染。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2

Window {
    id:window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Button{
        text: qsTr("Open Color Dialog")
        onClicked:colorDialog.open()
    }

    ColorDialog{
        id:colorDialog
        title:qsTr("select color")
        onAccepted: window.color = color //点击ok按钮后执行
        onRejected: console.log("cilcked cancel")  //点击cancle按钮后执行
    }
}

字体选择对话框

FontDialog对应着Widgets中的QFontDialog,用于进行字体选择的对话框，和前面的对话框类型有相似的特性。FontDialog类型中可以在使用open()以前，使用font属性来设置初始的字体,当关闭对话框以后,可以使用 font来获取选择的字体类型。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2

Window {
    id:window
    visible: true
    width: 200
    height: 200
    title: qsTr("Hello World")

    Button{
        text: qsTr("Open Font Dialog")
        onClicked:fontDialog.open()
    }

    FontDialog{
        id:fontDialog
        title:qsTr("select font")
        font:Qt.font({family:"Arial",pointSize:24,weight:Font.Normal})
        onAccepted: console.log("selected font is" + fontDialog.font) //点击ok按钮后执行
        onRejected: console.log("cilcked cancel")  //点击cancle按钮后执行
    }
}

文件选择对话框

FileDialog对应着Widgets中的QFileDialog,用于显示选择文件的对话框。同ColorDialog类似,初始状态下, FileDialog 也是不可见的。使用之前先设置一些相关属性，然后将其visible属性设置为true,或者调用open函数。FileDialog其他特性同样类似ColorDialog,这里不再赘述。

选择的文件或文件列表(选择了多个文件时)的路径可以通过fileUrl或fileUrls来获取,如果要选择多个文件,需要设置selectMultiple属性为true。如果要选择目录而不是文件,可以设置selectFolder为true,然后通过folder属性来获取选择的目录路径。如果在调用open()以前设置了folder属性,那么会打开指定的目录。还可以使用nameFilters来设置文件名过滤器,过滤器中可以使用?和*通配符,每个字符串之间使用空格隔开。

提示消息框

MessageDialog对应着C＋＋中的QMessageBox,用于显示一些提示信息的标准对话框,比如警告、错误等。与QMessageBox提供了很多方便的静态函数不同,这里需要一个个设置MessageDialog的各个属性,以便达到需要的效果。
使用text属性可以设置主要显示的内容,使用detailedText属性可以设置要显示的详细信息。icon属性用来设置对话框的图标，一共有5种:StandardIcon.NoIcon(没有图标)、StandardIcon.Question(问题)、StandardIcon.Information(信息)、StandardIcon.Warning(警告)、StandardIcon. Critical(错误)。使用standardButtons属性可以设置对话框中的按钮。每一个按钮都包含一个ButtonRole,用来决定按钮被按下时发射的信号类型,例如Ok按钮对应的是AcceptRole,那么Ok按钮按下时就应该在onAccepted()信号处理器中进行相应操作;而Help按钮对应的是HelpRole,那么其对应的就是onHelp()信号处理器。

MessageDialog中的标准按钮类型

按钮名称	描述
StandardButton.Ok	使用AcceptRole定义的OK按钮
StandardButton.Open	使用AcceptRole定义的Open按钮
StandardButton.Save	使用AcceptRole定义的Save按钮
StandardButton.Cancel	使用RejectRole定义的Cancel按钮
StandardButton.Close	使用RejectRole定义的 Close按钮
StandardButton.Discard	使用DestructiveRole定义的Discard或Don't Save按钮
StandardButton.Apply	使用ApplyRole定义的 Apply按钮
StandardButton.Reset	使用ResetRole定义的Reset按钮
StandardButton.RestoreDefaults	使用ResetRole定义的Restore Defaults按钮
StandardButton.Help	使用HelpRole定义的Help按钮
StandardButton.SaveAll	使用AcceptRole定义的SaveAll按钮
StandardButton.Yes	使用YesRole定义的Yes按钮
StandardButton.YesToAll	使用YesRole定义的Yes to All按钮
StandardButton.No	使用NoRole定义的No按钮
StandardButton. NoToAll	使用NoRole定义的No to All按钮
StandardButton.Abort	使用RejectRole定义的 Abort按钮
StandardButton.Retry	使用AcceptRole定义的 Retry按钮
StandardButton.Ignore	使用AcceptRole定义的Ignore按钮