QtQuick 1.1 Floating Rectangles

Question

I'm using QtQuick 1.1 with Qt 4.8 on an embedded Linux Plattform. I have somekind of Desktop where dynamically created Rectangles are arranged in a Grid - this Grid is inside a 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
  }
}

It looks like this:

When i create 2 more items, i push them to the end of the grid which looks like this:

Taht's my current State. But now i need to get categories in this Grid and i need to be able to push new items to each category. Should look like:

And after adding two items to the red category:

How can i arrange containers in a grid where the containers automatically break at the end of each row?

Solution:

Using a GridView

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

defining the list in c++

QList<QObject*> objectList;

The List can be sorted (by Colors).

Register the List

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

When the List is modified, you have to register it again - than the GridView refreshes.

More information about GridView: http://doc.qt.io/qt-4.8/qml-gridview.html#model-prop

More information about QObjectList-based model http://doc.qt.io/qt-4.8/qdeclarativemodels.html#qobjectlist-based-model

It seems like the "should look like" image contradicts what you said about wanting the automatic breaking. Do you mean that you want the last item of a certain colour to the last on that row, and that the next colour begins on a new row? — Mitch
Items of the same color should be grouped, when there is not enough space in one row - it should automatically break (last picture after n1). One row should always hold 4 Items (except last row) — Haselnussstrauch
What's your problem here ? What did you try and what was the result ? It seems to me that what you want is the normal behaviour of a Grid, no additional code is needed. — GrecKo
I need to seperate the Grid in categories - which means when i want to add a red item, it should be placed after the last red one. When i get a green item it should be placed after the last green one... — Haselnussstrauch

Mitch Mitch · Accepted Answer · 2016-07-15T09:17:10

As far as I know, you can't choose the position of items in a Grid from QML. You'd be better off using a GridView and creating your own custom QAbstractItemModel so that you can choose insert the items at the correct index in the model. Or, as @GrecKo mentioned, use a ListModel and call the insert() function.

If you end up choosing the QAbstractItemModel approach, see Using C++ Models with Qt Quick Views for more information.

QtQuick 1.1 Floating Rectangles

1 Answers