Come creare la barra di scorrimento in QtQuick 2.0?

Question

Sto cercando di creare una barra di scorrimento in QtQuick 2.0,

ho scoperto che Scrollbar componente è disponibile in QtQuick 1.0, ma non riesco a trovare tale componente in QtQuick 2.0. Come posso creare una barra di scorrimento per ListView in QtQuick 2.0?

Qualsiasi aiuto? Grazie in anticipo.

Answer 1

ScrollBar/ScrollIndicator è facile da fare, e il codice sarebbe identica in QQ1 o QQ2 (tranne l'importazione):

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

usarlo:

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

Enjoy!

Answer 2

penso che questo farà il trucco

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

Ho amato la soluzione TheBootroo (+1 per lui!), Ma ha trovato la sua soluzione solo pochi giorni fa, seguendo un commento a una domanda recente. Nel frattempo, ho sviluppato autonomamente il mio per un progetto a cui stavo lavorando e ho intenzione di condividere una soluzione del genere qui. Spero possa essere utile. :)

La mia barra di scorrimento ha una (sorta di) "sensazione OS X" (prevista). Ecco il codice per la barra di scorrimento:

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

Ed ecco il codice per utilizzarlo. Tutti i campi sono opzionali aspettarsi per il flickable, ovviamente. I valori impostati sono quelli di default:

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

Answer 4

Qt 5.6 introduce nuovi controlli come il technical preview "Qt Labs Controlli". Tra le altre cose, i controlli introducono un tipo integrato ScrollBar (interattivo) e il tipo ScrollIndicator (non interattivo).

In Qt 5.7 i nuovi controlli sono usciti dall'anteprima tecnica e sono ora rinominati "Quick Controls 2", per sottolineare il fatto che hanno prevalso sui precedenti controlli.

Se si utilizza Qt 5.6, che è una versione LTS e sarà in giro per parecchio tempo, ScrollBar può essere utilizzato come segue:

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

considerando che, Qt 5.7 e poi si può usare ScrollBar o ScrollIndicator come segue:

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

sintassi utilizzo è praticamente la stessa, mentre un importante refactoring verificato nel codice designazione come si può vedere in es Controlli Labs ScrollIndicator customization page in confronto a Quick Controls 2 ScrollIndicator customization page.