qml做一个自定义滚动条思路

兼容适配 软件兼容
1

用信号和槽再加几个基本的QML元素就可以做一个自定义滚动条，思路如下：

  1. 需要两个Rectangle，一个做底一个做滚动条的按钮部分。

  2. 在按钮部分增加一个鼠标区域，设置拖动的相关参数

  3. 在拖动时发射自定义信号

  4. 在槽中改变Flickable Element的contentX或contentY，这里提示一下，因为GridView、 ListView等都是派生自Flickable的，所以大家都有contentX和contentY。

import QtQuick 1.1
 
Rectangle {
   id: page
   width: 360
   height: 640
 
   ListModel {
   id: model
   ListElement { title: "1" }
   ListElement { title: "2" }
   ListElement { title: "3" }
   ListElement { title: "4" }
   ListElement { title: "5" }
   ListElement { title: "6" }
   ListElement { title: "7" }
   ListElement { title: "8" }
   }
 
   ListView {
   id: view
   anchors.fill: parent
   anchors.rightMargin: 12
   model: model
   delegate: delegate
   spacing: 5
   }
 
   Component {
   id: delegate
 
   Rectangle {
   width: parent.width
   height: 100
   border.color: "red"
 
   Text {
   anchors.centerIn: parent
   text: title
   font.pointSize: 24
   color: "black"
   }
   }
   }
 
   Rectangle {
   id: scrollbar
   x: 350
   y: 0
   width: 10
   height: 640
   color: "black"
 
   Rectangle {
   id: button
   x: 0
   y: view.visibleArea.yPosition * scrollbar.height
   width: 10
   height: view.visibleArea.heightRatio * scrollbar.height;
   color: "green"
 
   MouseArea {
   id: mouseArea
   anchors.fill: button
   drag.target: button
   drag.axis: Drag.YAxis
   drag.minimumY: 0
   drag.maximumY: scrollbar.height - button.height
 
   onMouseYChanged: {
   view.contentY = button.y / scrollbar.height * view.contentHeight
   }
   }
   }
   }
}