滚动视图中的中心元素

我在ScrollView中居中QML对象时遇到问题。我想滚动图像和其他QML元素，它们应该居中。但它们总是粘在左上角。

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
ApplicationWindow{
    id: appWindow
    width:Screen.width
    height:Screen.height
    visible: true
    ScrollView {
        anchors.fill: parent
        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: 800
            height: 800
            color : "yellow"
        }
    }
}

您有两个方面需要考虑。直接从文档中：

只有一个项可以是滚动视图的直接子项，并且该子项被隐式定位以填充滚动视图。

所以你不能有多个Rectangle，只是一个容器，用于所有Rectangle(如你的问题中所述，实际上是图像(。

此外，应该注意的是，再次从文档中指出：

子项的宽度和高度将用于定义内容区域的大小。

因此，ScrollView只需要一个子项，并确保它从父项中获取正确的大小。我会为此使用ColumnLayout。最终示例代码如下：

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
ApplicationWindow{
    id: appWindow
    width: 200
    height: 100
    visible: true
    ScrollView {
        anchors.fill: parent
        ColumnLayout {                  // unique child
            spacing: 10
            width: appWindow.width      // ensure correct width
            height: children.height     // ensure correct height
            // your children hereon...
            Repeater {
                model: 4
                delegate: Rectangle  {
                    Layout.alignment: Qt.AlignHCenter
                    width: 50
                    height: 50
                    color : "yellow"
                }
            }
        }
    }
}

编辑

根据OP的说法，提供的解决方案并不能完全满足他的需求，这是非常合理的。特别：

如果水平调整窗口大小，则不显示水平滚动条
后，立即显示水平滚动条

这两个问题都与所使用的方法有关。问题 1 是由父width和ScrollView width之间的绑定引起的：由于可见width总是等于总width，因此即使包含的项目大于窗口，也不会显示水平滚动。问题 2 是 1 的结果：由于width等于应用程序，因此只要添加垂直滚动条，也会添加水平滚动条以显示垂直滚动条覆盖的水平空间。

这两个问题都可以通过将width绑定更改为等于包含的项目width(以解决问题 1(或等于viewport的width(解决问题 2(来解决，如另一个答案中所讨论的那样。最后，应删除锚定以避免绑定循环。下面是一个按预期工作的完整示例：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
ApplicationWindow{
    id: appWindow
    width: 200
    height: 100
    visible: true
    ScrollView {
        id: scroller
        width: appWindow.width          // NO ANCHORING TO AVOID binding loops!
        height: appWindow.height
        ColumnLayout {     // <--- unique child
            spacing: 10
            width: Math.max(scroller.viewport.width, implicitWidth)      // ensure correct width
            height: children.height                                      // ensure correct height
            // your children hereon...
            Repeater {
                model: 3
                delegate: Rectangle  {                  
                    Layout.alignment: Qt.AlignHCenter
                    width: 150
                    height: 150
                    color : "yellow"
                }
            }
        }
    }
}

绑定到窗口width不显示水平滚动，即使包含的项目大于窗口

来自文档 (http://qt-project.org/doc/qt-5/qml-qtquick-controls-scrollview.html( ：

只有一个项可以是滚动视图
的直接子项，并且该子项被隐式定位以填充滚动视图。

因此，您无法通过锚定内容来实现您想要的。您必须更改滚动视图的大小和锚定

例如：

ApplicationWindow{
    id: appWindow;
    width:Screen.width;
    height:Screen.height;
    visible: true;
    ScrollView
    {
        anchors.centerIn: parent;
        width: Math.min(content.width + 30, appWindow.width);
        height: Math.min(content.height, appWindow.height);
        Rectangle
        {
            id: content;
            width: 800;
            height: 800;
            color : "yellow"
        }
    }
}

您可以在ScrollView和您需要居中的 QML 项目之间插入您喜欢的Rectangle或其他类似的 QML 项目作为中间层，并将其颜色设置为"透明"。这应该是一个跨平台的解决方案。

我已经修改了您的代码，例如：

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
ApplicationWindow {
    id: appWindow
    width:Screen.width
    height:Screen.height
    visible: true
    ScrollView {
        anchors.fill: parent
        Rectangle {
            width:  Math.max(appWindow.width, rect.width)
            height: Math.max(appWindow.height, rect.height)
            color: "transparent"
            Rectangle {
                id: rect
                anchors.centerIn: parent
                width: 800
                height: 800
                color : "yellow"
            }
        }
    }
}

我使用 Qt 5.5。

编辑

相关内容

最新更新

热门标签：