Laying one item on top of another

mzimmers

Hi all -

I have an Item (controlled by a layout) that contains two other items. The first item, because of some properties I'm setting is only displaying the top half of itself (this is desired behavior). I'm having trouble placing a line of text over the portion of the first item, in the area that is not being displayed.

Here's what I'm trying:

Item {
    id: sliderTile

    Layout.preferredHeight: 200
    Layout.preferredWidth: 300
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

	Item {
		id: bigComplicatedItem
		anchors.top: parent.top
		anchors.horizontalCenter: parent.horizontalCenter
	}
	Item {
		anchors.top: bigComplicatedItem.verticalCenter // this doesn't work
		Text {
			text: "some text here"
		}
	}
}

And here's what I'm getting:

Can someone tell me what I'm doing wrong?

(There's a GridLayout that contains several instances of this code.)

Thanks...

JoeCFD

you can set z: value to lay one item over another one.

mzimmers

@JoeCFD it's the x and y coordinates I'm fighting here. Nothing I've tried has moved the text from the top of the screen to the lower middle where I want it.

JoeCFD

@mzimmers said in Laying one item on top of another:

"some text here"
is this what you want? run it with qmlscene for qt5 and qml for qt6

import QtQuick          2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts  1.15

Item {
    id: parent
    height: 200
    width: 400
    
    Item {
       Rectangle {
           id: rect
           height: 100
           width: 200
           x: ( parent.width - width ) * 0.5
           y: 0 
           color: "green"
       }
    }
    
    Item {
       x: rect.x + ( rect.width - text.width ) * 0.5
       y: rect.y + rect.height * 0.5
       Text {
           id: text
           text: "some text here" 
       }
    }
}

fcarney

Please post complete examples that demonstrate the problem (stuff we can actually run and test). Otherwise we can only guess what the issue actually is.

Here is my test/guess of anchors, they seem to work fine:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("AnchorLine Test")

    Rectangle {
        id: redrect

        width: 400
        height: 400

        color: "red"

        Rectangle {
            anchors.verticalCenter: parent.verticalCenter

            width: parent.width
            height: 1
        }
        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter

            width: 1
            height: parent.height
        }
    }

    Text {
        anchors.top: redrect.verticalCenter
        anchors.left: redrect.horizontalCenter

        text: "ride the red"
    }
}

There is no way bigComplicatedItem could actually work as posted as it doesn't have height/width.

mzimmers

@fcarney said in Laying one item on top of another:

Please post complete examples that demonstrate the problem (stuff we can actually run and test). Otherwise we can only guess what the issue actually is.

I try to walk a line between posting too much and not posting enough. My rule of thumb is that if I think I'm doing something incredibly obviously lame, I don't bother with compete examples; just enough that people can tell me exactly where I'm an idiot. I was hoping this would be one such example, but evidently not.

The complete heirarchy is:
ApplicationWindow -> ColumnLayout -> TabBar/StackLayout -> GridLayout -> the main Item I posted here.

For whatever reason, I'm having no luck using x and y to position my text, which is fine -- if I can use anchors, that'd be great. The text I'm trying to post under the rectangle is (if you look at my pic) min value - description - max value. Min and max values would be nicely situated under the ends of the semicircle; the description would be nicely centered.

So, I guess my question for the moment is, (how) can I use anchors to locate relative to my sliderTile? I'd like to locate relative to the visible portion of the bigComplicatedItem (I'm only displaying half the circle), but I don't think there's any way to know what that is.

Thanks...

mzimmers

I got this working with anchors and margins:

import QtQuick 2.12
Item {
    id: sliderTile
    Item {
        id: sliderItem
        height: sliderTile.height
        width: sliderTile.width
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        CircularSlider {
            id: circularSlider
            width: sliderTile.width * 0.8
            height: width
        }
    RowLayout {
        anchors.top: sliderTile.verticalCenter
        anchors.topMargin: 30
        anchors.left: sliderTile.left
        anchors.leftMargin: (sliderTile.width - sliderProperties.diameter) / 2
        Text { text: "some text here" }
    }
}

(this code snippet isn't complete; just showing how I got the text into the correct position.)

Definitely not the most elegant, but it works. I'll improve upon it down the road.

Thanks for all the suggestions...