Как создать полосу прокрутки в QtQuick 2.0?

Question

Я пытаюсь создать скроллбар в QtQuick 2.0

Я обнаружил, что Scrollbar компонент доступен в QtQuick 1.0, но я не могу найти такой компонент в QtQuick 2.0. Как создать полосу прокрутки для ListView в QtQuick 2.0?

Любая помощь? Заранее спасибо.

Answer 1

ScrollBar/ScrollIndicator легко сделать, и код будет идентичен qq1 или QQ2 (за исключением импорта):

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

Чтобы использовать его:

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

Наслаждайтесь!

Answer 2

Я думаю, что это будет делать трюк

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

Loved решение по TheBootroo (+1 для него!), Но нашел свое решение только несколько дней назад, следуя комментарий к последнее время вопрос. Между тем, я самостоятельно разработал мой проект, над которым работал, и я собираюсь поделиться таким решением здесь. Надеюсь, это может быть полезно. :)

В моей полосе прокрутки есть (вроде) «OS X feel» (предназначено). Вот код для прокрутки:

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

И вот код, который необходимо использовать. Очевидно, что все поля являются необязательными. Значения, установленные в них по умолчанию:

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

Answer 4

Qt 5.6 вводит новые элементы управления, как технический просмотр "Qt Labs Controls". Среди прочего, элементы управления вводят встроенный тип ScrollBar (интерактивный) и ScrollIndicator (не интерактивный).

В Qt 5.7 новые элементы управления вышли из технического предварительного просмотра и теперь переименованы в «Quick Controls 2», чтобы подчеркнуть тот факт, что они превосходят предыдущие элементы управления.

Если вы используете Qt 5.6, которая является версией LTS и будет вокруг довольно долго, ScrollBar можно использовать следующим образом:

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

В то время как в Qt 5.7 и далее вы можете использовать ScrollBar или ScrollIndicator следующим образом:

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

синтаксис использования в значительной степени то же самое, тогда как крупный рефакторинг произошло в коде стиля, как можно видеть, например, в Labs Controls ScrollIndicator customization page по сравнению с Quick Controls 2 ScrollIndicator customization page.