QML对话框控件

ColorDialog

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select color"
            onClicked: {
                colorid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        ColorDialog{
            id:colorid
            title: "select color"
            onAccepted: {
                console.log("accept = ",colorid.color);
                rectid.color = colorid.color;
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

FileDialog

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3

ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select file"
            onClicked: {
                fileid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        FileDialog{
            id:fileid
            title: "select file"
            nameFilters: ["*.*","*.txt"]
            // fileMode: FileDialog.ExistingFile
            // 选中单个文件触发

            onAccepted: {
                console.log("accept = ",fileid.fileUrl );
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

FolderDialog

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select file"
            onClicked: {
                folderid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        FolderDialog{
            id:folderid
            title: "select file"
            // currentFolder: folderid.currentFolder

            onAccepted: {
                console.log("accept = ",folderid.folder );
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

FontDialog

注意：使用这个需要使用QApplication，并且需要链接动态库。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select file"
            onClicked: {
                folderid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        FontDialog{
            id:folderid
            title: "select file"

            onAccepted: {
                console.log("accept = ",folderid.currentFont );
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

MessageDialog

我这里就一个按钮

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1
ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select file"
            onClicked: {
                messageid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        MessageDialog{
            id:messageid
            title: "dialog"
            text: "这是一个对话框"
            buttons: MessageDialog.Ok |MessageDialog.Cancel

            onAccepted: {
                console.log("accept = " );
            }
            onRejected: {
                console.log("reject")
            }
        }
    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}

自定义对话框

可以参考：gallery 示例

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15//布局模块
import QtQuick.Controls 2.15 //Controls模块
import QtQuick.Dialogs 1.3
import Qt.labs.platform 1.1

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12


ApplicationWindow {
    width: 360
    height: 520
    visible: true
    title: qsTr("Qml learn ")
    id:rootid

    Column{
        spacing: 20
        anchors.fill: parent
        Button{
            text: "select file"
            onClicked: {
                messageid.open();
            }
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Rectangle{
            id:rectid
            width: 200
            height: 200
            border.width: 8
            anchors.horizontalCenter: parent.horizontalCenter
        }
        // MessageDialog{
        //     id:messageid
        //     title: "dialog"
        //     text: "这是一个对话框"
        //     // buttons: MessageDialog.Ok |MessageDialog.Cancel
        //     standardButtons: Dialog.Yes | Dialog.No

        //     // parent: Overlay.overlay

        //     onAccepted: {
        //         console.log("accept = " );
        //     }
        //     onRejected: {
        //         console.log("reject")
        //     }
        // }
        Dialog {
            id: messageid

            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            width: Math.min(page.width, page.height) / 3 * 2
            contentHeight: logo.height * 2
            parent: Overlay.overlay

            modal: true
            title: "Content"
            standardButtons: Dialog.Yes | Dialog.No

            Flickable {
                id: flickable
                clip: true
                anchors.fill: parent
                contentHeight: column.height

                Column {
                    id: column
                    spacing: 20
                    width: parent.width

                    Image {
                        id: logo
                        width: parent.width / 2
                        anchors.horizontalCenter: parent.horizontalCenter
                        fillMode: Image.PreserveAspectFit
                        source: "../images/qt-logo.png"
                    }

                    Label {
                        width: parent.width
                        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus "
                            + "in est quis laoreet. Interdum et malesuada fames ac ante ipsum primis "
                            + "in faucibus. Curabitur eget justo sollicitudin enim faucibus bibendum. "
                            + "Suspendisse potenti. Vestibulum cursus consequat mauris id sollicitudin. "
                            + "Duis facilisis hendrerit consectetur. Curabitur sapien tortor, efficitur "
                            + "id auctor nec, efficitur et nisl. Ut venenatis eros in nunc placerat, "
                            + "eu aliquam enim suscipit."
                        wrapMode: Label.Wrap
                    }
                }

                ScrollIndicator.vertical: ScrollIndicator {
                    parent: contentDialog.contentItem
                    anchors.top: flickable.top
                    anchors.bottom: flickable.bottom
                    anchors.right: parent.right
                    anchors.rightMargin: -contentDialog.rightPadding + 1
                }
            }
        }

    }


    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}