QML - Move to top bottom of flickable

Question

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.

score 6 · Accepted Answer · answered Aug 18 '14 at 12:27

6

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
}

answered Aug 18 '14 at 12:27

astre

798
6
14

okay this is new syntax to me; can you explain what contentHeight-height is? It sounds redundant, and what else can you do with the dash? – Anon Aug 20 '14 at 07:40
1

Here we are actually calculating the contentY position from contentHeight(actual height of image) and then subtracting height(the view height) from it. So going by the above example if the height of the image file is 768 and that of the view is 200 then the view's Y coordinate is set to 568 which can be considered as bottom. – astre Aug 20 '14 at 10:27
ohhhh its a minus sign :D That explains it; thanks! – Anon Aug 20 '14 at 10:29

score 1 · Answer 2 · answered Sep 11 '19 at 18:58

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);
        }
    }
}

This was a very helpful answer. The only change I would suggest is to round the calculation of `endPos`. This solves the teensy bug which arise due to the precision fo the floating point calculation. — Kenn Sebesta, Jul 22 '21 at 18:56

QML - Move to top bottom of flickable

2 Answers2