QML Rectangle:Possible anchor loop detected on horizontal anchor.

[Swati777999]

Hi All,
Hope you're doing well. I want to create 3 boxex placed adjacent to each other inside a window and add different functionalities . However, I am stuck in the first stage itself. This code doesn't
provide the required output.

I am new to QT , in learning and experimentinq phase .Can someone check my code and let me know where the problem lies.

Any help will be highly appreciated!

Thanks :)

import QtQuick 2.6
import QtQuick.Window 2.2

Window{
id: parwindow
height:500
width:500
color:"white"
title:"Experimenting with anchors "
x:10
y:10

Rectangle {
id :  rect1
height: 300
width : 300
color: "black"
anchors.left:parwindow.left
}


Rectangle {
id: rect2
height: 300
width: 300
color: "green"
anchors.left: rect1.right
anchors.right:rect3.left
        }

Rectangle {
    id :rect3
    height:300
    width:300
    color:"blue"
    anchors.left: rect2.right
}

}

[Markkyboy]

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    height: 300    /** height of all rects **/
    width: 900     /** width of all rects **/
    color: "white"
    visible: true  /** where was your 'visible' statement ? **/
    title: "Experimenting with anchors"
    x: 10; y: 10

    Rectangle {
        id: rect1
        height: 300
        width : height /** if you are making a square, just quote the height **/
        color: "black"
        anchors.left: parent.left /** this is unneccessary, as it will naturally anchors left by default **/
    }
    Rectangle {
        id: rect2
        height: width
        width: 300
        color: "green"
        anchors.left: rect1.right
        /** the anchor here was basically a repeat; you only need to anchor to one side of each, or use 'Row' **/
    }
    Rectangle {
        id: rect3
        height: 300
        width: height
        color: "blue"
        anchors.left: rect2.right
    }
}

[Markkyboy]

import QtQuick 2.12
import QtQuick.Window 2.12

// Using Row instead of anchoring each rectangle to each other.

Window {
    height: 300
    width: 900
    visible: true
    title: "Experimenting with row"
    x: 10; y: 10

    Row {
        id: row
        anchors.horizontalCenter: parent.horizontalCenter

        Rectangle {
            id: rect1
            height: 300
            width: height
            color: "black"
        }
        Rectangle {
            id: rect2
            height: 300
            width: height
            color: "green"
        }
        Rectangle {
            id: rect3
            height: 300
            width: height
            color: "blue"
        }
    }
}

[Swati777999]

@Markkyboy

Just a doubt , whatever width or height was written inside the window, doesn't it define the dimension of the window?

[Swati777999]

This post is deleted!