QMLで2つ以上のリストビューをスクロール

Question

スクロールバーを使用して2つ以上のリストビューを一度にスクロールする必要があります。最初はFlickableの中にColumnを使用しましたが、期待通りにスクロールしていませんでした。後で、私はListViewを使用し、それでも正しくスクロールしていませんでした。

リストビュー/レイアウトのコンテンツアイテムをスクロールバーでスクロールするにはどうすればよいですか？ ScrollViewまたはFlickableなどを使用する必要がありますか？

Answer 1

にはFlickableを使用できます。
contentHeight: Math.max(column1.height, column2.height, ...)

：彼らはあなたが行うことができに含まれていない場合でも

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

： 私はあなたのColumnsを水平方向にレイアウトされているのか分からないけど、彼らは内にあるかどうか、それはかなり簡単ですデモ：

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

注意質問来る誰かが実際には、同時に複数のビューをスクロールしたいだけの場合には、私はそれにもかかわらず、ジョグホイールに似た別の興味深いアプローチ、何かを共有することになり、それも入れていなかったの実現

リムを持つよりむしろあらゆる方向に無期限に行くことができますスクロールバーのような範囲です。このソリューションは、範囲の範囲に達するまで、2つのビューを同期してスクロールします。 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)) 
     } 
    } 
    } 

「ジョグ」のアプローチは、それは相対的な絶対的ではない、それを持っているもう一つの利点を。つまり、ビューが巨大な場合は、スクロールを使用すると1つのピクセルでも内容が大きく変化する可能性がありますが、絶対モードで動作するジョグは常にコンテンツサイズに関係なく同じピクセル量をスクロールします。精度が要求される場所で便利です。