How to set dynamic cellWidth of gridview?

Pooja

My delegate has different width depending on index.need to set dynamic cellwidth of gridview.as i cant access the index outside delegate how can i set dynamic cellwidth of gridview?

ODБOï

hi,
@Pooja said in How to set dynamic cellWidth of gridview?:

access the index

sorry if i misunderstood, you cannot do this ?

//MyDelegate.qml
Item{
property int myIndex 
...
...
width : myIndex*5
}

GridView {
    width: 300; height: 200

    model: ContactModel {}
    delegate: MyDelegate{
        myIndex : index
    }
}

Pooja

the answer you have given is accesing index inside level.I want to access index outside the delegate i.e gridview level to set cellwidth dynamic according to index.

for example
GridView {
width: 300; height: 200
cellwidth:index // I cant write this as index is not accessible outside delegate
model: ContactModel {}
delegate: Item{

}

Shrinidhi Upadhyaya

Hi @Pooja , first thing is that cellWidth is a common property so if you set cellWidth to 50 then it will affect all the elements inside the gridView, you cant like set different cellWidth for different items at different indexes. Can you tell me what you want your UI to look like so that i can provide a more optimal solution.

If you want to access index outside the delegate, you can just take a temp variable and update it on any operation or signal,you can access it like this, here is a sample code:-

GridView {
        id: view

        anchors.fill: parent

        property int tempIndex: 0

        model: 4
        cellWidth: 50 * tempIndex
        cellHeight: 50


        delegate: Rectangle {
            height: view.cellHeight
            width: view.cellWidth
            color: "red"
            border.color: "black"

            Component.onCompleted: {
                view.tempIndex = index
            }

           MouseArea {
                anchors.fill: parent
                onClicked: {
                    view.tempIndex = index
                }
            }

            Text {
                anchors.centerIn: parent
                text: index
            }
        }
    }

Pooja

yes i know i cant access directly the index outside delegate and i wanted to do it with gridview.