CODEWITHSUNDEEP
qtqmlqtquick2
Nicola
Nicola

Reputation: 13

Qt QML anchor not working in custom Item

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

Upvotes: 1

Views: 2508

Answers (2)

derM
derM

Reputation: 13691

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

Upvotes: 4

Vedanshu
Vedanshu

Reputation: 2296

You are anchoring all the Rectangle's to the Item hence you are not getting the desired result. Simple change the id of the top Rectangle as follows

Item
{
    id: root        
    Rectangle
    {
        id:main_screen
        ...
    }
}

Upvotes: -1

Related Questions