Ubuntu – How to add some padding between a ListView and its footer

application-developmentqml

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.

Best Answer

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:

enter image description here

Related Solutions

Ubuntu – How to dynamically add tab to tabs

I'm afraid that adding tabs dynamically it is currently not possible

The SDK team tell me that this is a limitation of the VisualItemModel type (which the the Tabs component uses), as it does not allow adding children dynamically.

There is an open bug to keep track of this issue.

Ubuntu – Listmodel in QML: How to retain Listmodel values on page switch in page stack

I believe that your problem is that pushing to the stack a filename creates a new object each time, and this new object doesn't share data with any of the previously created objects. Instead, make an instance of the page you want to push in your top level QML file and push it to the page stack each time you want it shown.

Here's an example that I hope illustrates what's going on.

main.qml

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(50)
    height: units.gu(75)

    PageStack {
        id: pageStack

        Page {
            id: page
            title: "Top Page"
            visible: false

            Column {
                anchors.fill: parent
                Button {
                    width: parent.width
                    text: "Open page from object"
                    onClicked: pageStack.push(subPage)
                }

                Button {
                    width: parent.width
                    text: "Open page from file"
                    onClicked: pageStack.push(Qt.resolvedUrl("SubPage.qml"))
                }
            }
        }

        SubPage {
            // This is an instance of the object declared in SubPage.qml.  All you need
            // to do to make this work is have SubPage.qml in the same directory as
            // this QML file.
            id: subPage
            visible: false
        }

        Component.onCompleted: pageStack.push(page)
    }
}

SubPage.qml

import QtQuick 2.0
import Ubuntu.Components 0.1

Page {
    title: "SubPage"

    Component.onCompleted: console.log("Made a new page")

    Button {
        width: parent.width
        property int count: 0
        text: "Clicked %1 times".arg(count)
        onClicked: count += 1
    }
}

Note that the counter on the page loaded from the object persists as you move back and forth in the page stack, while the page loaded from the file has the counter set to 0 each time it is loaded. Additionally, the latter logs a completion event to the console each time, while the former logs this only when the program starts.

Best Answer

Related Solutions

Ubuntu – How to dynamically add tab to tabs

Ubuntu – Listmodel in QML: How to retain Listmodel values on page switch in page stack

Related Question