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

xcoder

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
            scrollToEnd()
        }
    }

    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
focus:true

    Keys.onPressed: {
        console.log(event.key)
        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)
            scrollToEnd()
    }
}

@

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

Thanks

p3c0

Hi,

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" }
}
@

xcoder

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.

p3c0

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]