Please nominate your Qt Champions for 2021!

[SOLVED] Scrolling Flickable to the end after item is added

  • Hello,

    I've had some problems getting the flickable to horizontally scroll to the end after an item is added. Maybe someone has some ideas how to do it.

    So far I've come up with the following code:

    function scrollToEnd() {
    console.log("Scroll function...")
    var ratio = 1.0-dash.visibleArea.widthRatio
    var endPos = dash.contentWidth*(1.0-dash.visibleArea.widthRatio)
    console.log("Scrolling param: " + ratio + " " + endPos)
    dash.contentX = dash.contentWidth*(1.0-dash.visibleArea.widthRatio)

    function newLayerObject(args) {
    root.shouldScroll = true
    var layer = layerComponent.createObject(layerRow, args)
    if(layer == null)
    console.log("Layer object failed to create.")

    Flickable {
        id: dash
        anchors.fill: root
        contentWidth: layerRow.childrenRect.width; contentHeight: dash.height
        flickableDirection: Flickable.HorizontalFlick
        clip: true
        onContentWidthChanged: {
            if(root.shouldScroll) {
                root.shouldScroll = false
        onChildrenRectChanged: {
            console.log("child rect: " + dash.childrenRect)
        Row {
            id: layerRow
            spacing: 20
            move: Transition {
                      NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }


    The thing it works only every second time. I've noticed, that the visibleArea.widthRatio sometimes isn't updated when I enter the function to scroll to the end and obviously it fails to scroll to the end.

    However the function perfectly if I inititate it on my own via key press
    Item {
    anchors.fill: parent

        Keys.onPressed: {
            if(event.key == Qt.Key_F)
                 console.log(dash.contentX + " " + dash.visibleArea.xPosition + " " + dash.visibleArea.widthRatio + " " + dash.contentWidth)
            else if(event.key == Qt.Key_S)


    Also I noticed that flickable autocompletes an event called: onVisibleAreaChanged. I thought this might be able to call my function when the flickable is ready to scroll. But when I try to use it, I get the following error, either calling a function or just writing something to the console:

    Cannot assign to non-existent property "onVisibleAreaChanged"

    Is there any particular reason onVisibleAreaChanged can't be used?
    Also any ideas how to call the scrollToEnd() function when contentWidth and visibleArea has changed?

    I also tried to use Loader with my new item, but it just executed onLoaded event while flickable had still previous contentWidth


  • Moderators


    If I understood you correctly following may help you scroll flickable to the end but without animating
    Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height
    contentX: contentWidth-width
    Image { id: image; source: "bigfile.jpg" }

  • Thank you!

    It was that simple... I guess when you're coming from C++ and normal widgets, you'll still have tendency to complicate things a bit.

    Thanks again.

  • Moderators

    Yeah.. Same here in my initial days of QML coding :)

    [quote author="xcoder" date="1410518854"]Thank you!

    It was that simple... I guess when you're coming from C++ and normal widgets, you'll still have tendency to complicate things a bit.

    Thanks again.[/quote]

Log in to reply