下面的代码运行正常(感谢 Sylvain),只有在滚动时,ListView 的顶行才会覆盖 buttonRow。有什么想法吗? –
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
}
}
}
}
}
答案1
这可轻弹item 将其子项放置在可以拖动和轻拂的表面上,从而使视图滚动到子项上。此行为构成了旨在显示大量子项的 Item 的基础,例如 ListView 和 GridView。
在传统用户界面中,可以使用标准控件(例如滚动条和箭头按钮)滚动视图。在某些情况下,也可以通过在移动光标的同时按住鼠标按钮来直接拖动视图。在基于触摸的用户界面中,此拖动操作通常与轻拂操作相辅相成,用户停止触摸视图后,滚动仍会继续。
Flickable 不会自动剪辑其内容。如果不将其用作全屏项目,则应考虑设置夹子财产true
。
示例代码现在如下所示:
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
clip: true
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
}
}
}
}
}