summaryrefslogtreecommitdiffstats
path: root/howtos/multiple_top_levels/index.rst
blob: e675849dd36190136562a7dede35f553bbc547b8 (plain)
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
..
    ---------------------------------------------------------------------------
    Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
    All rights reserved.
    This work, unless otherwise expressly stated, is licensed under a
    Creative Commons Attribution-ShareAlike 2.5.
    The full license document is available from
    http://creativecommons.org/licenses/by-sa/2.5/legalcode .
    ---------------------------------------------------------------------------

How to make and handle multiple toplevel windows
================================================

You can use the ``visible`` or the ``opacity`` property to hide a toplevel element. Visually, both choices look the same. The only difference is that the ``visible`` property changes the focus behavior. You should keep this in mind and check what is better in your case.

A simple version without any control elements:

.. code-block:: js

    import QtQuick 1.1

    Item {
        width: 360
        height: 360

        Rectangle {
            id: top1
            anchors.fill: parent
            Text {
                anchors.centerIn: parent
                text: "I'm top #1, click me to hide"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    top1.visible=false
                    top2.visible=true
                }
            }
        }

        Rectangle {
            id: top2
            anchors.fill: parent
            Text {
                anchors.centerIn: parent
                text: "I'm top #2, click me to hide"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    top2.visible=false
                    top1.visible=true
                }
            }
        }
    }


A more complex version with a component for a button:

.. code-block:: js

    import QtQuick 1.1

    Rectangle {
        id: root
        property string label: "no label"
        width: labelText.width + 10
        height: labelText.height + 10
        color: "red"
        radius: 8

        signal clicked()

        Text {
            id: labelText
            text: label
            anchors.centerIn: parent
        }

        MouseArea {
            anchors.fill: parent
            onClicked: root.clicked()
        }
    }


.. code-block:: js

    import QtQuick 1.1

    Item {
        width: 360
        height: 360

        Rectangle {
            id: top1
            anchors.fill: parent
            Text {
                anchors.centerIn: parent
                text: "I'm top #1"
            }

            Button2 {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                color: "lightblue"
                label: "Open top 2"
                onClicked: {
                    top1.visible=false
                    top2.visible=true
                }
            }
        }

        Rectangle {
            id: top2
            anchors.fill: parent
            Text {
                anchors.centerIn: parent
                text: "I'm top #2"
            }
            Button2 {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                color: "lightgrey"
                label: "Open top 1"
                onClicked: {
                    top2.visible=false
                    top1.visible=true
                }
            }
        }
    }