How to scroll QML ScrollView to the center?

Question

I have a code like this:

ScrollView {
    Image {
        source: "..."
    }
}

Imagehigher than ScrollView. How to scroll the last to center Image?

Answer 1

Despite the appearance, ScrollViewclosely related to Flickable. Indeed, it is Flickableused to control the visible area. This Itemis available as property ( readonly) flickableItem. FlickableIt has properties contentXand contentYto control the current visible region. These properties can be combined with widthand height ScrollViewto position the visible area exactly in the center. Usually you have:

flickableItem.contentY = flickableItem.contentHeight / 2 - height / 2
flickableItem.contentX = flickableItem.contentWidth / 2 - width / 2

, ( contentX/contentY).

Image ScrollView.

. , , - onCompleted, . , . .

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
    id: main
    visible: true
    width: 600; height: 350

    ScrollView {
        id: ss
        width: 600
        height: 350

        Image {
            id: name
            width: 900
            height: 600
            source: "http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"
        }

        Component.onCompleted: {
            flickableItem.contentY = flickableItem.contentHeight / 2 - height / 2
            flickableItem.contentX = flickableItem.contentWidth / 2 - width / 2
        }
    }
}