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

这呈现给了这个（显然不是我想要的）：

QML column layout

有两个问题：

图片未在整个窗口宽度上拉伸，忽略parent.width。我希望图像的宽度与ScrollView完全相同（无水平滚动）
忽略图像高度属性

我做错了什么？

Answer 1

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

这对我有用：

AccountService

在我的情况下，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
    }
}

带有ColumnLayout的QML ScrollView

2 个答案: