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

QML Rectangle:Possible anchor loop detected on horizontal anchor.



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

    }



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


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


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


  • @Markkyboy

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



  • This post is deleted!

Log in to reply