Qt 如何将QML ScrollView滚动到中心？

我有这样的代码：

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

---

图像

高于

滚动视图

。如何将后者滚动到

图像

元素的中心？

尽管外观如此，

滚动视图

与

Flickable

密切相关。实际上，

Flickable

用于控制可见区域。这样的

项

作为（

readonly

）属性提供

Flickable

具有

contentX

和

contentY

属性来控制当前可见区域。这些属性可以与

滚动视图

的

宽度

和

高度

相结合，将可见区域精确定位在中心位置。通常，您有：

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

这种差异是必要的，因为第一次调用只是将中心移动到可见区域的左上角（位于

contentX

/

contentY

的位置）

下面是一个完整的示例，其中

图像

是

滚动视图

的主要子对象

免责声明：在示例提出的简单场景中，对于远程加载的映像，调用

onCompleted

时，大小仍然可以取消设置，导致居中代码无法工作。通过直接在代码中设置宽度和高度，可以避免该问题。在真实场景中，这样的细节应该是不必要的

---

下面是QQC2的解决方案。在Qt 5.12上测试

解决方案很简单，只需存储滚动条指针并根据需要控制它

ScrollView2.qml

import QtQuick 2.0
import QtQuick.Controls 2.4

ScrollView {
    id: root
    property ScrollBar hScrollBar: ScrollBar.horizontal
    property ScrollBar vScrollBar: ScrollBar.vertical

    /**
     * @param type [Qt.Horizontal, Qt.Vertical]
     * @param ratio 0.0 to 1.0
     */
    function scrollTo(type, ratio) {
        var scrollFunc = function (bar, ratio) {
            bar.setPosition(ratio - bar.size/2)
        }
        switch(type) {
        case Qt.Horizontal:
            scrollFunc(root.hScrollBar, ratio)
            break;
        case Qt.Vertical:
            scrollFunc(root.vScrollBar, ratio)
            break;
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 500
    height: 500
    ScrollView2 {
        id: scroll
        anchors.fill: parent
        Text {
            width: 1000
            height: 1000
            text: "ABC"
            font.pixelSize: 800
            Component.onCompleted: {
                scroll.scrollTo(Qt.Horizontal, 0.5)
                scroll.scrollTo(Qt.Vertical, 0.5)
            }
        }
    }
}

由于Qt 5.14（可能已经在5.12中），您现在只需执行以下操作：

ScrollView {
    Component.onCompleted {
        // scroll to vertical center
        ScrollBar.vertical.position = 0.5
    }

    // put your content item here:
    Image {
        // …
    }
}

---

“快速控制2”有没有办法做到这一点？@VadimPeretokin看看我的答案：）

ScrollView {
    Component.onCompleted {
        // scroll to vertical center
        ScrollBar.vertical.position = 0.5
    }

    // put your content item here:
    Image {
        // …
    }
}