QML ScrollBar



  • Hi guys,

    I have a two problems. I have a Scroll Bar like this.

    "ScrollBar":http://i.imgur.com/5IdE2SE.png

    I want to do, what i showed in this picture. My first problem is when i scroll down my text goes out of my rectangle, another problem, I want ScrollBar shift to the right, out of my rectangle, any idea how can i do that ? :)

    My main.qml

    @import QtQuick 2.0

    Rectangle {
    width: 1280
    height: 864;
    color: "transparent";
    y:160;

    FontLoader { id: font; source: "/home/g/Documents/UI/canvas_img/fonts/OpenSans-Light.ttf" }
    
    Text {
        id: text;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 30;
        text: "Rules";
        font.pixelSize: 30;
        font.family: font.name;
    }
    
    Rectangle {
    id: _scrollbar;
    width: 1000;
    height: 300;
    anchors.centerIn: parent;
    color: "#c2c2c2"
    radius: 8;
        ListView {
            id: list;
            width: 1000;
            height: 590;
            anchors.fill: parent;
            model: 1;
            delegate: Rectangle {
                height: 800;
                width: parent.width;
                color: "transparent" //(model.index %2 === 0 ? "darkgray" : "lightgray");
                Text {
                    id: rules;
                    anchors.left: parent.left;
                    anchors.leftMargin: 15;
                    anchors.topMargin: 15;
                    text: "Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules  \nRules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules Rules \nRules Rules Rules Rules Rules Rules Rules Rules \nRules Rules Rules Rules ";
                    font.pixelSize: 20;
                    font.family: font.name;
                }
            }
        }
        ScrollBar {
            target: list;
        }
    }
    

    }@



  • And my ScrollBar.qml

    @import QtQuick 2.0

    BorderImage {
    property variant target
    border {left: 0; top: 3; right: 0; bottom: 3}
    width: 72

    anchors {top: target.top; bottom: target.bottom; right: target.right }
    visible: (track.height == slider.height) ? false : true //TODO: !visible -> width: 0 (but creates a binding loop)

    Item {
    anchors {fill: parent; margins: 1; rightMargin: 2; bottomMargin: 2}

        Rectangle {
            id: upArrow;
            anchors.top: parent.top;
            width: 72;
            height: 74;
            color: "#9d9d9d";
            radius: 8;
    
            Rectangle {
                id: up;
                width: 72;
                height: 72;
                radius: 8;
    
                gradient: off
    
                Gradient {
                    id:off
                    GradientStop { position: 0.0; color: "#ebebeb" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }
    
                Gradient {
                    id:onn
                    GradientStop { position: 0.0; color: "#c8c8c8" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }
    
                MouseArea {
                    anchors.fill: parent
                    onEntered:{
                        up.gradient=onn
                    }
    
                    onCanceled:{
                        up.gradient=off
                    }
    
                    onExited: {
                        up.gradient=off
                    }
                    onPressed: {
                        timer.scrollAmount = -10
                        timer.running = true;
                    }
                    onReleased: {
                        timer.running = false;
                    }
                }
            }
        }
    

    Timer {
    property int scrollAmount

    id: timer
    repeat: true
    interval: 20
    onTriggered: {
    target.contentY = Math.max(
    0, Math.min(
    target.contentY + scrollAmount,
    target.contentHeight - target.height));
    }
    }

    Item {
    id: track
    anchors {top: upArrow.bottom; topMargin: 1; bottom: dnArrow.top;}
    width: parent.width

    MouseArea {
    anchors.fill: parent
    onPressed: {
    timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1) // scroll by a page
    timer.running = true;
    }
    onReleased: {
    timer.running = false;
    }
    }

                Rectangle {
                    id: slider;
                    width: 72;
                    radius: 8;
                    height: 72;
                    y: target.visibleArea.yPosition * track.height
                    gradient: _off_
    
                    Gradient {
                        id:_off_
                        GradientStop { position: 0.0; color: "#ebebeb" }
                        GradientStop { position: 1.0; color: "#c8c8c8" }
                    }
    
                    Gradient {
                        id:_onn_
                        GradientStop { position: 0.0; color: "#c8c8c8" }
                        GradientStop { position: 1.0; color: "#c8c8c8" }
                    }
    
                    MouseArea {
                        anchors.fill: parent
                        drag.target: parent
                        drag.axis: Drag.YAxis
                        drag.minimumY: 0
                        drag.maximumY: track.height - height
    
                        onEntered:{
                            slider.gradient=_onn_
                        }
    
                        onCanceled:{
                            slider.gradient=_off_
                        }
    
                        onExited: {
                            slider.gradient=_off_
                        }
    
                        onPositionChanged: {
                            if (pressedButtons == Qt.LeftButton) {
                                target.contentY = slider.y * target.contentHeight / track.height
                            }
                        }
                    }
                }
    

    }

        Rectangle {
            id: dnArrow;
            anchors.bottom: parent.bottom;
            width: 72;
            height: 74;
            color: "#9d9d9d";
            radius: 8;
    
            Rectangle {
                id: down;
                width: 72;
                height: 72;
                radius: 8;
    
                gradient: off_
    
                Gradient {
                    id:off_
                    GradientStop { position: 0.0; color: "#ebebeb" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }
    
                Gradient {
                    id:onn_
                    GradientStop { position: 0.0; color: "#c8c8c8" }
                    GradientStop { position: 1.0; color: "#c8c8c8" }
                }
    
                MouseArea {
                    anchors.fill: parent
    
                    onEntered:{
                        down.gradient=onn_
                    }
    
                    onCanceled:{
                        down.gradient=off_
                    }
    
                    onExited: {
                        down.gradient=off_
                    }
                    onPressed: {
                        timer.scrollAmount = 10
                        timer.running = true;
                    }
                    onReleased: {
                        timer.running = false;
                    }
                }
            }
        }
    

    }
    }@

    Thanks in advance ;))



  • Problem shift to the right [Solved] :))

    Can anyone help with text ? :)


Log in to reply
 

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