如何将 QML ScrollView 滚动到中心？答案

【问题标题】：How to scroll QML ScrollView to center?如何将 QML ScrollView 滚动到中心？
【发布时间】：2015-05-20 19:59:01
【问题描述】：

我有这样的代码：

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

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

【问题讨论】：

标签： qt qml qtquick2

【解决方案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
        }
    }
}

【讨论】：

有没有办法用 Quick Controls 2 做到这一点？
@VadimPeretokin 看看我的答案：)

【解决方案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;
        }
    }
}

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

【讨论】：

【解决方案3】：

从 Qt 5.14（可能已经在 5.12 中）开始，您现在可以简单地执行以下操作：

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

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

【讨论】：