How to apply a spicific margin to a ListView footer's content

Question

I'm using the footer property to position my button on it, but when I try to set a left margin to align it with the same column as my left button, I get no result.

I get the same problem when I try to double-click my window, my left button leaves a lot of space.

main.qml:

import QtQuick 2
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts

ApplicationWindow {
    id: applicationWindow
    property string displayedButton: ""
    width: 800
    height: 380
    visible: true

    Page {
        anchors.fill: parent
        id:page

        RowLayout {
            id:rec
            anchors.fill: parent

            ListView {
                anchors.topMargin: 20
                y:10
                id: leftMenuBar
                Layout.preferredWidth: 90
                Layout.fillHeight: true
                clip: true
                spacing: 10
                Repeater {
                    model: 3
                    delegate: Button{
                        implicitHeight: 90
                        implicitWidth: 90
                        text: "Button " + (index + 1)
                        onClicked: displayedButton = text

                        Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                    }
                }

                Layout.alignment: Qt.AlignLeft
                Layout.leftMargin: 20
            }

            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true

                Rectangle {
                    anchors.fill: parent
                    anchors.margins: 12
                    border.width: 2
                    border.color: "lightgray"
                    radius: 35

                    Text {
                        anchors.centerIn: parent
                        text: "Selected Button: " + displayedButton
                        font.pixelSize: 20
                    }
                }
            }
        }

        footer: RowLayout {
            width: 500

            Repeater {
                model: 8
                delegate: Button{
                    implicitHeight: 90
                    implicitWidth: 90
                    text: "Button " + (index + 1)
                    onClicked: displayedButton = text

                    Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                }
            }
        }
    }
}

Answer 1

If you want to align your bottom buttons with the rectangle, don't put the buttons in the footer, but instead, use a GridLayout.

Page {
    anchors.fill: parent
    id:page

    GridLayout {
        id:rec
        anchors.fill: parent
        columns: 2

        ListView {
            anchors.topMargin: 20
            y:10
            id: leftMenuBar
            Layout.preferredWidth: 90
            Layout.fillHeight: true
            clip: true
            spacing: 10
            Repeater {
                model: 3
                delegate: Button{
                    implicitHeight: 90
                    implicitWidth: 90
                    text: "Button " + (index + 1)
                    onClicked: displayedButton = text



                    Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                }
            }

            Layout.alignment: Qt.AlignLeft
            Layout.leftMargin: 20
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            Rectangle {
                anchors.fill: parent
                anchors.margins: 12
                border.width: 2
                border.color: "lightgray"
                radius: 35

                Text {
                    anchors.centerIn: parent
                    text: "Selected Button: " + displayedButton
                    font.pixelSize: 20
                }
            }
        }

        // Placeholder item to align footer buttons
        Item {

        }

        RowLayout {
            Repeater {
                model: 8
                delegate: Button{
                    implicitHeight: 90
                    implicitWidth: 90
                    text: "Button " + (index + 1)
                    onClicked: displayedButton = text

                    Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
                }
            }
        }
    }
}

Answer 2

If you don't want it to stretch, you have some choices:

1. Use Row instead of RowLayout, OR
2. Use a dummy Item { Layout.fillWidth: true } inside your RowLayout immediately after your Repeater