CODEWITHSUNDEEP
qml
jimav
jimav

Reputation: 838

How to keep qml Rectangle border from overlapping contents?

I want a Rectangle to auto-size itself to fit exactly around its visual children. If there is no border, then the following works great:

Rectangle {
    width:  childrenRect.width+(border.width*2)
    height: childrenRect.height+(border.width*2)
    ...
}

HOWEVER, if the Rectangle has a border, the children will overlap it. I tried unsuccessfully wrapping the children in a container (Column in the example below) and using anchor.margins to shift the container over to miss the Rectangle's borders. 

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 600;  height: 600

    Rectangle {
        id: rect
        border.width : 20
        border.color: "yellow"
        clip: true

        width: childrenRect.width+(border.width*2)
        height: childrenRect.height+(border.width*2)

        Column {
            anchors.margins: rect.border.width // does not work
            Text { height: 40; text: "FoooooooooooooooMumble" }
            Text { height: 40; text: "Bar" }
            Button { height: 40; text: "press me" }
        }
    }
}

Results from above code

Can someone suggest how to do this?

Upvotes: 0

Views: 2156

Answers (1)

jimav
jimav

Reputation: 838

For anchors.margins to work, the border anchors must be set (the margin space is relative to those). For example:

Column {
            anchors.margins: rect.border.width
            anchors.left: rect.left
            anchors.top: rect.top
            ...
}

Upvotes: 1

Related Questions