我正在尝试在不使用QML中使用ScrollBar组件的情况下制作滚动条。因此，我制作了此组件并将其附加到ListView。但它不会轻拂列表视图项目。
我想要，这个矩形滚动滚动时 ListView或 GridView的内容。
我做了什么？
ist我创建了一个矩形，然后作为IST的孩子创建另一个矩形。并将拖动技术应用于Y轴并设置Y轴的坐标。
我的代码如下：
import QtQuick 2.0
Rectangle{
property bool is_parentDrag: false
property bool is_childDrag: false
id:parent_screen
anchors.fill:parent
color:"#ebeaee"
Rectangle{
id:foot
width:parent.width*0.9
height:parent.height*0.133
color:"#ffffff"
border.width:1
anchors.bottom:parent.bottom
anchors.bottomMargin:lv.height*0.005
anchors.horizontalCenter: parent.horizontalCenter
Rectangle{
width:parent.width*0.125
height:parent.height*0.5
radius:20
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: parent.height*0.2
color:"transparent"
Image{
source: "left_direction_icon.png"
anchors.centerIn: parent
sourceSize.width: parent.width*0.4
sourceSize.height: parent.width*0.4
}
MouseArea{
anchors.fill:parent
onClicked: {
stack.pop()
}
}
}
}
Flickable{
id:flick_1
width:parent.width*0.9
height:parent.height*0.7
anchors.centerIn: parent
flickableDirection:Flickable.HorizontalFlick
boundsBehavior: Flickable.StopAtBounds
ListView{
id:lv
clip:true
boundsBehavior: Flickable.StopAtBounds
height:parent.height
width:parent.width*0.9
anchors.left:parent.left
anchors.leftMargin: parent.width*0.11
model:Data{}
delegate: Rectangle{
id:delg
width:lv.width*0.5
height:lv.height*0.170
Text{
text:txt
anchors.centerIn: parent
font.pixelSize: 22
}
Rectangle{
id:right
width:1
height:parent.height
color:"black"
anchors.right:parent.right
}
Rectangle{
id:bottom
width:parent.width
height:1
color:"black"
anchors.bottom:parent.bottom
}
Rectangle{
id:left
width:1
height:parent.height
color:"black"
anchors.left:parent.left
}
}
Rectangle{
id:scrollbar
width:flick_1.width*0.02
height:flick_1.height
visible: lv.contentHeight>lv.height
radius:width/2
color:"lightgrey"
anchors.right: lv.right
anchors.rightMargin: lv.width*0.1
Rectangle {
id:scroll
Drag.active:is_parentDrag?parent_drag_area.drag.active:is_childDrag?drag_area.drag.active:false
Drag.source: scroll
implicitWidth: parent.width
implicitHeight: parent.height*0.7
radius:width/2
opacity:0.85
color: "grey"
MouseArea{
id:drag_area
anchors.fill:parent
drag.target: scroll
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height-scroll.height
onPressed:{
if(is_childDrag)
is_childDrag=false
else
is_childDrag=true
}
}
}
MouseArea{
id:parent_drag_area
anchors.fill:parent
drag.target: scroll
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height-scroll.height
onPressed:{
if(is_parentDrag)
is_parentDrag=false
else
is_parentDrag=true
}
}
}
// Rectangle {
// id: scrollbar
// //height:parent.height*0.04
// width:parent.width
// radius:width/2
// anchors.bottom: parent.bottom
// y: flick_1.visibleArea.yPosition * flick_1.height
// height: flick_1.visibleArea.heightRatio * flick_1.height*0.04
// color: "lightgrey"
// anchors.bottomMargin: parent.height*0.1
// Rectangle {
// id:scroll
// y: flick_1.visibleArea.yPosition * flick_1.height
// implicitWidth: parent.width*0.7
// implicitHeight: parent.height
// radius:width/2
// opacity:0.85
// color: "grey"
// }
// }
}
}
}
您可以尝试此（从QML材料项目中复制）。
创建一个新的QML文件，称为 scrollBarcustom.qml ：
Item {
id: root
property Flickable flickableItem
property int orientation: Qt.Vertical
property int thickness: 5
property bool moving: flickableItem.moving
property alias currentY: scrollBar.y
width: thickness
height: thickness
clip: true
smooth: true
visible: orientation === Qt.Vertical ? flickableItem.contentHeight > flickableItem.height
: flickableItem.contentWidth > flickableItem.width
anchors {
top: orientation === Qt.Vertical ? flickableItem.top : undefined
bottom: flickableItem.bottom
left: orientation === Qt.Horizontal ? flickableItem.left : undefined
right: flickableItem.right
margins: 2
}
signal stopAnimation
onStopAnimation: {
hideAnimation.stop();
showAnimation.start();
}
signal startAnimation
onStartAnimation: {
hideAnimation.start();
showAnimation.stop();
}
Component.onCompleted: hideAnimation.start()
onMovingChanged: {
if (moving) {
hideAnimation.stop()
showAnimation.start()
} else {
hideAnimation.start()
showAnimation.stop()
}
}
NumberAnimation {
id: showAnimation
target: scrollBar;
property: "opacity";
to: 0.3;
duration: 200;
easing.type: Easing.InOutQuad
}
SequentialAnimation {
id: hideAnimation
NumberAnimation { duration: 500 }
NumberAnimation {
target: scrollBar;
property: "opacity";
to: 0;
duration: 500;
easing.type: Easing.InOutQuad
}
}
onOrientationChanged: {
if (orientation == Qt.Vertical) {
width = thickness
} else {
height = thickness
}
}
Rectangle {
id: scrollBar
property int length: orientation == Qt.Vertical ? root.height
: root.width;
property int targetLength: orientation == Qt.Vertical ? flickableItem.height
: flickableItem.width;
property int contentStart: orientation == Qt.Vertical ? flickableItem.contentY
: flickableItem.contentX;
property int contentLength: orientation == Qt.Vertical ? flickableItem.contentHeight
: flickableItem.contentWidth;
property int start: Math.max(0, length * contentStart/contentLength);
property int end: Math.min(length,
length * (contentStart + targetLength)/contentLength)
color: Theme.accentColor //"black"//theme.foreground
opacity: 0.2
radius: thickness/2
width: Math.max(orientation == Qt.Horizontal ? end - start : 0, thickness)
height: Math.max(orientation == Qt.Vertical ? end - start : 0, thickness)
x: orientation == Qt.Horizontal ? start : 0
y: orientation == Qt.Vertical ? start : 0
}
}
并这样使用：
Flickable {
id: flickable
clip: true
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
ScrollbarCustom {
flickableItem: flickable
}
解决方案是利用Qt Quick Templates 2。该QT模块是QT自己控件Qt Quick Controls 2的基础，并包含可以完全自定义的多个基本UI组件。
在您的情况下，您应该查看ScrollBar以及如何自定义。
您的代码最终可能是这样的：
Flickable {
id: flickable
clip: true
// ...
ScrollBar.vertical: ScrollBar {
id: control
size: 0.3
position: 0.2
active: true
orientation: Qt.Vertical
contentItem: Rectangle {
implicitWidth: 6
implicitHeight: 100
radius: width / 2
color: control.pressed ? "#81e889" : "#c2f4c6"
}
}
}