Proper way of defining and composing custom elements in QML

Question

Lets say I want to create a field element in QML which has its "field" part and could have icon on the right, left side or not show it at all. Basic qml code would look like this (without functionality to change sides):

// TestField.qml
Item
{
    Image
    {
        anchors.right: field.left
        anchors.top: field.top

        source: "qrc:/res/settings/logOptions.svg"
        height: 40
        width: 40
    }

    Rectangle
    {
        id: field
        anchors.fill: parent

        color: "blue"
    }
}

Then I will use it like this:

// Main.qml
TestField
{
    x: 100
    y: 100

    height: 100
    width: 100
}

Or use it in some grid layout, anchor it to another element, etc. I used hardcoded coordinates and sizes just to keep the question simpler.

The problem with this is that I specified sizes for the element (100x100) and my field rectangle would fill the whole space, leaving icon "hanging" out of bounds of this element. In this case QML will treat this element as of the size 100x100, but since the icon is out of bounds the actual size of the whole element with the icon is bigger (140x100) and could overlap with other such elements when placed into layout.

Worth noting that for such elements I want to be able to change position of the icon to be to the left or right of the rectangle (it will be some sort of property with enum value, that I will define in code, it won't change dynamically throughout application work) so some rectangles will have icon from different sides.

One solution I see is to rework TestField so its elements will be tied to parents width or height, for example:

Item
{
    Image
    {
        x: 0
        y: 0
        width: parent.width / 2
        height: parent.width / 2
    }

    Rectangle
    {
        id: field
        x: parent.width / 2
        y: 0
        width: parent.width / 2
        height: parent.height
    }
}

The question is - is this a good solutions or there are proper ways to tackle such issue? My main concern is that element size should be actually the size that I could query with element.width or element.height and none of the internal part are out of bounds possibly overlapping with other elements. Maybe I'm missing some basic concept that will allow me to make elements that always keep their parts inside its bounds?

JarMan JarMan · Accepted Answer · 2021-02-03T17:23:43

The problem with your sizing is that your Rectangle takes up the whole size of its parent. You want to shrink that to account for the size of the Image. I also added a way to switch the image between left and right side.

Item
{
    property bool imageOnLeft: true

    Image
    {
        id: img
        anchors.left: imageOnLeft ? parent.left : field.right

        source: "qrc:/res/settings/logOptions.svg"
        height: 40
        width: 40
    }

    Rectangle
    {
        id: field
        anchors.left: imageOnLeft ? img.right : parent.left
        width: parent.width - img.width
        height: parent.height

        color: "blue"
    }
}

Proper way of defining and composing custom elements in QML

1 Answers