3

I have an model that consist of objects with some properties, e.g.:

ListModel {
    id: fruitModel

    ListElement {
        name: "Apple"
        color: "green"
        cost: 2.45
    }
    ListElement {
        name: "Orange"
        color: "orange"
        cost: 3.25
    }
    ListElement {
        name: "Banana"
        color: "yellow"
        cost: 1.95
    }
}

And now I want to display this model using GridLayout. For each property I want to use one element inside GridLayout, e.g:

GridLayout {
    columns: 3

    Text { text: "Apple" }
    Rectangle { color: "green" }
    SpinBox { value: 2.45 }

    Text { text: "Orange" }
    Rectangle { color: "orange" }
    SpinBox { value: 3.25 }

    Text { text: "Banana" }
    Rectangle { color: "yellow" }
    SpinBox { value: 1.95 }
}

The point is that I can easily change the columns property of GridLayout and make my layout narrower (e.g. to fit small screens). I can use Repeater to fill GridLayout. However such approach will fill my GridLayout in wrong order:

GridLayout {
    columns: 3

    Repeater {
        model: fruitModel
        Text { text: name }
    }

    Repeater {
        model: fruitModel
        Rectangle { color: color }
    }

    Repeater {
        model: fruitModel
        SpinBox { value: value }
    }
}

And it is waste to use Layout.column and Layout.row attached properties since I want to easily change number of columns in GridLayout.

Is there any way to fill GridLayout with data from model row by row?

UPD1:

Behaviour that I want to get:

enter image description here

GridLayout {
    columns: parent.width > 235 ? 3 : 1

    Text { text: "Apple" }
    Rectangle { color: "green"; width: 40; height: 40 }
    SpinBox { value: 2 }

    Text { text: "Orange" }
    Rectangle { color: "orange"; width: 40; height: 40 }
    SpinBox { value: 3 }

    Text { text: "Banana" }
    Rectangle { color: "yellow"; width: 40; height: 40 }
    SpinBox { value: 1 }
}

UPD2: Modified variant from @m7913d:

GridLayout {
    id: layout
    property int maxColumns: 3
    columns: parent.width > 235 ? maxColumns : 1

    Repeater {
        model: fruitModel
        Text {
            text: name
            Layout.row: layout.columns == maxColumns ? index : (maxColumns * index)
            Layout.column: 0
        }
    }

    Repeater {
        model: fruitModel
        Rectangle {
            Layout.preferredWidth: 30
            Layout.preferredHeight: 30
            color: col
            Layout.row: layout.columns == maxColumns ? index : (maxColumns * index + 1)
            Layout.column: layout.columns == maxColumns ? 1 : 0
        }
    }

    Repeater {
        model: fruitModel
        SpinBox {
            value: val
            Layout.row: layout.columns == maxColumns ? index : (maxColumns * index + 2)
            Layout.column: layout.columns == maxColumns ? 2 : 0
        }
    }
}

It's working but not easy-to-modify solution plus sometimes during layout resize there is messages QGridLayoutEngine::addItem: Cell (1, 0) already taken.

8
  • Possible duplicate of Populate GridLayout with Repeater
    – eyllanesc
    Dec 4, 2017 at 17:38
  • 1
    Unfortunately solution in "Populate GridLayout with Repeater" uses Layout.column and Layout.row attached properties, so it is impossible to change columns property of GridLayout dynamically. Dec 4, 2017 at 17:47
  • You could show a diagram or image of what you want to obtain
    – eyllanesc
    Dec 4, 2017 at 17:56
  • 1
    @KamilZaripov , Have you investigated Flow? This may give you the responsive layout you're looking for. Dec 4, 2017 at 18:44
  • Yes, maybe it will be helpful, but how to populate Flow with items from model? Dec 4, 2017 at 18:46

3 Answers 3

1

I would use a Column filled by either Rows or Columns (or any other arrangement) as delegates.

Column {
    id: rootCol
    anchors.fill: parent
    Repeater {
        model: fruitModel
        delegate: rootCol.width > 300 ? rowDel : colDel
    }

    Component {
        id: rowDel
        Row {
            Text { width: 100; height: 50; text: model.name }
            Rectangle { width: 50; height: 50; color: model.color }
            SpinBox { width: 150; height: 50; value: model.cost }
        }
    }

    Component {
        id: colDel
        Column {
            Text { width: 100; height: 50; text: model.name }
            Rectangle { width: 50; height: 50; color: model.color }
            SpinBox { width: 150; height: 50; value: model.cost}
        }
    }
}

Or maybe:

Column {
    id: rootCol
    anchors.fill: parent
    Repeater {
        model: fruitModel
        delegate: Flow {
            anchors {
                left: parent.left
                right: parent.right
            }

            Text { width: 100; height: 50; text: model.name }
            Rectangle { width: 50; height: 50; color: model.color }
            SpinBox { width: 150; height: 50; value: model.value }
        }
    }
}
3
  • Yes, it works, but in this case it isn't GridLayout it is RowLayout inside of ColumnLayout. There is a difference. In GridLayout all items in same column has same width but in RowLayout inside of ColumnLayout they don't. Dec 5, 2017 at 10:08
  • With a little work, you can implement that behavior yourself. GridLayout is not doing magic. Dec 5, 2017 at 10:12
  • Yes, I know that it is possible to do it without GridLayout, moreover currently I'm using RowLayout inside of ColumnLayout and I manually set same width for Items in same column. But it isn't very convenient approach and I'm just wondering is there an easier way. Evidently there isn't. Dec 5, 2017 at 15:16
1

Here is yet another solution:

The Idea: add the children in the right order

For that we will need to make sure that all Items for a model entry.

GridLayout {
    id: gl
    columns: parent.width > 235 ? 3 : 1
}
Instantiator {
    model: fruitModel
    delegate: QtObject {
        property Item text: Text { parent: gl; text: model.name }
        property Item rect: Rectangle { parent: gl; color: model.color; width: 50; height: 50; }
        property Item spin: SpinBox { parent: gl; value: model.cost; }
    }
}

Note: This will fail when entries in the model will be inserted or reordered, as in this solution the entries are always appended.
Other than that, it will automatically support column changes

1

A possible approach is to extend this method with condition column/row indexes:

GridLayout {
    id:gridLayout
    columns: parent.width > 235 ? 3 : 1

    Repeater {
        model: fruitModel
        implicitHeight: 50
        Text {
            text: name
            Layout.row: gridLayout.columns == 3 ? index : 3 * index
            Layout.column: 0
        }
    }

    Repeater {
        model: fruitModel
        Rectangle {
            color: model.color
            implicitWidth: 50
            implicitHeight: 50
            Layout.row: gridLayout.columns == 3 ? index : 3 * index + 1
            Layout.column: gridLayout.columns == 3 ? 1 : 0
        }
    }

    Repeater {
        model: fruitModel
        SpinBox {
            value: value
            Layout.row: gridLayout.columns == 3 ? index : 3 * index + 2
            Layout.column: gridLayout.columns == 3 ? 2 : 0
        }
    }
}
2
  • 2
    I've tried this approach and after some modification it works, but it looks little bit ugly and sometimes it writes into output QGridLayoutEngine::addItem: Cell (1, 0) already taken and so on. Dec 5, 2017 at 9:10
  • @KamilZaripov: Please either edit this answer, or post an answer yourself. The Question-part is no place for answers. Dec 7, 2017 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.