Question

I’m attempting to build a reusable QML Component that internally hosts a GridView. Each element in the GridView has a set of behaviors (mostly display and mouse-based stuff) that is common throughout the application. However, what is displayed inside the GridView elements changes depending on the use-case. (That is, the same encapsulated Component for one GridView, but elsewhere in the application it might use a different Component.)

So, what I would like to do is have each invocation supply a delegate that is added to each element in the GridView, which is already a delegate. In other words, something like this:

MyGrid.qml

import QtQuick 1.1

Rectangle {
  id: myGrid
  objectName: "myGrid"

  property Component internalDelegate
  property variant internalModel

  GridView {
    anchors.fill: parent

    delegate: Row {
      Loader {
        sourceComponent: myGrid.internalDelegate
      }
    }

    model: parent.internalModel
  }
}

The idea is that the Loader inside the GridView delegate loads the user-supplied delegate, which would look something like this:

Main.qml

import QtQuick 1.1

Rectangle {
  anchors.fill: parent

  width: 300
  height: 200

  MyGrid {
    anchors.fill: parent

    internalDelegate: Text {
      text: name
    }

    internalModel: ListModel {
      ListElement {
        name: "a"
      }

      ListElement {
        name: "b"
      }
    }
  }
}

However, this doesn’t work. QML reports that “name” is an unknown variable inside the Text element. If I replace the name variable with a string (i.e. “hello”), it works as expected.

My question is, how can I pass the “name” variable to internalDelegate, or better yet, make the entire Model available so internalDelegate can access all of them (since the caller is defining the model as well).

A side question is: Is there a better way to do this?

Answer 1

I solved it like this:

MyGrid.qml

import QtQuick 1.1

Rectangle {
    id: myGrid
    objectName: "myGrid"

    property Component internalDelegate
    property variant internalModel

    GridView {
        id: grid
        anchors.fill: parent

        delegate: Row {
            Loader {
                sourceComponent: myGrid.internalDelegate
                property variant modelData: grid.model.get(index)
            }
        }

        model: parent.internalModel
    }
}

main.qml

import QtQuick 1.1

Rectangle {
    anchors.fill: parent

    width: 300
    height: 200

    MyGrid {
        anchors.fill: parent

        internalDelegate: Text {
            text: modelData.name
        }

        internalModel: ListModel {
            ListElement {
                name: "a"
            }

            ListElement {
                name: "b"
            }
        }
    }
}

Don’t know if it’s “better”, but it has less and simpler code. The list models are a bit awkward and not really consistent in QML.
And keep in mind that model.get(index) is owned by the GridView because the whole model is owned by that. So if you want to use that object after the list was destroyed you have to reparent or copy it.