Qt QML anchor not working in custom Item

Question

I'm new of qml. I'm starting to develop a little application with a custom item. when I try to use in application anchor.top: first_item.bottom, to position the rectangles of the custom component, one below the other doesn't work.

content file main.qml:

import QtQuick 2.5

Item
{
    id:main_screen
    Rectangle
    {
        width: 300
        height: 60

        id: text_content
        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6

        Text {
            id: titleText
            width: parent.width
            height: parent.height
            font.pointSize: 20
            font.family: "Arial"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: "Test - title"
            color: "White"; style: Text.Raised;
        }
    }


//..................This rectangle is shown below main_screen... so is OK
    Custom_item
    {
        id:first_item
        anchors.top: main_screen.bottom
    }

//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of  retangle title
    Custom_item
    {
        id:second_item
        anchors.top: first_item.bottom
    }

//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of  retangle title
    Custom_item
    {
        id:third_item
        anchors.top: second_item.bottom
    }
}

content file Custom_item.qml

import QtQuick 2.5

Item
{
    id:testComponent

    Rectangle
    {
        width: 300
        height: 60

        id: text_content

        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6
    }
}

what am I doing wrong ?

Thanks

I would recommend also posting a screenshot, instead of trying to explain the ui problem, i.e instead of "This rectangle is not shown below first_item... but it shown on absolute top, in overlap of rectangle title" a screenshot would save a thousand words :) — liorsolomon
It features a mcve, which explains the problem than thousand pictures. A commendable first post! — derM

derM derM · Accepted Answer · 2017-02-26T20:39:41

The problem lies within the dimensions of the objects your are anchoring to.

Though the Rectangles have a width and a height, the enclosing Item has none, so it is basically 0 pixels in height and width, while the Rectangle protrudes it.

If you don't have any reason for enclosing the Rectangle within the Item, I'd reccomend you, to take the Rectangle itself as the toplevel element of the file.

Reasons for having the Item might be those:

Hiding the Rectangles properties
Having multiple children for the Item that are logically siblings to the Rectangle
... other reasons might exist ;-)

Nevertheless, you need to make sure, that the toplevel item has always the right dimensions. So you should set the width and height, better the implicitWidth and implicitHeight in component declarations.

Example 1: Without an Item

import QtQuick 2.5
Rectangle {
    id: root
    width: 300
    height: 60

    color: "DarkGray"
    opacity: 0.9
    border.color: "blue"
    border.width: 3
    radius: 5
    z:6
}

Example 2: With Item

import QtQuick 2.5
Item {
    id:testComponent
    implicitHeight: 60  // < This
    implicitWidth: 300  // < and that are important to have the dimensions

    Rectangle {
        id: text_content

        anchors.fill: parent
        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6
    }
}

Qt QML anchor not working in custom Item

2 Answers