2

Below code is using ListView within a Column and Row. But the ListView is not scrolable. Any idea why ?

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
width: units.gu(60)
height: units.gu(60)

Page {
    id: test

    Column {
        spacing: units.gu(1)
        id: pageLayout
        anchors {
            margins: units.gu(2)
            fill: parent
        }

        Row {
            id: buttonRow
            spacing: units.gu(1)
            Button {
                objectName: "button1"
                color: "white"
                text: i18n.tr("Help")
            }
            Button {
                objectName: "button2"
                color: "black"
                text: i18n.tr("Search")
            }
        }

        Row {
            id: listarea
            spacing: units.gu(1)
            anchors.top: buttonRow.bottom
            height: myList.count * units.gu(2)

            ListModel {
                id: fruitModel
                ListElement {
                    name: "Apple"
                    cost: 2.45
                }
                ListElement {
                    name: "Orange"
                    cost: 3.25
                }
                ListElement {
                    name: "Banana"
                    cost: 1.95
                }
            }

            ListView {
                id: myList
                anchors.fill: parent
                model: fruitModel
                delegate: Row {
                    Text { text: "Fruit: " + name }
                    Text { text: "Cost: $" + cost }
                }
            }
        }
    }
}
}
2

In this version I replaced the last Row by just an Item element.

I also added a Scrollbar component:

Scrollbar {
    flickableItem: list
    align: Qt.AlignTrailing
}

As ListView inherits Flickable, adding the Scrollbar enables the Vertical scroll.

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(60)
    height: units.gu(60)

    ListModel {
        id: fruitModel
        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    Page {
        id: test

        Column {
            spacing: units.gu(1)
            id: pageLayout
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Row {
                id: buttonRow
                spacing: units.gu(1)
                Button {
                    objectName: "button1"
                    color: "white"
                    text: i18n.tr("Help")
                }
                Button {
                    objectName: "button2"
                    color: "black"
                    text: i18n.tr("Search")
                }
            }

            Item {
                anchors.top: buttonRow.bottom
                ListView {
                    id: list
                    width: units.gu(18)
                    height: units.gu(3)
                    model: fruitModel
                    boundsBehavior: Flickable.StopAtBounds
                    delegate: Row {
                        Text { text: "Fruit: " + name }
                        Text { text: "Cost: $" + cost }
                    }
                }
                Scrollbar {
                    flickableItem: list
                    align: Qt.AlignTrailing
                }
            }
        }
    }
}
2
  • it's working super, only when scroling, the top row from the ListView overwrite the buttonRow. Any idea ? – user262898 Apr 12 '14 at 19:39
  • Could you create a new question to cover the overwrite issue please? – Sylvain Pineau Apr 12 '14 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.