"underlaying" a rectangle

[mzimmers]

Hi all -

I have a display:

This is built from a Column with three items:

• list item the title
• list item the rack (which is what I'm working on), basically a rectangle
• list item the buttons.

I'd like to add a plain rectangle underneath the rack, and positioned to the right, to represent the system into which the rack is inserted. My efforts have resulted in the new rectangle being displayed to the left of the rack. What's the recommended way to do this?

Thanks...

[kshegunov]

@mzimmers said in "underlaying" a rectangle:

I'd like to add a plain rectangle underneath the rack, and positioned to the right, to represent the system into which the rack is inserted. My efforts have resulted in the new rectangle being displayed to the left of the rack. What's the recommended way to do this?

Anchor to the right of the blue thing, or anchor to the right of the window and set some width. Many ways, but you need to elaborate exactly what you're trying to accomplish (MS Paint skills may be handy here too).

[ODБOï]

@mzimmers hi
[edit misunderstood the question]
If you can use ColumnLayout instead of Column, it has alignment property and it allows you to easily control the overall aspect of your ui when resizing
example on https://qmlonline.kde.org/

[mzimmers]

Thanks, guys. Hopefully this picture will help explain what I'm trying to do:

The short, wide rectangle overlays (I know that's not the best term) the more square-shaped rectangle.

[fcarney]

Receptacle {
  anchors.centerVertical: rack.verticalCenter // may not be exact spelling
  anchors.right: rack.right
  anchors.rightmargin: -50 // may not accept negative number, in that case you will have to calculate x relative to rack
}
Rack {
  id: rack
}

[fcarney]

Heh, it works:

    Rectangle {
        anchors.verticalCenter: lbrect.verticalCenter
        anchors.right: lbrect.right
        anchors.rightMargin: -25

        height: 75
        width: 75

        color: "pink"
    }
    Rectangle {
        id: lbrect

        anchors.top: listview1.bottom

        height: 50
        width: 100

        color: "lightblue"
    }

Edit: Note, this only works with sibling items and items with parent child relationships. I chose to put the pink before the lightblue for z ordering purposes.

[ODБOï]

@fcarney hi
the op mentionned that items are managed by a Column so you can't use anchors

[mzimmers]

@LeLev correct. I could use a ColumnLayout, but I had trouble getting the rows to center, so I went with Column instead.

Off-topic: is there a rule of thumb for when to use each of these?

[fcarney]

@LeLev He can, he just has to put both inside an Item.

Edit: Might get messy

[fcarney]

@LeLev Here is a better solution then:

Rectangle {
        id: lbrect

        height: 50
        width: 100

        color: "lightblue"

        Rectangle {
            anchors.verticalCenter: lbrect.verticalCenter
            anchors.right: lbrect.right
            anchors.rightMargin: -25

            height: 75
            width: 75

            color: "pink"

            z: -1
        }
    }

Edit: Removed anchor from lbrect. I copied this from test project. So its not needed.

[mzimmers]

@fcarney assuming that your lbrect is my rack, I still can't use the anchors.

[fcarney]

@mzimmers You will use whatever positioning you are currently using. I copied from a test project. Its not needed.

[ODБOï]

@fcarney said in "underlaying" a rectangle:

@LeLev Here is a better solution then:

yes, that is a nice solution.the only drawback i see is that the child (pink) is heigher than its parent (lightblue), so you have to take that into account when placing this in a column or columnLayout, same thing for the nagative margin.

I would use a parent Item as you mentionned earlier

[mzimmers]

@fcarney I misspoke; the positioners you specified do work, if both rectangles are enclosed within an Item. Unfortunately, the display looks like this:

I assume that what's happening is the Item isn't recognized as a component of the Column; any idea why that might be?

Thanks.

[ODБOï]

maybe this helps
https://tinyurl.com/yedtugnn

[mzimmers]

Wow...that's quite a website. I had no idea such a tool existed.

I do think my problem comes from using Column instead of ColumnLayout, but I'll have to do some more experimentation to see. In any event, the original question has been answered very nicely, so I'm going to mark this solved.

Thanks to everyone for the help.

[ODБOï]

@mzimmers said in "underlaying" a rectangle:

I do think my problem comes from using Column instead of ColumnLayout

i'm not saying that at all... i don't know where your problems come from since you don't show the code :)
the only relevant part of my example is the blue and pink rectangles with their parent, dont pay attention to my ColumnLayout please