Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create a new window from within QML?

Is there a way to create a completely new window instance, as a child window of the main QML window in a QmlApplication?

// ChildWindow.qml
Rectangle {
    id: childWindow
    width: 100
    height: 100
    // stuff
}

// main.qml
Rectangle {
    id: window
    width: 1000
    height: 600

    MouseArea {
        anchors.fill: parent
        onClicked: createAWindow(childWindow);
    }
}

I am trying to avoid writing a Q_OBJECT class just for instanciating the new window within a new QmlApplicationViewer.

like image 880
opatut Avatar asked Nov 30 '11 14:11

opatut


People also ask

How do I open a new window in QML?

There is no way to create top-level windows using only built-in QML functionality. However there's a project on Qt Labs called Desktop Components, which among other things contains a Window component, which allows you to create new top-level windows.

What is difference between Qt and QML?

QML is the language; its JavaScript runtime is the custom V4 engine, since Qt 5.2; and Qt Quick is the 2D scene graph and the UI framework based on it. These are all part of the Qt Declarative module, while the technology is no longer called Qt Declarative.

How do I create a QML application?

Creating and Running QML Projects For simple UI files such as this one, select File > New File or Project > Application (Qt Quick) > Qt Quick Application - Empty from within Qt Creator. Pressing the green Run button runs the application. You should see the text Hello, World! in the center of a red rectangle.

What is opacity in QML?

Opacity is specified as a number between 0.0 (fully transparent) and 1.0 (fully opaque). The default value is 1.0. When this property is set, the specified opacity is also applied individually to child items. This may have an unintended effect in some circumstances.


2 Answers

You can do it by using Qt.createComponent. Example (using Qt 5.3):

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    id: root
    width: 200; height: 200
    visible: true

    Button {
        anchors.centerIn: parent
        text: qsTr("Click me")

        onClicked: {
            var component = Qt.createComponent("Child.qml")
            var window    = component.createObject(root)
            window.show()
        }
    }
}

Child.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    id: root
    width: 100; height: 100

    Text {
        anchors.centerIn: parent
        text: qsTr("Hello World.")
    }
}
like image 86
Kknd Avatar answered Nov 13 '22 06:11

Kknd


There is no way to create top-level windows using only built-in QML functionality.

However there's a project on Qt Labs called Desktop Components, which among other things contains a Window component, which allows you to create new top-level windows.

like image 24
sepp2k Avatar answered Nov 13 '22 05:11

sepp2k