How to include other qml files in main qml file?

JennyAug13

I have following code, and this is not working properly and I am beginner in QML, it would be nice if someone guides. I want to place the red rectangle at the center of the window and the blue rectangle to the right of the red rectangle.

main.qml file

import QtQuick 2.6
import QtQuick.Window 2.2

Window
    {
      visible: true
      width: 400
      height: 600
      Rec1{
          id:rec1ID
      }
      Rec2{
          id:rec2ID
          anchors.left: rec1ID.right
      }
    }

Rec1.qml file

import QtQuick 2.0

Item {
    Rectangle{
        id: rec1
        color: "red"
        width: 100
        height: 100
        anchors.centerIn: parent.Center
    }
}

Rec2.qml file

import QtQuick 2.0

Item {
    Rectangle{
        id: rec2
        color: "blue"
        width: 100
        height: 100
    }
}

Is this the right way to do?

sierdzio

Your component files have to begin with capital letter. So Rec1.qml and Rec2.qml. This is required.

Then, if these files are in the same directory as main.qml, you don't have to do anything. If they are somewhere, you need to import that dir using import path/to/directory syntax.

ODБOï

@JennyAug Hello,

Please use uppercase letter wen you create your QML components
so not 'rec1.qml' but 'Rec1.qml'

Create your Rec1.qml in the main.qml and then set 'anchors' to position it.

it should be anchors centerIn:parent and not parent.center

//main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 400
    height: 600
    Rec1{
        id:rec1ID
        anchors.centerIn:parent // not parent.center
    }
    Rec2{
        anchors.left: rec1ID.right
    }
}

JennyAug13

@LeLev I corrected them, but i can see only my blue rectangle with in.

sierdzio

@JennyAug13 said in How to include other qml files in main qml file?:

Item {
Rectangle{

Btw. you don't need to wrap your UI elements in item. Rectangle can be top-level component in a QML file without any issues.

JennyAug13

Then i can see the result like this. Blue rec should appear exactly right to the red rectangle, as shown in the figure.!!

ODБOï

Rec1{
    id:rec1ID
    anchors.centerIn:parent // not parent.center
}
Rec2{
    anchors.left: rec1ID.right
    anchors.top:rec1ID.top

// or anchors.verticalCenter: rec1ID.verticalCenter

ODБOï

@JennyAug13 if your Components have lot of similarities you can only define one Rec.qml like this :

import QtQuick 2.0

Item {
  id:rootItem
 property alias recColor  : rec.color
    Rectangle{
        id: rec
        anchors.fill:parent // or anchors.fill rootItem
    }
}

and use it

 Rec{
        id:r1
        anchors.centerIn: parent
        recColor: "red"
        height: 50
        width: 50
    }
    Rec{
        id:r2
        recColor: "blue"
        height: 50
        width: 50
        anchors.left: r1.right
        anchors.top: r1.top
        // or anchors.verticalCenter: r1.verticalCenter

    }