0

我正在尝试在不使用ScrollBarQML 中的组件的情况下制作滚动条。所以我制作了这个组件并附加到ListView. 但它不会轻弹列表视图项目。

我想要,这个矩形滚动ListView或滚动的内容GridView

我做了什么?

我是否创建了一个矩形,然后将另一个矩形作为 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"
//                }
//            }
        }




    }
}
4

2 回答 2

0

一个解决方案是利用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"
        }
    }
}
于 2018-12-20T12:50:06.347 回答
0

你可以试试这个(从 QML Material Project 复制)。

创建一个名为ScrollbarCustom.qml的新 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
      }
于 2018-12-20T08:51:36.850 回答