带有ColumnLayout的QML ScrollView

Question

我正在尝试在ColumnLayout周围创建一个滚动视图，但是我的当前代码不起作用。我知道ListView的存在，但在我的情况下，我需要创建可滚动的布局，因为它将包含异构元素。

ApplicationWindow {
    id: mainwindow
    title: qsTr("Hello World")
    width: 300
    height: 300
    visible: true

    ScrollView {
        anchors.fill: parent

        ColumnLayout {
            width: mainwindow.width

            Image {
                anchors.bottomMargin: 10
                source: "img/button.jpg"
                width: parent.width
                height: 400
            }

            Image {
                source: "img/button.jpg"
                width: parent.width
                height: 500
            }
        }
    }
}

这会渲染成这样（显然不是我想要的）：

存在两个问题：

1. 图片没有跨越整个窗口宽度，父元素的width属性被忽略了。我希望图片的宽度与ScrollView相同（无水平滚动条）
2. 图片的height属性被忽略了

我做错了什么？

- Aleksei Petrenko

---

布局的意义在于自动定位和调整元素的大小。在此处阅读更多信息：http://doc.qt.io/qt-5/qtquicklayouts-overview.html#size-constraints。您可以使用Layout.fillWidth或Layout.fillHeight将项目拉伸到宽度或高度。或者，可以设置Layout.preferred{Width，Height}。另外，您错过了ColumnLayout的height属性。 - folibis

@folibis提出了一些不错的观点。您还可以在图片上使用sourceSize来强制调整大小（例如：sourceSize.width: parent.width）。问题是ScrollView并不是用来这样使用的。您可以装饰一个Flickable或切换到带有自定义垂直滚动条的Flickable（请参见此处获取滚动条代码）。 - BaCaRoZzo

Answer 1

我会选择一个简单的列并直接通过id访问所需的宽度属性。据我了解，这些容器元素根据其内容来测量其大小，这可能是设置ColumnLayout的宽度没有效果的原因。

这对我很有效：

ScrollView 
{
    anchors.fill: parent

    Column {

        Repeater {
            model: 4;
            delegate: Item {
                width: root.width;
                height: image.sourceSize.height;

                Image {
                    id: image;
                    anchors.centerIn: parent;
                    width: parent.width;
                    fillMode: Image.Stretch;
                    source: "img" + (index+1) + ".png"
                }
            }
        }
    }
}

在我的情况下，根节点只是父节点的ID。希望这能帮到你！

- qCring

---

好的，这个可以了，谢谢你的帮助。顺便说一下，CenterIn和Stretch是多余的，没有它们也可以工作。哦... QML感觉是我遇到过最困难的布局引擎。我做过XAML、Android XML布局、iOS Xib布局，都很顺利，但在QML中，即使是最简单的事情也似乎非常困难。有没有一个好的逐步QML教程或书籍？Qt.io文档非常稀疏和分散，真的缺乏好的教程。 - Aleksei Petrenko

刚才我卡在了世界上最简单的事情上。我想在图像上绘制文本，但要留出一点边距。怎么做呢？我尝试了 Image {Text {anchors.margins:10}}，但这些边距不起作用。 - Aleksei Petrenko

过一段时间你会爱上 QML 的，你会看到的 :) 看看QML书吧！关于居中文字：你有设置锚点吗？此外你可能会喜欢terrarium和livecv。它们都提供了一个实时的 QML 解释器，非常适合玩耍和学习如何运作。 - qCring

Column 真正有用的情况之一。好答案！ - BaCaRoZzo

Answer 2

我也遇到了同样的问题。以下方法对我有效：

ScrollView {
    width: parent.width
    height : parent.height
    contentWidth: column.width    // The important part
    contentHeight: column.height  // Same
    clip : true                   // Prevent drawing column outside the scrollview borders

    Column {
        id: column
        width: parent.width

        // Your items here
    }
}

- J.Jacobs