2

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

3 回答 3

4

你有两个方面需要考虑。直接来自文档：

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

因此，您不能拥有多个s Rectangle，而只是一个用于所有 s 的容器Rectangle（实际上是图像，如您的问题中所述）。

此外，应该再次从文档中指出：

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

因此，您只需要一个孩子，ScrollView并确保它从父母那里得到正确的尺寸。我会ColumnLayout为此目的使用 a 。最终示例代码在这里：

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. 如果窗口水平调整大小，则不显示水平滚动条
  2. 显示垂直滚动条后立即显示水平滚动条

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

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

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水平滚动不显示，即使包含的项目大于窗口

于 2014-12-09T16:00:00.323 回答
0

从文档（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"
        }
    }
}
于 2014-12-09T15:29:15.310 回答
0

您可以插入一个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。

于 2015-11-06T13:41:18.637 回答