如何將 QML ScrollView 滾動到中心？

Question

我有這樣的代碼：

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

Image高於ScrollView 。 如何將后者滾動到Image元素的中心？

Answer 1

盡管出現， ScrollView與Flickable密切相關。 事實上， Flickable是用來控制可見區域的。 這樣的Item可用作（ readonly ）屬性flickableItem 。 Flickable具有contentX和contentY屬性來控制當前可見區域。 這些屬性可以與ScrollView的width和height結合，以將可見區域精確定位在中心。 通常你有：

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

Answer 2

這是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;
        }
    }
}

主文件

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

Answer 3

從 Qt 5.14（也許已經在 5.12 中）開始，您現在可以簡單地執行以下操作：

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

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