CODEWITHSUNDEEP
qtqmlqt-quick
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

How to draw two rectangles with QML-QtQuick?

import QtQuick 1.0

    Rectangle 
    {
        id: sas
        width: 200
        height: 100
        color: "red"

        Text 
        {
            anchors.centerIn: parent
            text: "Hello, World!"
        }
    }

    Rectangle
    {
        id: sasas
        width: 200
        height: 100
        color: "red"

        Text 
        {
            anchors.centerIn: parent
            text: "Hello,fdsfdsf!"
        }
    }

This, when run with qmlviewer, says:

Syntax error Rectangle {
^

What's the way out?

Upvotes: 1

Views: 2239

Answers (2)

LangstoniusRex
LangstoniusRex

Reputation: 81

The problem is the structure of the qml file. Any given qml application will have a root item, be it a Rectangle or Item. All the other qml elements you intend to instantiate, be they other qml files, more complex items, etc, will all be children of this one root item (this obviously excludes more advanced cases like custom qml elements, context objects, etc) but for the purposes of keep it simple, it would be something like this

import QtQuick 1.1
Item{
    id:qml_rootItem

    height:400
    width:300



    Rectangle{
        id:redRect1
        height:100
        width:100
        color:"red" //svg named colors is awesome for the non graphically talented like me!
        anchors.verticalCenter:qml_root.verticalCenter
        anchors.right:parent.right

    }

    Rectangle{
        id:redRect2
        height:100
        width:100
        color:"red" //svg named colors is awesome for the non graphically talented like me!
        anchors.verticalCenter:qml_root.verticalCenter
        anchors.left:parent.left

    }

    MouseArea{
        anchors.fill: parent
        onReleased: Qt.quit()
    }

}

So the takeaway is that you have to always have a root item that the rest of your qml will be children of.

Upvotes: 1

Steffen
Steffen

Reputation: 2948

Each QML file describes a single component, so it has to have one "root item". Kind of similar to an XML document.

If you want to have both Rectangles, just wrap them in an Item { }. So you define a single item containing two Rectangles.

(Note: as the Rectangles have no positions set, they might actually come to lie on top of each other...)

Upvotes: 4

Related Questions