CODEWITHSUNDEEP
qtqml
Anon
Anon

Reputation: 2492

QML - Move to top bottom of flickable

How do you tell flickable to move to the bottom of the current page. QML - Move to top #TOP does not provide an answer for this.

Upvotes: 6

Views: 7406

Answers (2)

justengel
justengel

Reputation: 6320

I kept adding text to a TextArea and wanted it to stay at the bottom unless someone changed the scroll position.

Flickable{
    id: flickable
    anchors.fill: parent

    boundsBehavior: Flickable.DragAndOvershootBounds
    flickableDirection: Flickable.VerticalFlick

    ScrollBar.vertical: ScrollBar {
        id: flickScroll
    }

    TextArea.flickable: TextArea{
        id: monitor
        width: parent.width
        height: parent.height

        readOnly: true
        wrapMode: TextArea.Wrap
        persistentSelection: true
        leftPadding: 6
        rightPadding: 6
        topPadding: 0
        bottomPadding: 0
        background: null
    }

    function currPos(){
        return flickable.contentY
    }

    function setPos(pos){
        flickable.contentY = pos;
    }

    function getEndPos(){
        var ratio = 1.0 - flickable.visibleArea.heightRatio;
        var endPos = flickable.contentHeight * ratio;
        return endPos;
    }

    function scrollToEnd(){
        flickable.contentY = getEndPos();
    }

    function append(text){
        var pos, endPos, value;

        value = monitor.text + String(text);
        // Limit value size here

        endPos = getEndPos();
        pos = currPos();

        monitor.text = value;

        if(pos == endPos){
            scrollToEnd();
        } else {
            setPos(pos);
        }
    }
}

Upvotes: 1

astre
astre

Reputation: 807

You will need to calculate it and set it to contentY. For e.g:

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "file:///path/toBigImageFile" }

    contentY : contentHeight-height
}

Upvotes: 6

Related Questions