[SOLVED] Anchoring childs in window element problem



  • Hello everyone,

    Finally got my self learning QML, and got stuck when following this tutorial: "Qt Quick Application Developer Guide for Desktop":http://download.qt-project.org/learning/developerguides/qtquickdesktop/QtQuickApplicationGuide4Desktop.pdf

    Probably it's something simple, but I can't seem to spot it. My top level item is Window item, and when I place my other elements inside it and anchor it, the width of the Window element is only the width of the items placed inside.
    It does work if my top level item is a Rectangle, and I use QQuickView instead of QQmlApplicationEngine.

    Am I missing some fundamental behavior of Window element?

    Here is the Window output:
    !http://morf.lv/modules/zlTeam/images/qt_questions/problem.png(Error)!

    And here is Rectangle output, the one I want for my window element:
    !http://morf.lv/modules/zlTeam/images/qt_questions/desired.png(Correct)!

    Here is the code:

    @import QtQuick 2.2
    import QtQuick.Window 2.1

    Window {
    id: window
    visible: true
    width: 800
    height: 600
    title: "WHY YOU NOT WORKING"

    MarkerPanel {
        id:markerPanel
        width: 50
        anchors.topMargin: 20
        anchors {
            right: window.right
            top: window.top
            bottom: window.bottom
        }
    }
    
    Rectangle {
        id: toolbar
        width:50
        color: "#444a4b"
    
        anchors {
            left: window.left
            top: window.top
            bottom: window.bottom
            topMargin: 100; bottomMargin: 100
        }
    
        Column {
            anchors.fill: parent
            anchors.topMargin: 30
            spacing: 20
    
            Repeater {
                model: 2
                Rectangle {
                    width: 50
                    height: 50
                    color: "red"
                }
            }
        }
    }
    

    }
    @

    Also I tried placing the MarkerPanel and the inner Rectangle in a an item, which had property anchors.fill: parent set. Didn't work either.

    Thanks


  • Moderators

    Hi,

    You should specify height to the Rectangle and MarkerPanel too.



  • Hi,

    Thanks for the reply. Shouldn't the anchors for both MarkerPanel and Rectangle sort out the height?

    In any case, even by adding the height to both of them nothing changed.

    Also MarkerPanel, has default height:

    MarkerPanel.qml
    @import QtQuick 2.0

    Rectangle {
    width: 50
    height: 300

    Column {
        id: layout
        anchors.fill: parent
        spacing: 10
    
        Repeater {
            model: 3
            delegate:
                Marker { id: marker }
        }
    }
    

    }@


  • Moderators

    bq. Shouldn’t the anchors for both MarkerPanel and Rectangle sort out the height?

    Yes it should actually as it works in case of Rectangle. I too come across Window related issues and hence used good old Item and Rectangle.

    bq. Also I tried placing the MarkerPanel and the inner Rectangle in a an item, which had property anchors.fill: parent set. Didn’t work either.

    Can you try the following? It works for me.
    @
    Window {
    id: window1
    visible: true
    width: 800
    height: 600
    title: "WHY YOU NOT WORKING"

    Item {
        id: window
        anchors.fill: parent
    
        MarkerPanel {
            id:markerPanel
            color: "blue"
            width: 50
            anchors.topMargin: 20
            anchors {
                right: window.right
                top: window.top
                bottom: window.bottom
            }
        }
    
        Rectangle {
            id: toolbar
            width:50
            color: "#444a4b"
    
            anchors {
                left: window.left
                top: window.top
                bottom: window.bottom
                topMargin: 100; bottomMargin: 100
            }
    
            Column {
                anchors.fill: parent
                anchors.topMargin: 30
                spacing: 20
    
                Repeater {
                    model: 2
                    Rectangle {
                        width: 50
                        height: 50
                        color: "red"
                    }
                }
            }
        }
    }
    

    }

    @



  • Thanks,

    That works, the funny thing I tried it, as I mentioned in my original post and you quoted it. But forgot to change the id of the item to be "window", and got really frustrated.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.