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

How to include other qml files in main qml file?



  • 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?


  • Moderators

    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.



  • @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
        }
    }
    
    


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


  • Moderators

    @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.



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



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

    // or anchors.verticalCenter: rec1ID.verticalCenter

    }


  • @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
    
        }
    

Log in to reply