RowLayout: align one item at right

Tobias Fensch

Hello,

why is this not aligning the red rectangle at the right side of the parent:

RowLayout {
    Layout.fillWidth: true
    Layout.preferredHeight: 32

    Label {
        Layout.preferredHeight: 28
        verticalAlignment: Text.AlignVCenter
        text: qsTr("Skript-Datei:")
    }
    TextField {
        Layout.preferredWidth: 400
        Layout.preferredHeight: 28
        readOnly: true
        text: settings.scriptFilePath
    }
    Button {
        Layout.preferredWidth: 32
        Layout.preferredHeight: 28
        text: "..."
        onClicked: fileDialog.open()
        enabled: !scriptingViewModel.isRunning
    }
    Rectangle {
        Layout.preferredWidth: 60
        Layout.preferredHeight: 28
        Layout.alignment: Qt.AlignRight
        Layout.rightMargin: 40

        color: "red"
    }
}

regards,
Tobias

matzze54

You can try to put some kind of spacing item in between the Button and the Rectangle which fills the remaining width, instead of using Layout.alignment.

[...]

    Button {
        Layout.preferredWidth: 32
        Layout.preferredHeight: 28
        text: "..."
        onClicked: fileDialog.open()
        enabled: !scriptingViewModel.isRunning
    }

    Item {
        // spacer
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        Layout.preferredWidth: 60
        Layout.preferredHeight: 28
        //Layout.alignment: Qt.AlignRight
        Layout.rightMargin: 40

        color: "red"
    }

I do normally use an opposite Layout for such purposes, as they fill height and width by default.

GrecKo

What's the parent of your RowLayout?

matzze54

You can try to put some kind of spacing item in between the Button and the Rectangle which fills the remaining width, instead of using Layout.alignment.

[...]

    Button {
        Layout.preferredWidth: 32
        Layout.preferredHeight: 28
        text: "..."
        onClicked: fileDialog.open()
        enabled: !scriptingViewModel.isRunning
    }

    Item {
        // spacer
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        Layout.preferredWidth: 60
        Layout.preferredHeight: 28
        //Layout.alignment: Qt.AlignRight
        Layout.rightMargin: 40

        color: "red"
    }

I do normally use an opposite Layout for such purposes, as they fill height and width by default.