qt - 如何将QML ScrollView滚动到中心？

Question

我有这样的代码:

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

Image高于 ScrollView。如何将后者滚动到 Image元素的中心？

Answer 1

尽管出现，ScrollView与Flickable紧密相关。实际上，Flickable用于控制可见区域。这样的Item可用作(readonly)属性 flickableItem 。 Flickable具有contentX和contentY属性，以控制当前的可见区域。这些属性可以与width的height和ScrollView结合使用，以将可见区域精确地定位在中心。通常，您有:

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