aligning text RowLayout to another object

mzimmers · wrote on 3 Nov 2022, 16:47

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...

JoeCFD · 3 Nov 2022, 18:12

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
       }
    }
}

mzimmers · J JoeCFD 3 Nov 2022, 18:03

@JoeCFD no change.

JoeCFD · 3 Nov 2022, 18:25

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
        }
    }
}

mzimmers · J JoeCFD 3 Nov 2022, 18:17

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...

JoeCFD · 3 Nov 2022, 18:28

    Item {
        Layout.fillWidth: true
        Layout.fillHeight: true
    }  works as spacer to push texts to the middle. It is very useful in layout.

mzimmers · 3 Nov 2022, 19:05

@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.

mzimmers · wrote on 3 Nov 2022, 19:05

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
                }
            }
        }
    }
}

JoeCFD · wrote on 3 Nov 2022, 20:26

@mzimmers said in aligning text RowLayout to another object:

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
            }
        }
    }
}

}

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.

mzimmers · 11 Mar 2022, 21:20

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...

JoeCFD · 11 Apr 2022, 13:57

I guess you can add another layout ColumnLayout for label gpm and allgn or push it to the botton of the layout