How to add some padding between a ListView and its footer?

Question

Consider the following QML snippet:

ListView {
    //...

    footer: Text {
        text: "Sample Text"
    }
}

This will display the text "Sample Text" directly at the bottom of the ListView. However, there is no space between the last item in the list and the text.

How do I add some spacing/padding? I've tried setting anchors.top and anchors.topMargin but all that does is give me the "Possible anchor loop detected on vertical anchor" warning. Nothing seems to work.

Solution 1

I'm using the ContactModel.qml available in the SDK example.

To add some spacing between your footer and the last list element you can create a dedicated component for your footer and modify the layout the way you want inside it:

import QtQuick 2.0
import Ubuntu.Components 0.1

Item {
    width: 200
    height: 350

    ListView {
        width: 180; height: 200
        model: ContactModel {}
        delegate: Text {
            text: name + ": " + number
        }

        Component {
            id: myfooter
            Item {
                width: parent.width
                height: units.gu(3)
                Text {
                    anchors.bottom: parent.bottom
                    text: "Sample Text"
                }
            }
        }

        footer: myfooter
    }
}

The result:

Solution 2

What I ended up doing was creating a Column and inserting a Rectangle before the content I wanted to appear in the footer:

Rectangle {
    color: "transparent"
    width: parent.width
    height: units.gu(3)
}

Comments

[Nathan Osman]

This is what I tried. The major difference is that I didn't specify a height for the footer component - I'd prefer not to hardcode a height value since it will cut off content if it is larger than the specified value.