Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Can't we have two Rectangle objects defined in a single qml file?



  • Hi,

    I have a Rectangle object defined in the default qml file that we get when we create a new project.
    I wanted another screen to open up on click of mouse. For this I tried to create another Rectangle object
    in the same qml file but I got a syntax error.

    Is it not possible to create two Rectangle objects in a single .qml file or what?

    Basically if I have to have multiple screens in my application switching them back and forth, how should I go about it in terms
    of qml files? Shall I have one qml file for one screen or how?

    Please let me know.

    Thanks



  • You can only have one top-level item in a QML file, as stated in the "QML document overview":http://qt-project.org/doc/qt-5.0/qtqml/qtqml-documents-topic.html

    There are a few approaches you can take to implement multiple in-application screens:

    Define as many items as you want and toggle their visibility, simulating page transitions. Top-level item "states":http://qt-project.org/doc/qt-5.0/qtquick/qtquick-statesanimations-states.html might be useful to monitor these. This is the most straightforward solution, but it gets cumbersome with the application complexity growing.

    @Item {
    id: topLevelItem

    Rectangle {
        id: firstRectangle
        visible: true
    }
    
    Rectangle {
        id: secondRectangle
        visible: false
    }
    
    MouseArea {
        onClicked: parent.state = "second"
    }
    
    states: State: {
            name: "second"
            PropertyChanges { target: firstRectangle; visiblity: false }
            PropertyChanges { target: secondRectangle; visibility: true }
        }
    

    }@

    Implement a "StackView":http://doc-snapshot.qt-project.org/qt5-stable/qtquickcontrols/qml-qtquick-controls1-stackview.html . With it, use different QML files for different pages you called screens and change to them by supplying the StackView with their URL.

    @Item {
    id: topLevelItem

    StackView {
        id: stackView
        initialItem: Qt.resolvedUrl("FirstRect.qml")
    }
    
    MouseArea {
        onClicked: stackView.push("SecondRect.qml")
    }
    

    }@

    Use a "Loader":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-loader.html element to load another QML file and change its source to another file when deemed necessary. Example on the documentation page.


Log in to reply