以下のコードは、列と行内でListViewを使用しています。ただし、ListViewはスクロールできません。なぜだろうか?
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 }
}
}
}
}
}
}
このバージョンでは、最後のRow
をItem
要素のみに置き換えました。
Scrollbar
コンポーネントも追加しました。
Scrollbar {
flickableItem: list
align: Qt.AlignTrailing
}
ListView はFlickable
を継承するため、Scrollbar
を追加すると垂直スクロールが有効になります。
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
}
}
}
}
}