我需要使用单个滚动条一次滚动两个或多个列表视图。最初，我在Flickable 中使用了Column，但滚动没有按预期发生。后来，我使用了ListView，即使这样也不能正确滚动。
那么如何使用滚动条滚动列表视图/布局内容项？我应该使用ScrollView 或Flickable 还是其他？
【问题讨论】：
Column + Flickable 没有按预期滚动？
Flickable contentHeight 设置为相同然后它可以工作！ .就我而言，我应该每次都这样做，因为所有项目都动态插入到列中。
标签： qt listview qml qtquick2 flickable
库存滚动条只会挂接到单个可滚动项。但是，制作自定义滚动条并将多个视图挂接到它是微不足道的：
Row {
Flickable {
width: 50
height: main.height
contentHeight: contentItem.childrenRect.height
interactive: false
contentY: (contentHeight - height) * scroller.position
Column {
spacing: 5
Repeater {
model: 20
delegate: Rectangle {
width: 50
height: 50
color: "red"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
Flickable {
width: 50
height: main.height
contentHeight: contentItem.childrenRect.height
interactive: false
contentY: (contentHeight - height) * scroller.position
Column {
spacing: 5
Repeater {
model: 30
delegate: Rectangle {
width: 50
height: 50
color: "cyan"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
Rectangle {
id: scroller
width: 50
height: 50
color: "grey"
property real position: y / (main.height - 50)
MouseArea {
anchors.fill: parent
drag.target: parent
drag.minimumY: 0
drag.maximumY: main.height - 50
drag.axis: Drag.YAxis
}
}
}
请注意，即使视图具有不同的内容高度，它也可以正常工作，相对于滚动条位置滚动每个视图：
意识到这个问题没有说得那么好，以防万一有人想同时滚动多个视图，我仍然会分享另一种有趣的方法，类似于缓动盘，可以无限期地向各个方向移动而不是像滚动条那样具有有限的范围。此解决方案将同步滚动两个视图，直到它们达到其范围的范围。与 GrecKo 的回答不同，当视图大小不同时，这永远不会给您留下“空视图”：
Row {
Flickable {
id: f1
width: 50
height: main.height
contentHeight: contentItem.childrenRect.height
interactive: false
Connections {
target: jogger
onScroll: f1.contentY = Math.max(0, Math.min(f1.contentHeight - f1.height, f1.contentY + p))
}
Column {
spacing: 5
Repeater {
model: 20
delegate: Rectangle {
width: 50
height: 50
color: "red"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
Flickable {
id: f2
width: 50
height: main.height
contentHeight: contentItem.childrenRect.height
interactive: false
Connections {
target: jogger
onScroll: f2.contentY = Math.max(0, Math.min(f2.contentHeight - f2.height, f2.contentY + p))
}
Column {
spacing: 5
Repeater {
model: 30
delegate: Rectangle {
width: 50
height: 50
color: "cyan"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
MouseArea {
id: jogger
width: 50
height: main.height
drag.target: knob
drag.minimumY: 0
drag.maximumY: main.height - 50
drag.axis: Drag.YAxis
signal scroll(real p)
property real dy: 0
onPressed: dy = mouseY
onPositionChanged: {
scroll(dy - mouseY)
dy = mouseY
}
onScroll: console.log(p)
Rectangle {
anchors.fill: parent
color: "lightgrey"
}
Rectangle {
id: knob
visible: parent.pressed
width: 50
height: 50
color: "grey"
y: Math.max(0, Math.min(parent.mouseY - 25, parent.height - height))
}
}
}
“慢跑”方法的另一个优点是它不是相对的，而是绝对的。这意味着如果您的视图很大，如果您使用滚动条，即使是单个像素也可能导致内容发生很大变化，而在绝对模式下运行的慢跑将始终滚动相同数量的像素，而不管内容大小，即在需要精度的地方很方便。
【讨论】：
您可以将Flickable 与您的Columns 一起使用。
我不知道你的 Columns 是如何水平布局的，但如果它们在 Row 内，那就很简单了：
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Multi Column")
Flickable {
anchors.fill: parent
contentWidth: row.implicitWidth
contentHeight: row.implicitHeight
Row {
id: row
Column {
spacing: 5
Repeater {
model: 20
delegate: Rectangle {
width: 50
height: 50
color: "red"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
Column {
spacing: 5
Repeater {
model: 30
delegate: Rectangle {
width: 50
height: 50
color: "cyan"
Text {
anchors.centerIn: parent
text: index
}
}
}
}
}
ScrollBar.vertical: ScrollBar { }
}
}
即使他们不在Row 中，您也可以这样做：contentHeight: Math.max(column1.height, column2.height, ...)
演示：
【讨论】：