QtQuick 1.1 浮动矩形答案

【问题标题】：QtQuick 1.1 Floating RectanglesQtQuick 1.1 浮动矩形
【发布时间】：2016-07-14 15:04:09
【问题描述】：

我在嵌入式 Linux 平台上使用 QtQuick 1.1 和 Qt 4.8。我有某种桌面，其中动态创建的矩形排列在一个网格中 - 这个网格在一个 Flickable 内。

Flickable{
  anchors.fill: parent
  contentHeight: homegrid.height
  flickableDirection: Flickable.VerticalFlick
  clip:true
  Grid{
     anchors.left: parent.left
     anchors.top: parent.top
     columns: 4
     flow: GridView.LeftToRight
     id: homegrid
     //new items get pushed to this grid
  }
}

看起来像这样：

当我再创建 2 个项目时，我将它们推到网格的末尾，如下所示：

这是我目前的状态。但是现在我需要在这个网格中获取类别，并且我需要能够将新项目推送到每个类别。应该是这样的：

并且将两个项目添加到红色类别后：

如何将容器排列在网格中，使容器在每行末尾自动断开？

解决方案：

使用 GridView

GridView{ model: myDesktopModel delegate: HomeLinkeDelegate { id: homeLinkDelegate } }

在 C++ 中定义列表

QList<QObject*> objectList;

列表可以排序（按颜色）。

注册列表

viewer->rootContext()->setContextProperty("myDesktopModel",QVariant::fromValue(this->objectList));

当 List 被修改时，你必须重新注册它 - GridView 会刷新。

更多关于 GridView 的信息：http://doc.qt.io/qt-4.8/qml-gridview.html#model-prop

更多关于基于QObjectList的模型http://doc.qt.io/qt-4.8/qdeclarativemodels.html#qobjectlist-based-model

【问题讨论】：

看起来“应该看起来像”图像与您所说的想要自动中断的内容相矛盾。你的意思是你想要某种颜色的最后一项在该行的最后一项，并且下一个颜色从新行开始？
同一颜色的项目应该被分组，当一行没有足够的空间时 - 它应该自动中断（n1之后的最后一张图片）。一行应始终包含 4 个项目（最后一行除外）
你有什么问题吗？你尝试了什么，结果如何？在我看来，您想要的是 Grid 的正常行为，不需要额外的代码。
我需要在类别中分隔网格 - 这意味着当我想添加一个红色项目时，它应该放在最后一个红色项目之后。当我得到一个绿色项目时，它应该放在最后一个绿色项目之后......

标签： qt qml qt-quick qt4.8

【解决方案1】：

据我所知，您无法从 QML 中选择 Grid 中项目的位置。您最好使用GridView 并创建自己的自定义QAbstractItemModel，以便您可以选择在模型中的正确索引处插入项目。或者，正如@GrecKo 提到的，使用ListModel 并调用insert() 函数。

如果您最终选择QAbstractItemModel 方法，请参阅Using C++ Models with Qt Quick Views 了解更多信息。

【讨论】：

那不是我需要的方式。它会在每个网格后导致中断
好吧..这很令人困惑。我已经更新了我的答案。
GridView 带有模型或 Grid 和 Repeater 带有模型。虽然这里 OP 将 Grid 放在 Flickable 中，但 `GridView 似乎是要走的路。
请注意，这可以在不实现 c++ QAbstractItemModel 的情况下完成，在 QML 中一个简单的 ListModel 就足以调用 insert 方法。无耻插件：您也可以将ListModel（或自定义c++模型）与我的SortFilterProxyModel library一起使用并按您的颜色角色排序，这样您甚至不需要找到插入新元素的正确位置，您可以将其附加到您的源模型中。
让它与 GridView 一起使用，它使用通过 viewer->rootContext()->setContextProperty 注册的 C++ QList<QObject*>。在获得新项目时，我对QList 进行排序并再次注册列表，这会导致重新加载 GridView。