QML 网格视图:在末尾添加特殊项目

Question

我希望在QML末尾有一个特殊的元素来添加新项目，GridView QML。因此，当网格重排时，末端的特殊元素会像普通元素一样重排。我用一个Flow编码它，在中继器内部，在它之后，那个特殊的元素，它工作得很好，但我无法获得带有 Flow 的滚动条，所以我搬到了 GridView。

我尝试了 GridView 的 footer 属性，但页脚显示在网格下方，而我希望它位于网格的最后一行以及其他项目上。

为了明确这一点，这就是我想要的：

[item1] [item2] [item3]
[item4] [ ADD ]

此外，特殊元素必须具有不同的显示，单击时具有不同的操作。

我希望C++一方不要意识到这种特殊行为。如果我必须在模型末尾添加一个项目，我希望它将其添加到 QML 中，这样我就不会因该实现细节而污染C++。

我试过这个：

model: projects.push({name: '+'})

还有各种类型的append，但这不起作用。

Answer 1

很高兴读到您解决了这个问题。测试您的代码后，我认为您可以以更简单的方式获得相同的结果。

如果将Flow绑定到包含ScrollView的Item，则Flow可以水平增长，并且根据需要获得垂直滚动条。工作代码：

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
// import QtQuick.Controls 1.3      // <--- requires Qt >= 5.4
Window {
    id: container
    width: 300
    height: 150
    visible: true
    ScrollView {
        anchors.fill: parent
        //horizontalScrollBarPolicy:  Qt.ScrollBarAlwaysOff  // <--- requires .Controls 1.3
        Flow {
            width: container.width       // width of ScrollView parent
            spacing: 10
            Text { text: "Text"; font.pixelSize: 40 }
            Text { text: "items"; font.pixelSize: 40 }
            Text { text: "flowing"; font.pixelSize: 40 }
            Text { text: "inside"; font.pixelSize: 40 }
            Text { text: "a"; font.pixelSize: 40 }
            Text { text: "Flow"; font.pixelSize: 40 }
            Text { text: "item"; font.pixelSize: 40 }
            Text { text: "yeah"; font.pixelSize: 40 }
            Text { text: "alright"; font.pixelSize: 40 }
            Text { text: "cool"; font.pixelSize: 40 }
            Text { text: "almost"; font.pixelSize: 40 }
            Text { text: "not"; font.pixelSize: 40 }
            Text { text: "epic"; font.pixelSize: 40 }
        }
    }
}

在这里，使用 Qt <5.4，您可以获得水平滚动条，因为垂直滚动条覆盖了内容空间的一部分。使用Qt 5.4中的controls 1.3(以及相关的注释代码(可以解决此问题。

---

解决此问题的另一种方法是将Flickable与自定义滚动条一起使用(请参阅此处(。在这种情况下，代码将是：

import QtQuick 2.3
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
Window {
    id: container
    width: 300
    height: 150
    visible: true
    Flickable {
        id: flick
        anchors.fill: parent
        contentHeight: flow.height    // grows according to the size of the Flow
        Flow {
            id: flow
            width: container.width
            spacing: 10
            Text { text: "Text"; font.pixelSize: 40 }
            Text { text: "items"; font.pixelSize: 40 }
            Text { text: "flowing"; font.pixelSize: 40 }
            Text { text: "inside"; font.pixelSize: 40 }
            Text { text: "a"; font.pixelSize: 40 }
            Text { text: "Flow"; font.pixelSize: 40 }
            Text { text: "item"; font.pixelSize: 40 }
            Text { text: "yeah"; font.pixelSize: 40 }
            Text { text: "alright"; font.pixelSize: 40 }
            Text { text: "cool"; font.pixelSize: 40 }
            Text { text: "almost"; font.pixelSize: 40 }
            Text { text: "not"; font.pixelSize: 40 }
            Text { text: "epic"; font.pixelSize: 40 }
        }
    }
    ScrollBar {                 // one of the scrollbars from the linked question
        flickable: flick
    }
}

Answer 2

我设法让滚动条根据 BaCaRoZzo 建议的Flow工作。

但是，这是一个有点复杂的方案，我在标准输出上收到QML警告。

这是我是如何做到的：

ScrollView {
    anchors.fill: parent
    Flickable {
        contentWidth: parent.width
        contentHeight: flow.implicitHeight
        Flow {
            id: flow
            anchors.fill: parent
            ...
        }
    }
}

如果我只是将Flow放在ScrollView中，则流中只有一列。

据我所知，这有效，但是我在 stdout 上收到此警告：

QML Flickable: Binding loop detected for property "contentWidth"

我希望有一个更简单的解决方案，但这就是我现在所拥有的......

编辑：好的，我摆脱了警告。我只是设置了width: parent.width而不是contentWidth Flickable，没关系，表现良好，没有警告。我想我会坚持下去，除非有人想出更好的解决方案。