Suggestion needed

  • Hi,

    I am writing a QML that will read a bunch of rectanges (configuration such as widht, height, color, x, y) from a .txt file , and show it in GridView. I want to keep a option to either fill each rectangle with some text, or some image. Input on what needs to go in the rectanges is also part of .txt file.

    Here are sample Entry of the rectangle.txt
    Rectangles:width 10, height 20, x 0, y 10, isImage yes,color red, source ./abc.jpg
    Rectangles:width 110, height 120, x 10, y 110, isImage no,color yellow, source blah_blah

    Internally I store the configuration of each Rectangle in a class object called "CRect". Based on the row, and column, I populate the model (name of model=rectangles). My model stores the complete .txt data as a 2 D Array QVector<QVector<CRect*> >.

    I am partially done with a delegate(name of delegate RectDelegates) that will read the rectangles and
    does the painter job.

    Being novice to QT and QML, I am confused as to how I will stitch these 2 things together in a GridView. I tried putting things together in a QML, but it didn't worked. Is GridView the right choice?

    Here is my QML:
    import QtQuick 1.1
    // FileIO is FIle READER+WRITER
    import FileIO 1.0
    // RectData is Interface to get Filename form QML and Populate the Model
    import RectData 1.0

    Rectangle {
    id: main
    width: 360
    height: 360

    Text {
        id: mytxt
        text: qsTr("Hello World")
        anchors.centerIn: parent
    MouseArea {
        anchors.fill: parent
        onClicked: {
    FileIO {
        id: reader
        source: "./rectangles.txt"
        onError: console.log(msg)
    RectData {
        id: rectangles
    GridView {
        id: mygrid
        width: main.width
        height: main.height
        model: rectangles
        delegate: RectDelegate
      // ......... how do i show the rectangles ??
     //  Repeater { }
        Component.onCompleted: {
            width = main.width
            height = main.height
            // this line below shows the rectangle information in my main window. It works!
            mytxt.text =
           // this line below loads the rectangle informaiton into my model. It works. qDebug() prints it correctly!
            console.log (rectangles.populate(mytxt.text, width, height))
            mygrid.focus = true



  • Your problem comes from GridView. It is for grid, i.e. table of similar cells.
    You can't easily have different delegates for each cell. May be you shall try Column/Row combinations or a Flow?

  • Sergei, Thanks for writing. Do you have any references /examples that you can point me to?

Log in to reply