positioning items within a RowLayout

[mzimmers]

Hi all -

I'm trying to code a RowLayout (that will be within another layout). The RowLayout will contain 3 items: two Text, and one Image. I'd like the 2nd Text and the Image to be pushed to the right.

I can accomplish this with the use of a "spacer" item, but I'm wondering whether there's a preferred alternative.

With the spacer Item, I get what I want:

Without the spacer Item, I get this:

Here's my code:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 800
    height: 640

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        RowLayout {
            spacing: 8
            Layout.preferredWidth: mainLayout.width
            Layout.alignment: Qt.AlignTop
            Layout.margins: 32

            Text {
                Layout.alignment: Qt.AlignLeft
                text: "SITE STATUS"
            }
// I'd rather not have to use this Item if possible.
//            Item {
//                Layout.fillWidth: true
//                height: 1
//            }

            Text {
                Layout.alignment: Qt.AlignRight
                text: "My City, My State | 56 F"
            }

            Image {
                source: "qrc:/Sunny.svg"
                Layout.alignment: Qt.AlignRight
            }
        }
    }
}

Is there in fact, a better way to do this?

Thanks...

[lemons]

@mzimmers if you don't add Layout.fillWidth: true to one of the layouts childs, the space gets distributed evenly.
In this case, each item defaults to left alignment. If you want to change this, you can set Layout.alignment: Qt.AlignHCenter or Layout.alignment: Qt.AlignRight to the childs that shouldn't be aligned to the left, inside their assigned space.

If you want to have empty space, you have to decide on your use case.
Usually you don't need a spare item just for spacing, as you can make another item grow to archive the same result.

[lemons]

@mzimmers said in positioning items within a RowLayout:

Image {
source: "qrc:/Sunny.svg"
Layout.alignment: Qt.AlignRight
}

Just add Layout.fillWidth to the first entry instead of adding an additional spacer.
Note: you also don't need the alignments, if those entries aren't wider than their content.

RowLayout {
   spacing: 8
   Layout.preferredWidth: mainLayout.width
   Layout.alignment: Qt.AlignTop
   Layout.margins: 32

   Text {
       Layout.fillWidth: true
       text: "SITE STATUS"
   }
   Text {
       text: "My City, My State | 56 F"
   }
   Image {
       source: "qrc:/Sunny.svg"
   }
}

[mzimmers]

@lemons thanks for the suggestion. So, I guess when using layouts, it's not enough to say "align right;" you need something to fill the space?

[lemons]

@mzimmers if you don't add Layout.fillWidth: true to one of the layouts childs, the space gets distributed evenly.
In this case, each item defaults to left alignment. If you want to change this, you can set Layout.alignment: Qt.AlignHCenter or Layout.alignment: Qt.AlignRight to the childs that shouldn't be aligned to the left, inside their assigned space.

If you want to have empty space, you have to decide on your use case.
Usually you don't need a spare item just for spacing, as you can make another item grow to archive the same result.

[Atr0p0s]

@mzimmers You can also try to use Positioning with Anchors without layouts, where you can bind items together.

For example, this code

import QtQuick

Window {
    id: mainWindow
    visible: true
    width: 800
    height: 640

    Rectangle {
        id: header
        width: parent.width
        height: 80
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
        }

        Text {
            text: "SITE STATUS"
            anchors {
                verticalCenter: img.verticalCenter
                left: parent.left
                leftMargin: 10
            }
        }

        Text {
            text: "My City, My State | 56 F"
            anchors {
                verticalCenter: img.verticalCenter
                right: img.left
                rightMargin: 10
            }
        }

        Image {
            id: img
            source: "qrc:/sun.jpg"
            anchors {
                right: parent.right
                top: parent.top
                topMargin: 10
                rightMargin: 10
            }
        }
    }
}

gives me such result:

[mzimmers]

@lemons said in positioning items within a RowLayout:

inside their assigned space.

Ahhhh...I didn't realize this. I thought the alignment was relevant to the entire layout, not merely the space used by the element. Thanks for the epiphany.

@Atr0p0s thanks for the suggestion. My design is relatively committed to Layouts (for the most part), but I do like your implementation as well.