QML ListView is not scrollable ( if included within a row )

Question

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 }
                }
            }
        }
    }
}
}

Answer 1

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
                }
            }
        }
    }
}