注： 该博文为原创博文，转载请注明，摘用请随意；
qml自带的滚动条不太好用；
首先，利用canvas绘制滚动条两端的箭头:
import QtQuick 2.0
Canvas {
width: 20;
height: 20;
property real dir: 0; //0: up; 1: right; 2: down; 3: left;
onPaint: {
var ctx = getContext("2d")
ctx.fillStyle = Qt.rgba(0.1,0.1,0.1,0.7);
ctx.clearRect(0,0,width,height)
ctx.fillRect(0,0,width,height)
ctx.beginPath();
switch(dir)
{
case 0: //up;
ctx.moveTo(width/2,1/4 * height);
ctx.lineTo(width/4,3/4 * height);
ctx.lineTo(width * 3/4, 3/4 * height);
ctx.lineTo(width/2,1/4 *height);
break;
case 1: //right;
ctx.moveTo(width * 3/4,1/2 * height);
ctx.lineTo(width/4,1/4 * height);
ctx.lineTo(width/4, 3/4 * height);
ctx.lineTo(width * 3/4,1/2 *height);
break;
case 2: //down;
ctx.moveTo(width/2,3/4 * height);
ctx.lineTo(width * 3/4,1/4 * height);
ctx.lineTo(width * 1/4, 1/4 * height);
ctx.lineTo(width/2,3/4 *height);
break;
case 3: //left;
ctx.moveTo(width/4,1/2 * height);
ctx.lineTo(width *3/4,3/4 * height);
ctx.lineTo(width * 3/4, 1/4 * height);
ctx.lineTo(width/4,1/2 *height);
break;
}
ctx.closePath();
ctx.fillStyle = Qt.rgba(1,1,1,0.7);
ctx.fill();
}
}
然后，自定义整个滚动条：
import QtQuick 2.0
Rectangle {
property Item attachItem;
property bool bHScroll: false;
property real barSize : 20;
property bool bSpace: false; //是否留空；
property real size: 1;
color:Qt.rgba(0.1,0.1,0.1,0.1);
border.color:Qt.rgba(0.8,0.8,0.8,0.8);
border.width: 1;
width: bHScroll ? attachItem.width : barSize;
height: bHScroll ? barSize : attachItem.height;
anchors{
left: bHScroll ? attachItem.left : undefined;
right: attachItem.right;
top: bHScroll? undefined : attachItem.top;
bottom: attachItem.bottom;
rightMargin: bHScroll? (bSpace? barSize: 0): undefined;
bottomMargin: bHScroll? undefined: (bSpace? barSize: 0)
}
function scroll(dir)
{
var step;
if( bHScroll)
{
step= (scrollBtnArea.width - btnRect.width)/10;
if( dir < 0 ) //left scroll;
btnRect.x= btnRect.x - step > 0? btnRect.x - step : 0;
else
btnRect.x = btnRect.x + step < scrollBtnArea.width - btnRect.width? btnRect.x + step : scrollBtnArea.width - btnRect.width ;
}else{
step = (scrollBtnArea.height - btnRect.height)/10;
if( dir < 0 )
btnRect.y = btnRect.y - step >0 ? btnRect.y - step: 0 ;
else
btnRect.y = btnRect.y + step < scrollBtnArea.height - btnRect.height? btnRect.y + step : scrollBtnArea.height - btnRect.height;
}
}
Arrow{
id: arrow1;
anchors{
left: parent.left;
top: parent.top;
bottom: bHScroll ? parent.bottom : undefined;
right: bHScroll ? undefined:parent.right;
}
width: barSize;
height: barSize;
dir: bHScroll? 3: 0;
MouseArea{
anchors.fill: parent;
onClicked:{
var step =2;
if(bHScroll)
{
btnRect.x = btnRect.x - step > 0? btnRect.x - step : 0;
}else{
btnRect.y = btnRect.y - step >0 ? btnRect.y - step: 0 ;
}
}
}
}
Rectangle{
id: scrollBtnArea;
color:Qt.rgba(0.1,0.1,0.1,0.7);
anchors{
left: bHScroll? arrow1.right : parent.left;
right: bHScroll? arrow2.left : parent.right;
top: bHScroll? parent.top: arrow1.bottom;
bottom: bHScroll? parent.bottom : arrow2.top;
}
Rectangle{
id: btnRect;
x: bHScroll? 0 : 2;
y: bHScroll? 2: 0;
width: bHScroll? parent.width/size : barSize -4;
height: bHScroll? barSize -4 : parent.height/size;
color:Qt.rgba(0.1,0.1,0.1,0.7);
border.color: Qt.rgba(1,1,1,0.2);
border.width: 1;
onXChanged:{
if(bHScroll)
{
var children = attachItem.children;
for( var child in children)
{
var ratio =btnRect.x/(arrow2.x - btnRect.width)
children[child].x= - ratio * ( size - 1) * attachItem.width ;
console.log("x changed:"+ btnRect.x +";"+arrow1.x+";"+arrow1.width+";"+arrow2.x +";" + btnRect.width+";"+ratio + ";"+ children[child].x +";" + size + ";" + attachItem.width);
}
}
}
onYChanged:{
console.log("y changed");
if( !bHScroll)
{
var children = attachItem.children;
for( var child in children)
{
children[child].y = -btnRect.y/(arrow2.y - btnRect.height) * ( size- 1) * attachItem.height;
}
}
}
}
MouseArea{
id:mouseFunc;
hoverEnabled: true;
anchors.fill: parent;
acceptedButtons: Qt.AllButtons
drag.target: btnRect;
drag.axis: bHScroll? Drag.XAxis : Drag.YAxis;
drag.minimumX: 0
drag.maximumX: bHScroll? arrow2.x - btnRect.width: 0;
drag.minimumY: 0
drag.maximumY: bHScroll? 0: arrow2.y - btnRect.height ;
onWheel:{
console.log(" mouse wheel event")
var step;
if( bHScroll )
{
step= (parent.width - btnRect.width)/10;
if( wheel.angleDelta.y > 0 )
btnRect.x= btnRect.x - step > 0? btnRect.x - step : 0;
else
btnRect.x = btnRect.x + step < parent.width - btnRect.width? btnRect.x + step : parent.width - btnRect.width ;
}else
{
step = (parent.height - btnRect.height)/10;
if(wheel.angleDelta.y >0 )
btnRect.y = btnRect.y - step >0 ? btnRect.y - step: 0 ;
else
btnRect.y = btnRect.y + step < parent.height - btnRect.height? btnRect.y + step : parent.height - btnRect.height;
}
}
onClicked:{
var step
if(bHScroll)
{
step= (parent.width - btnRect.width)/10;
if( mouseX < btnRect.x)
{
btnRect.x = btnRect.x - step > 0? btnRect.x - step : 0;
}else if( mouseX > btnRect.x )
{
btnRect.x = btnRect.x + step < parent.width - btnRect.width? btnRect.x + step : parent.width - btnRect.width ;
}
}else{
step = (parent.height - btnRect.height)/10;
if( mouseY < btnRect.y )
{
btnRect.y = btnRect.y - step >0 ? btnRect.y - step: 0 ;
}else if(mouseY > btnRect.y){
btnRect.y = btnRect.y + step < parent.height - btnRect.height? btnRect.y + step : parent.height - btnRect.height;
}
}
}
}
}
Arrow{
id: arrow2;
anchors{
left: bHScroll?undefined: parent.left;
top: bHScroll? parent.top: undefined;
bottom: parent.bottom;
right: parent.right;
}
width: barSize;
height: barSize;
dir: bHScroll?1:2;
MouseArea{
anchors.fill: parent;
onClicked:{
var step = 2;
if(bHScroll)
{
btnRect.x = btnRect.x + step < scrollBtnArea.width - btnRect.width? btnRect.x + step : scrollBtnArea.width -btnRect.width;
}else{
btnRect.y = btnRect.y + step < scrollBtnArea.height - btnRect.height? btnRect.y + step : scrollBtnArea.height - btnRect.height;
}
}
}
}
}
使用实例：
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 700
title: qsTr("Hello World")
Rectangle {
id: frame
clip: true
width: 200
height: 200
border.color: "black"
anchors.centerIn: parent
Image {
id: content;
source: "tvline.jpg"
width: 500;
height: 500;
}
MouseArea{
anchors.fill: parent;
onWheel:{
if(wheel.modifiers & Qt.ControlModifier)
{
if( wheel.angleDelta.y > 0)
hscroll.scroll(-1);
else
hscroll.scroll(1);
return;
}
//单纯的滚动；
if( wheel.angleDelta.y > 0)
vscroll.scroll(-1)
else
vscroll.scroll(1)
}
}
}
UI_ScrollBar{
id: vscroll;
visible: content.height > frame.height;
attachItem: frame;
bHScroll: false;
bSpace: hscroll.visible;
size: content.height/frame.height;
}
UI_ScrollBar{
id:hscroll;
visible:content.width > frame.width;
attachItem: frame;
bHScroll: true;
bSpace: vscroll.visible;
size: content.width/frame.width;
}
}