Scrollbar with touch support on android for qml



  • hi dears
    i want a scrollbar with touch support on android for qml, i found this code that works find only when i set the listview horizontall or vertical
    but i can't set it both at the same time.
    what should i do to make it work horizontall and vertically at the same time?
    do you have any suggestion?
    does scrollview have touch support on android?how to use it?
    @import QtQuick 2.0;

    Item {
    id: scrollbar;
    width: (handleSize + 2 * (backScrollbar.border.width +1));
    visible: (flickable.visibleArea.heightRatio < 1.0);
    anchors {
    top: flickable.top;
    right: flickable.right;
    bottom: flickable.bottom;
    margins: 1;
    }

    property Flickable flickable               : null;
    property int       handleSize              : 20;
    
    function scrollDown () {
        flickable.contentY = Math.min (flickable.contentY + (flickable.height / 4), flickable.contentHeight - flickable.height);
    }
    function scrollUp () {
        flickable.contentY = Math.max (flickable.contentY - (flickable.height / 4), 0);
    }
    

    Binding {
    target: handle;
    property: "y";
    value: (flickable.contentY * clicker.drag.maximumY / (flickable.contentHeight - flickable.height));
    when: (!clicker.drag.active);
    }
    Binding {
    target: flickable;
    property: "contentY";
    value: (handle.y * (flickable.contentHeight - flickable.height) / clicker.drag.maximumY);
    when: (clicker.drag.active || clicker.pressed);
    }
    Rectangle {
    id: backScrollbar;
    radius: 2;
    antialiasing: true;
    color: Qt.rgba(0.5, 0.5, 0.5, 0.85);
    border {
    width: 1;
    color: "darkgray";
    }
    anchors { fill: parent; }

        MouseArea {
            anchors.fill: parent;
            onClicked: { }
        }
    }
    MouseArea {
        id: btnUp;
        height: width;
        anchors {
            top: parent.top;
            left: parent.left;
            right: parent.right;
            margins: (backScrollbar.border.width +1);
        }
        onClicked: { scrollUp (); }
    
        Text {
            text: "V";
            color: (btnUp.pressed ? "blue" : "black");
            rotation: -180;
            anchors.centerIn: parent;
        }
    }
    MouseArea {
        id: btnDown;
        height: width;
        anchors {
            left: parent.left;
            right: parent.right;
            bottom: parent.bottom;
            margins: (backScrollbar.border.width +1);
        }
        onClicked: { scrollDown (); }
    
        Text {
            text: "V";
            color: (btnDown.pressed ? "blue" : "black");
            anchors.centerIn: parent;
        }
    }
    Item {
        id: groove;
        clip: true;
        anchors {
            fill: parent;
            topMargin: (backScrollbar.border.width +1 + btnUp.height +1);
            leftMargin: (backScrollbar.border.width +1);
            rightMargin: (backScrollbar.border.width +1);
            bottomMargin: (backScrollbar.border.width +1 + btnDown.height +1);
        }
    
        MouseArea {
            id: clicker;
            drag {
                target: handle;
                minimumY: 0;
                maximumY: (groove.height - handle.height);
                axis: Drag.YAxis;
            }
            anchors { fill: parent; }
            onClicked: { flickable.contentY = (mouse.y / groove.height * (flickable.contentHeight - flickable.height)); }
        }
        Item {
            id: handle;
            height: Math.max (20, (flickable.visibleArea.heightRatio * groove.height));
            anchors {
                left: parent.left;
                right: parent.right;
            }
    
            Rectangle {
                id: backHandle;
                color: (clicker.pressed ? "blue" : "black");
                opacity: (flickable.moving ? 0.65 : 0.35);
                anchors { fill: parent; }
    
                Behavior on opacity { NumberAnimation { duration: 150; } }
            }
        }
    }
    

    }
    @
    usage :
    @ ListView {
    id: list;
    anchors.fill: parent;
    model: 1;
    delegate: DesignedItem
    {
    id:design
    width: Screen.desktopAvailableWidth;

            }
        }
        ScrollBar {
            flickable: list;
        }@

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.