qml自定义switch_qml: 自定义滚动条；

注：  该博文为原创博文，转载请注明，摘用请随意；

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