具有ColumnLayout的QML ScrollView

Question

我正在嘗試圍繞ColumnLayout創建滾動視圖，不幸的是我的當前代碼不起作用。 我知道ListView，但就我而言，我需要創建可滾動的Layout，因為它將包含異構元素。

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

在我的情況下，根僅是父母的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
    }
}