在QML中滾動兩個或多個列表視圖

Question

我需要使用單個滾動條一次滾動兩個或多個列表視圖。最初，我在Flickable裏面使用了Column，但是滾動沒有像預期的那樣發生。後來，我用ListView，甚至沒有正確滾動。

那麼如何使用滾動條滾動列表視圖/佈局內容項？我應該使用ScrollView或Flickable還是別的？

Answer 1

您可以使用Flickable和Columns。 我不知道你的Columns是如何水平排列，但如果他們是裏面它是非常簡單的：

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

即使他們不是在一個你可以這樣做：
contentHeight: Math.max(column1.height, column2.height, ...)

示範：

Answer 2

股票滾動條將只鉤到一個滾動的項目。然而，這是微不足道的做一個自定義的滾動和鉤到它的多個觀點：

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

另一個優點的「慢跑」的方式有它難道不是相對的，但絕對的。這意味着如果您的視圖非常龐大，如果您使用滾動條即使是單個像素可能會導致內容發生大轉變，而以絕對模式工作的慢跑將始終滾動相同數量的像素，而不管內容大小如何方便的地方需要精確度。