Problem with GridView

lorow23

So hello fellow Qt Quick developers. Since a while I was making a simple program for creating customizable color palettes. User will create and customize the whole palette by adding and customizing rectangles. The best way I've found to display them and get the flickable to work was by using GridView.

And here is the problem, I would need to somehow access particular rectangle's color variable in order to customize it. But, as far as I know, the gridView component isn't allowing me to do such a thing. My best thought (Please, don't punch me for that) was to create unique id while creating a rectangle, and later on, apply it by using JS. And as you can predict, this approach isn't working at all (well, maybe only this applying part). So, is there a better way to do it? And if yes, how?

Here is my code for GridView:

GridView {
            id: gridView1
            flickableDirection: Flickable.VerticalFlick
            snapMode: GridView.NoSnap
            highlightRangeMode: GridView.NoHighlightRange
            highlightMoveDuration: 148
            flow: GridView.FlowLeftToRight
            layoutDirection: Qt.RightToLeft
            anchors.rightMargin: 5
            anchors.leftMargin: 5
            anchors.bottomMargin: 10
            anchors.topMargin: 10
            delegate: Item {
                height: 100
                Column {
                   ColorBlock
                   {
                     width: 100
                     height: 100
                   }
                }
            }
            model: ListModel {
              id: tEST
            }
            cellHeight: 100
            cellWidth: 100
        }

and for my rectangle :

Rectangle {
    Variables
    {
        id:vars
    }

    property string namE: vars.normalName
    property  var colorR
    id: namE
    width: 70
    height: 70
    color: colorR

    MouseArea {
        id: mouseArea1
        anchors.fill: parent

        onClicked:
        {
            console.log("test")
            console.log(namE.namE)
        }
    }
}

and variables:

Item {
     id : varialbeS
     property string baseNamne: "justTestName";
     property int numbeR: 0
     property string normalName: baseNamne + numbeR.toString();

     property string objectNamE
}

Yes, I know, it was very stupid approach, but I'm still learining.

Thanks in advance!

p3c0

@lorow23 The best approach for this is to store the information in the model and not the delegate.

lorow23

@p3c0 I will try that, but how I should acces particular rectangles then?

p3c0

@lorow23

but how I should acces particular rectangles then?

With the model approach it wont be required. The delegate items will get the data from model. Also when required you just need to update the model with new data from the delegate or from outside.
For eg. ListModel has several methods to access the data.