Как заставить Rectangle вести себя как полоса прокрутки в qml - PullRequest
Новая
       34

Как заставить Rectangle вести себя как полоса прокрутки в qml

0 голосов
/ 20 декабря 2018

Я пытаюсь создать полосу прокрутки, не используя ScrollBar Компонент в QML.Итак, я сделал этот компонент и приложил к ListView.Но он не перелистывает элементы списка.

Я хочу, этот прямоугольник прокручивает содержимое ListView или GridView при прокрутке.

Что я сделал?

Сначала я создаю прямоугольник, а затем создаю другой прямоугольник как потомок первого.И применил метод перетаскивания по оси 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"
//                }
//            }
        }




    }
}

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Решение состоит в том, чтобы использовать кредит Qt Quick Templates 2.Этот модуль Qt является базой собственных элементов управления Qt Qt Quick Controls 2 и содержит несколько базовых компонентов пользовательского интерфейса, которые могут быть полностью настроены.

В вашем случае вам следует взглянуть на 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"
        }
    }
}
0 голосов
/ 20 декабря 2018

Вы можете попробовать это (скопировано из QML Material Project).

Создать новый 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
      }
...