Solved aligning text RowLayout to another object
-
Hi all -
I'm trying to overlay some text onto another object (a circular slider), and am having troubles with the vertical alignment. (Horizontal alignment seems to work fine.) Here's my code -- the main Item is contained within a GridLayout:
Item { id: sliderTile Layout.preferredHeight: tileHeight // property Layout.preferredWidth: tileWidth // property CircularSlider { id: circularSlider width: sliderTile.width * 0.8 height: width anchors { horizontalCenter: parent.horizontalCenter top: parent.top } } // I want this row (approximately) in the middle of the slider. RowLayout { anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: circularSlider.verticalCenter Label { id: nbr visible: sliderTile.labelVisible text: "20" font.pixelSize: sliderTile.labelFontSize font.weight: Font.Bold } Label { visible: sliderTile.labelVisible text: "gpm" font.pixelSize: sliderTile.labelUnitsSize } } }
And here's what I'm getting:
There are two problems with the vertical alignment:- it's not in the center of the circular slider. Note: I'm only displaying the "upper" half of the slider, which is a complete circle, so I really do want my text in the vertical center of it.
- the two text items seem to be center aligning, instead of bottom aligning.
Can someone please tell me what I might be doing wrong here?
Thanks...
-
Try it
Item { id: sliderTile Layout.preferredHeight: tileHeight // property Layout.preferredWidth: tileWidth // property CircularSlider { id: circularSlider width: sliderTile.width * 0.8 height: width anchors { horizontalCenter: parent.horizontalCenter top: parent.top } } // I want this row (approximately) in the middle of the slider. RowLayout { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: circularSlider.verticalCenter Item { Layout.fillWidth: true Layout.fillHeight: true } Label { id: nbr visible: sliderTile.labelVisible text: "20" font.pixelSize: sliderTile.labelFontSize font.weight: Font.Bold } Label { visible: sliderTile.labelVisible text: "gpm" font.pixelSize: sliderTile.labelUnitsSize } Item { Layout.fillWidth: true Layout.fillHeight: true } } }
-
@JoeCFD no change.
-
This is my test code. It works fine.
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 Item { id: sliderTile height: 150 width: 300 property int labelUnitsSize: 20 Rectangle { id: circularSlider width: sliderTile.width * 0.8 height: width color: "green" anchors { horizontalCenter: parent.horizontalCenter top: parent.top } } // I want this row (approximately) in the middle of the slider. RowLayout { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: circularSlider.verticalCenter Item { Layout.fillWidth: true Layout.fillHeight: true } Label { id: nbr visible: true text: "20" font.pixelSize: sliderTile.labelUnitsSize font.weight: Font.Bold } Label { visible: true text: "gpm" font.pixelSize: sliderTile.labelUnitsSize } Item { Layout.fillWidth: true Layout.fillHeight: true } } }
-
Yes it does. There must be something upstream in my app causing this. I'll try to pare down my parent code to something I can post here. Thanks...
-
Item { Layout.fillWidth: true Layout.fillHeight: true } works as spacer to push texts to the middle. It is very useful in layout.
-
@JoeCFD yeah, that's a good tip. I've used it for pushing text to the edges, but not like this. I'll file this one away...thanks.
-
OK, here's a minimal full example:
import QtQuick import QtQuick.Controls import QtQuick.Layouts ApplicationWindow { id: mainWindow visible: true width: 800 height: 480 Item { id: sliderTile property bool labelVisible: true property int labelFontSize: 36 property int labelUnitsSize: 18 Rectangle { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.verticalCenter RowLayout { Item { Layout.fillWidth: true Layout.fillHeight: true } Label { id: nbr visible: sliderTile.labelVisible text: "20" //Number(circularSlider.value).toFixed() font.pixelSize: sliderTile.labelFontSize font.weight: Font.Bold } Label { visible: sliderTile.labelVisible text: "gpm"//sliderTile.sliderUnits font.pixelSize: sliderTile.labelUnitsSize } Item { Layout.fillWidth: true Layout.fillHeight: true } } } } }
-
@mzimmers said in aligning text RowLayout to another object:
import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsApplicationWindow {
id: mainWindow
visible: true
width: 800
height: 480Item { id: sliderTile property bool labelVisible: true property int labelFontSize: 36 property int labelUnitsSize: 18 Rectangle { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.verticalCenter RowLayout { Item { Layout.fillWidth: true Layout.fillHeight: true } Label { id: nbr visible: sliderTile.labelVisible text: "20" //Number(circularSlider.value).toFixed() font.pixelSize: sliderTile.labelFontSize font.weight: Font.Bold } Label { visible: sliderTile.labelVisible text: "gpm"//sliderTile.sliderUnits font.pixelSize: sliderTile.labelUnitsSize } Item { Layout.fillWidth: true Layout.fillHeight: true } } } }
}
you see the size of your item is not defined and layout range is not set either.
add anchors.fill: parent to Item and then RowLayout. your code will work. -
Still didn't work. I've removed even more:
import QtQuick import QtQuick.Controls import QtQuick.Layouts ApplicationWindow { id: mainWindow visible: true width: 800 height: 480 RowLayout { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.verticalCenter Item { Layout.fillWidth: true Layout.fillHeight: true } Label { visible: true text: "20" font.pixelSize: 36 } Label { visible: true text: "gpm" font.pixelSize: 18 } Item { Layout.fillWidth: true Layout.fillHeight: true } } }
and get this:
EDIT:
This works:
import QtQuick import QtQuick.Controls import QtQuick.Layouts ApplicationWindow { id: mainWindow visible: true width: 800 height: 480 RowLayout { anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.verticalCenter Item { Layout.fillWidth: true Layout.fillHeight: true } Label { visible: true anchors.baseline: parent.verticalCenter text: "20" font.pixelSize: 36 } Label { visible: true anchors.baseline: parent.verticalCenter text: "gpm" font.pixelSize: 18 } Item { Layout.fillWidth: true Layout.fillHeight: true } } }
Can the baseline for the individual items be set at the layout level, or do I need to do this for every item in the RowLayout? Thanks... -
I guess you can add another layout ColumnLayout for label gpm and allgn or push it to the botton of the layout