带有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. 图像不会在整个窗口宽度上拉伸,忽略parent.width.我希望图像的宽度与ScrollView完全相同(无水平滚动)
2. 图像高度属性被忽略

我究竟做错了什么？

Answer 1

我会使用普通列并通过id直接访问所需的width属性.据我所知,这些容器元素根据其内容测量它们的大小,这可能是设置ColumnLayouts宽度无效的原因.

这对我有用:

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

在我的情况下,root只是父母的id.希望这可以帮助!

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