[SOLVED] Anchoring childs in window element problem

xcoder

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

p3c0

Hi,

You should specify height to the Rectangle and MarkerPanel too.

xcoder

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

}@

p3c0

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

}

@

xcoder

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.