QML学习之路(6)——多窗口互动

Posted on | In ,

在GUI程序中，有时需要进行多窗口互动，本文将介绍几种多窗口互动的方式。

两个窗口相互切换

假设我们有两个窗口，需要实现窗口间的相互切换，其代码如下：

main.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Main")
    
    //定义了一个Welcome窗口对象，其定义见Welcome.qml
    Welcome {
        id: welcomeWindow
        title: qsTr("Main Window")
        //由于一开始没有设置visible属性为true，所以Welcome不会出现
        // The signal handler for the opening of the main window
        onSignalEnter: {
            welcomeWindow.close()     // Close the first window
            mainWindow.show()       // Shows the main window
        }
    }
    
    //主窗口
    Rectangle {
        anchors.fill: parent
        color: "white"

        GridLayout {
            id: grid
            anchors.fill: parent

            rows: 2
            columns: 1

            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.column: 1
                Layout.row: 1

                // Button to open the first secondary application window
                Button {
                    text: qsTr("Enter Welcome Window")
                    anchors.centerIn: parent
                    width: 300
                    height: 50

                    onClicked: {
                        welcomeWindow.show()  // Open the first window
                        mainWindow.hide()   // Hide the main window
                    }
                }
            }

        }
    }
}

Welcome.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
    id: welcomeWindow
    signal signalEnter   // Set signal
    width:480
    height:320

    // Button to open the main application window
    Button {
        text: qsTr("Enter Main Window")
        width: 180
        height: 50
        anchors.centerIn: parent
        onClicked: {
            welcomeWindow.signalEnter() // invoke signal
        }
    }
}

通过代码可以看到，两个窗口间通过信号机制，实现了相互切换的功能。

QML实现Login界面

有些应用程序需要用户登录后，才会显示主界面，或者先打开一个Welcome界面，当用户点击进入程序后，才会进入主界面，如果在Welcome界面就点击了退出，那么相应的程序会直接退出，这个逻辑的状态机可以由下图表示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
    id: root
    width: 600
    height: 600
    visible: true
    flags: Qt.Dialog
    modality: Qt.ApplicationModal

    Component {
        id:  mainWindow
        Window {
            title: "mainWindow"
            width: 400
            height: 400
            visible: true
            flags: Qt.Dialog
            modality: Qt.ApplicationModal
            Text {
                anchors.centerIn: parent
                text: "Close me to quit program"
            }
        }
    }

    Button {
        anchors.centerIn: parent效果
        text: "Enter main window"
        onClicked: {
            var window = mainWindow.createObject(root);    
            root.hide();
            //conn.target = window;
        }
    }
    
    //如果添加了connections部分，会实现关闭住窗口后再次回到登录界面的效果
    //Connections {
        //id: conn
        //onVisibleChanged: {
            //root.show();
        //}
    //}
}

上面这种方式是采用了一个Component实现的。

参考文献

0%