How can I get property in gridview which is Repeater's child

Question

how can i get gridView.itemAtIndex(index).color?

what is i have tried:

contentrepeater.itemAt(5).gridView.model.color;
contentrepeater.itemAt(5).gridView.itemAtIndex(5).color;

But it doesn't work

Rectangle {
    anchors.top: bar.bottom
    Layout.fillHeight: true
    Layout.fillWidth: true

    Repeater {
        id: contentrepeater
        model: 11
        Rectangle {
            anchors.fill: parent
            color: 'red'
            visible: false

            GridView {
                id: gridView
                anchors.fill: parent
                anchors.topMargin: 10
                anchors.leftMargin: 10
                cellWidth: 150
                cellHeight: 170
                clip: true

                model: 11

                delegate: Rectangle{
                    height: 160
                    width: 140
                    color: '#333333'
                }
            }
        }
    }
}

Answer 1

Ultimately you probably don't want to do it that way. It will be hackish and error-prone. For example GridView only provides item access based on position coordinates, not indexes. So you'd need to dive into its children which are going to be created dynamically... it's possible but very messy and not really supported API.

You are better off defining your item models first, then using the GridView (or whatever) to display them. That way you can manipulate objects in the models and changes will be reflected in the view (instead of the other way around like you're trying now).

This example (based on your posted code) creates 4 layouts with 11 squares each and animates the color in each square using a timed script. Note that we need separate instances of the models for each of the GridViews within contentrepeater (otherwise it is only shown in the last view). So the example is a bit more convoluted since the item models are being created dynamically.

I should add that in a "real" application I'd use a different method of tracking the created item models instead of looking them up in the display hierarchy like I have it here. The main point this is trying to demonstrate is to manipulate the displayed items (delegates) via changes to the model data.

import QtQuick 2.9
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import QtQml.Models 2.3

Pane {
    id: root
    width: 400
    height: 650
    padding: 9

    // rectangle items to create per model
    property int itemsPerModel: 11
    // prototype object model
    property Component itemModel: ObjectModel {}
    // prototype model item
    property Component delegate: Rectangle {
        height: 30
        width: 30
        color: '#333333'
    }

    // Creates a new ObjectModel with some Rectangle items as children
    function newItemModel() {
        var model = itemModel.createObject(root);
        for (var i=0; i < itemsPerModel; ++i)
            model.append(delegate.createObject(root));
        return model;
    }

    SequentialAnimation {
        id: animate
        running: true
        loops: Animation.Infinite
        ScriptAction {
            property string nextColor: "blue"
            property int nextSet: 0
            property int nextItem: 0
            script: {
                contentrepeater.itemAt(nextSet)  // the Rectangle within the GridLayout
                    .children[0]                 // the gridView within the Rectangle
                    .model.get(nextItem)         // the model's delegate item (a Rectangle)
                    .color = nextColor;          // set the new color on it.

                // advance to next item or set of items.
                nextItem = (nextItem+1) % root.itemsPerModel;
                if (!nextItem)
                    nextSet = (nextSet+1) % contentrepeater.count;
                nextColor = (nextColor === "blue" ? "orange" : nextColor === "orange" ? "white" : "blue");
            }
        }
        PauseAnimation { duration: 100 }
    }

    GridLayout {
        columns: 2
        anchors.fill: parent

        Repeater {
            id: contentrepeater
            model: 4

            Rectangle {
                color: 'red'
                width: 150
                height: 170

                GridView {
                    id: gridView
                    anchors.fill: parent
                    anchors.topMargin: 10
                    anchors.leftMargin: 10
                    cellWidth: 40
                    cellHeight: 40
                    clip: true

                    // here we need a unique instance of the ObjectModel
                    model: root.newItemModel()
                }
            }
        }
    }
}