QML_对话框弹框

QML_对话框弹框

为了方便开发人员的使用，对于一些特定功能的对话框Qt做了封装，提供了一套标准的通用对话框。在QML中，我们需要导入相关的模块。下面我们将介绍几种常用的对话框。

颜色选择对话框ColorDialog
属性：
color : 用户选择的颜色
currentColor : 用户当前选择的颜色
modality : 对话框应相对于包含对话框的父项的窗口是模态显示，还是相对于整个应用程序模态显示，还是非模态显示
showAlphaChannel : bool，对话框是否将提供更改不透明度的方法
title : string，对话框窗口的标题
visible : bool，保存对话框是否可见
方法：
void close()，关闭对话框
void open()，显示对话框

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"
    }
}

字体选择对话框
FontDialog类型提供了原生平台字体对话框的一个QML API,要显示字体对话框，请构造FontDialog的实例，设置所需的属性，然后调用open()。它的属性font保存最终接受的字体，而currentFont保存对话框中当前选择的字体

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.3
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ColorDialog")

    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)
        }
    }
}

文件对话框
FileDialog类型为本地平台文件对话框提供了QML API，FileDialog的属性如下：
acceptLabel : string，保存显示在接受对话框的按钮上的标签文本
currentFile : url，保存当前选择的文件
currentFiles : list，保存当前选择的多个文件
defaultSuffix : string，保留一个后缀，该后缀将添加到未指定后缀的选定文件中
file : url，保存最终接受的文件
fileMode : enumeration，保存对话框的模式
files : list,保存最终接受的文件们
folder : url，保存选择文件的文件夹
nameFilters : list，包含用于限制可以选择的文件类型的筛选器
options : flags，包含影响对话框外观的各种选项
rejectLabel : string，保存显示在拒绝对话框的按钮上的标签文本
selectedNameFilter

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.3
import QtQuick.Controls 2.3
import Qt.labs.platform 1.1  //必须要包含的

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ColorDialog")

    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)
        }
    }
}