Question

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

Answer 1

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

只有一个项目可以是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和ScrollView width之间的绑定引起的：因为可见的width总是等于总width，所以没有水平即使包含的项目大于窗口，也会显示滚动。问题2是1的结果：因为width等于应用，所以只要添加垂直滚动条，水平的也会被添加以显示垂直滚动条覆盖的水平空间。

通过将width绑定更改为等于包含的项width（解决问题1）或等于width viewport，可以解决这两个问题。 1}}（解决问题2），也在this other answer中讨论过。最后，应该删除锚定以避免绑定循环。这是一个按预期工作的完整示例：

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

来自doc（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。

Scrollview中的中心元素

3 个答案:

修改