带有ColumnLayout的QML ScrollView [英] QML ScrollView with ColumnLayout

问题描述

我正在尝试围绕ColumnLayout创建滚动视图，不幸的是我的当前代码不起作用.我了解ListView，但就我而言，我需要创建可滚动的Layout，因为它将包含异构元素.

I am trying to create a scroll view around a ColumnLayout, unfortunately my current code doesn't work. I know about ListView, but in my case I need to create scrollable Layout, because it will contain heterogeneous elements.

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

这导致了这一点(这显然不是我想要的):

This renders to this (which is clearly not what I want):

有两个问题:

1. 图像不会在整个窗口宽度上拉伸，将忽略parent.width.我希望图像具有与ScrollView完全相同的宽度(无水平滚动)
2. 图像高度属性被忽略

我在做什么错了?

推荐答案

我将使用一个普通列，并通过id直接访问所需的width属性.据我了解，这些容器元素根据其内容来测量其大小，这可能就是设置ColumnLayouts宽度无效的原因.

I would go with a plain column and access the desired width property directly by id. As I understand these container elements are measuring their size depending on their content, that might be the reason why setting the ColumnLayouts width has no effect.

这对我有用:

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.希望这会有所帮助！

In my case root is just the parent's id. Hope this helps!

这篇关于带有ColumnLayout的QML ScrollView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！