Wie erstellt man eine Bildlaufleiste in QtQuick 2.0?

Question

Ich versuche, eine Bildlaufleiste in QtQuick 2.0

ich gefunden zu schaffen, dass Scrollbar Komponente in QtQuick 1.0 verfügbar ist, aber ich kann nicht eine solche Komponente in QtQuick 2.0 finden. Wie kann ich Scrollbar für ListView in QtQuick 2.0 erstellen?

Irgendwelche Hilfe? Danke im Voraus.

Answer 1

ScrollBar/ScrollIndicator ist einfach zu tun, und der Code würde in QQ1 oder QQ2 (mit Ausnahme der Import) identisch sein:

///////// ScrollBar.qml ////// ////////

import QtQuick 2.0; 

Item { 
    id: scrollbar; 
    width: (handleSize + 2 * (backScrollbar.border.width +1)); 
    visible: (flickable.visibleArea.heightRatio < 1.0); 
    anchors { 
     top: flickable.top; 
     right: flickable.right; 
     bottom: flickable.bottom; 
     margins: 1; 
    } 

    property Flickable flickable    : null; 
    property int  handleSize    : 20; 

    function scrollDown() { 
     flickable.contentY = Math.min (flickable.contentY + (flickable.height/4), flickable.contentHeight - flickable.height); 
    } 
    function scrollUp() { 
     flickable.contentY = Math.max (flickable.contentY - (flickable.height/4), 0); 
    } 

    Binding { 
     target: handle; 
     property: "y"; 
     value: (flickable.contentY * clicker.drag.maximumY/(flickable.contentHeight - flickable.height)); 
     when: (!clicker.drag.active); 
    } 
    Binding { 
     target: flickable; 
     property: "contentY"; 
     value: (handle.y * (flickable.contentHeight - flickable.height)/clicker.drag.maximumY); 
     when: (clicker.drag.active || clicker.pressed); 
    } 
    Rectangle { 
     id: backScrollbar; 
     radius: 2; 
     antialiasing: true; 
     color: Qt.rgba(0.5, 0.5, 0.5, 0.85); 
     border { 
      width: 1; 
      color: "darkgray"; 
     } 
     anchors { fill: parent; } 

     MouseArea { 
      anchors.fill: parent; 
      onClicked: { } 
     } 
    } 
    MouseArea { 
     id: btnUp; 
     height: width; 
     anchors { 
      top: parent.top; 
      left: parent.left; 
      right: parent.right; 
      margins: (backScrollbar.border.width +1); 
     } 
     onClicked: { scrollUp(); } 

     Text { 
      text: "V"; 
      color: (btnUp.pressed ? "blue" : "black"); 
      rotation: -180; 
      anchors.centerIn: parent; 
     } 
    } 
    MouseArea { 
     id: btnDown; 
     height: width; 
     anchors { 
      left: parent.left; 
      right: parent.right; 
      bottom: parent.bottom; 
      margins: (backScrollbar.border.width +1); 
     } 
     onClicked: { scrollDown(); } 

     Text { 
      text: "V"; 
      color: (btnDown.pressed ? "blue" : "black"); 
      anchors.centerIn: parent; 
     } 
    } 
    Item { 
     id: groove; 
     clip: true; 
     anchors { 
      fill: parent; 
      topMargin: (backScrollbar.border.width +1 + btnUp.height +1); 
      leftMargin: (backScrollbar.border.width +1); 
      rightMargin: (backScrollbar.border.width +1); 
      bottomMargin: (backScrollbar.border.width +1 + btnDown.height +1); 
     } 

     MouseArea { 
      id: clicker; 
      drag { 
       target: handle; 
       minimumY: 0; 
       maximumY: (groove.height - handle.height); 
       axis: Drag.YAxis; 
      } 
      anchors { fill: parent; } 
      onClicked: { flickable.contentY = (mouse.y/groove.height * (flickable.contentHeight - flickable.height)); } 
     } 
     Item { 
      id: handle; 
      height: Math.max (20, (flickable.visibleArea.heightRatio * groove.height)); 
      anchors { 
       left: parent.left; 
       right: parent.right; 
      } 

      Rectangle { 
       id: backHandle; 
       color: (clicker.pressed ? "blue" : "black"); 
       opacity: (flickable.moving ? 0.65 : 0.35); 
       anchors { fill: parent; } 

       Behavior on opacity { NumberAnimation { duration: 150; } } 
      } 
     } 
    } 
} 

es zu benutzen:

import QtQuick 2.0; 

Rectangle { 
    width: 400; 
    height: 300; 

    ListView { 
     id: list; 
     anchors.fill: parent; 
     model: 100; 
     delegate: Rectangle { 
      height: 50; 
      width: parent.width; 
      color: (model.index %2 === 0 ? "darkgray" : "lightgray"); 
     } 
    } 
    ScrollBar { 
     flickable: list; 
    } 
} 

Viel Spaß!

Answer 2

ich denke, das wird

http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-scrollview.html

import QtQuick 2.0 
import QtQuick.Controls 1.0 
ScrollView{ 
    ListView { 
     ... 
    } 
} 

Answer 3

Liebte die Lösung von TheBootroo (+1 für ihn!) Den Trick aber seine Lösung nur wenige vor Tagen gefunden, um einen Kommentar zu einem folgenden letzte Frage. Inzwischen habe ich selbständig für ein Projekt entwickelt, an dem ich gearbeitet habe, und ich werde eine solche Lösung hier teilen. Ich hoffe, es kann nützlich sein. :)

Meine Bildlaufleiste hat eine (Art) "OS X fühlen" (beabsichtigt). Hier ist der Code für die Bildlaufleiste:

import QtQuick 2.0 

Item { 
    id: scrollbar 

    property Flickable flk : undefined 
    property int basicWidth: 10 
    property int expandedWidth: 20 
    property alias color : scrl.color 
    property alias radius : scrl.radius 

    width: basicWidth 
    anchors.right: flk.right; 
    anchors.top: flk.top 
    anchors.bottom: flk.bottom 

    clip: true 
    visible: flk.visible 
    z:1 

    Binding { 
     target: scrollbar 
     property: "width" 
     value: expandedWidth 
     when: ma.drag.active || ma.containsMouse 
    } 
    Behavior on width {NumberAnimation {duration: 150}} 

    Rectangle { 
     id: scrl 
     clip: true 
     anchors.left: parent.left 
     anchors.right: parent.right 
     height: flk.visibleArea.heightRatio * flk.height 
     visible: flk.visibleArea.heightRatio < 1.0 
     radius: 10 
     color: "gray" 

     opacity: ma.pressed ? 1 : ma.containsMouse ? 0.65 : 0.4 
     Behavior on opacity {NumberAnimation{duration: 150}} 

     Binding { 
      target: scrl 
      property: "y" 
      value: !isNaN(flk.visibleArea.heightRatio) ? (ma.drag.maximumY * flk.contentY)/(flk.contentHeight * (1 - flk.visibleArea.heightRatio)) : 0 
      when: !ma.drag.active 
     } 

     Binding { 
      target: flk 
      property: "contentY" 
      value: ((flk.contentHeight * (1 - flk.visibleArea.heightRatio)) * scrl.y)/ma.drag.maximumY 
      when: ma.drag.active && flk !== undefined 
     } 

     MouseArea { 
      id: ma 
      anchors.fill: parent 
      hoverEnabled: true 
      drag.target: parent 
      drag.axis: Drag.YAxis 
      drag.minimumY: 0 
      drag.maximumY: flk.height - scrl.height 
      preventStealing: true 
     } 
    } 
} 

Und hier ist der Code, um es zu verwenden. Alle Felder sind optional für das Flickable zu erwarten, natürlich. Werte eingestellt sind die Standardeinstellungen:

ScrollBar { 
    flk: privacyFlick 
    radius: 10   // Optional 
    basicWidth: 10  // Optional 
    expandedWidth: 20 // Optional 
    color: "grey"  // Optional 
} 

Answer 4

Qt 5.6 neue Bedienungselemente wie die technische Vorschau "Qt Labs Controls". Unter anderem führen die Kontrollen einen eingebauten Typ (interaktiv) ScrollBar und ScrollIndicator ein (nicht interaktiv).

In Qt 5.7 haben neue Steuerelemente die technische Vorschau verlassen und wurden nun in "Quick Controls 2" umbenannt, um die Tatsache zu betonen, dass sie die vorherigen Steuerelemente übertrafen.

Wenn Sie Qt 5.6 verwenden, die eine LTS-Version und wird um irgendwann für recht sein kann ScrollBar wie folgt verwendet werden:

import QtQuick 2.6 
import Qt.labs.controls 1.0 
import QtQuick.Window 2.2 

ApplicationWindow { 
    visible: true 
    width: 400 
    height: 600 

    Flickable { 
     anchors.fill: parent 
     contentWidth: image.width 
     contentHeight: image.height 

     //ScrollIndicator.vertical: ScrollIndicator { } // uncomment to test 
     ScrollBar.vertical: ScrollBar { } 
     ScrollBar.horizontal: ScrollBar { } 

     Image { 
      id: image 
      source: "http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" 
     } 
    } 
} 

Während in Qt 5.7 und weiter können Sie ScrollBar oder ScrollIndicator verwenden wie folgt:

import QtQuick 2.6 
import QtQuick.Controls 2.0 
import QtQuick.Window 2.2 

ApplicationWindow { 
    visible: true 
    width: 600 
    height: 300 

    Flickable { 
     anchors.fill: parent 
     contentWidth: image.width 
     contentHeight: image.height 

     ScrollIndicator.vertical: ScrollIndicator { } 
     //ScrollBar.vertical: ScrollBar { }  // uncomment to test  

     Image { 
      id: image 
      source: "http://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg" 
     } 
    } 
} 

Usage Syntax so ziemlich das gleiche ist, während eine große Refactoring im Styling Code aufgetreten wie in Beispiel gesehen werden Labs Controls ScrollIndicator customization page im Vergleich zu Quick Controls 2 ScrollIndicator customization page.