QML ListView 或 GridView ：显示框内项目的列表

Question

有没有办法在 QML 中创建它？

就像一个具有水平流动的 ListView（直到它达到总宽度，然后在下一行继续）。

ListView {
    anchors.fill: parent
    layoutDirection: Qt.Horizontal
    width: container.width; height: implicitHeight
    model: ListModel{ id: contactListModel }
    delegate: contactComponent
}

上面代码的问题在于它没有考虑宽度的限制。

或者像 GridLayout，但没有定义列数或行数。

Flickable {
    anchors.fill: parent
    contentHeight: grid.height
    contentWidth: container.width

    GridLayout {
        id: grid
        columns: 3
        width: container.width; height: implicitHeight
        columnSpacing: 0; rowSpacing: 0
        Repeater {
            model: ListModel{ id: contactListModel }
            delegate: contactComponent
        }
    }
}

这里的问题是，如果我没有定义许多列或行，那么无论总宽度如何，它都会继续水平添加项目。而且，间距...

谢谢，

Answer 1

Flow 是你所需要的。

如果你想让它可滚动，你可以将它包裹在 a 中Flickable（就像你对 所做的那样GridLayout）。

Flickable {
    anchors.fill: parent
    contentWidth: width
    contentHeight: flow.implicitHeight    
    Flow {
        id: flow
        width: parent.width
        spacing: 5
        Repeater {
            model: ListModel{ id: contactListModel }
            delegate: contactComponent
        }
    }
}