将元素置于滚动视图中

Question

我在将 QML 对象居中于

ScrollView

时遇到问题。我想滚动图像和其他 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"
        }
    }
}

Answer 1

您需要考虑两个方面。直接来自docs：

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

所以你不能有多个

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

 和 

ScrollViewwidth

 之间的绑定引起的：由于可见的 

width

 始终等于总 

width

，因此不会显示水平滚动，即使包含的项目是比窗户大。问题2是问题1的结果：由于

width

等于应用程序，一旦添加垂直滚动条，水平滚动条也会被添加以显示垂直滚动条覆盖的水平空间。

这两个问题都可以通过将

width

 绑定更改为等于包含的项目 

width

（解决问题 1）或等于 

width

 的 

viewport

（解决问题 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

 即使包含的项目比窗口大，也不会显示水平滚动。

Answer 2

来自文档（

http://qt-project.org/doc/qt-5/qml-qtquick-controls-scrollview.html）：

只有一个 Item 可以是 ScrollView 的直接子项，并且

该子项被隐式锚定以填充滚动视图。

所以你通过锚定内容并不能达到你想要的效果。您必须更改 ScrollView 的大小和锚定

例如：

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

Answer 3

您可以插入

Rectangle

或您喜欢的其他类似QML项目作为

ScrollView

和您需要居中的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。