qml 对话框 ColorDialogs FontDialog FileDialog

颜色选择对话框 ColorDialogs

版本一 QtQuick.Dialogs 从QT5.1开始

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2 //需要导入此控件

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    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"
        }
}

版本二 Qt.labs.platform 从QT5.8开始

• 修改.pro文件
  QT += quick widgets
• 在qml文件导入模块
  import Qt.labs.platform 1.0
• qml的Window改为ApplicationWindow, 其它控件和版本一都一样
• 如果没有，则手动安装Qt.labs.platform
  sudo apt-get install qml-module-qt-labs-platform

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import Qt.labs.platform 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    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

• 属性font保存最终接受的字体，而currentFont保存对话框中当前选择的字体

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import Qt.labs.platform 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: colorDialog.color

    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

• 属性
  acceptLabel : string，保存显示在接受对话框的按钮上的标签文本
  currentFile : url，保存当前选择的文件
  currentFiles : list，保存当前选择的多个文件
  defaultSuffix : string，保留一个后缀，该后缀将添加到未指定后缀的选定文件中
  file : url，保存最终接受的文件
  fileMode : enumeration，保存对话框的模式 1）FileDialog.OpenFile 默认 选择现有文件 2）FileDialog.OpenFiles 选择多个现有文件 3）FileDialog.SaveFile 选择任何文件；此文件不必存在
  files : list,保存最终接受的文件们
  folder : url，保存选择文件的文件夹
  nameFilters : list，包含用于限制可以选择的文件类型的筛选器
  options : flags，包含影响对话框外观的各种选项
  rejectLabel : string，保存显示在拒绝对话框的按钮上的标签文本
  selectedNameFilter

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import Qt.labs.platform 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: colorDialog.color

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