我如何在Repeater的孩子的GridView中获取属性

时间:2019-09-05 01:51:25

标签: qt qml

如何获取gridView.itemAtIndex(index).color?

我尝试了什么:

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

但这不起作用

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'
                }
            }
        }
    }
}

1 个答案:

答案 0 :(得分:0)

最终,您可能不想这样做。这将很容易出错且容易出错。例如,GridView仅基于位置坐标而不是索引提供项目访问。因此,您需要深入研究将动态创建的子级...这是可能的,但是非常凌乱且不真正支持API。

最好先定义项目模型,然后使用GridView(或其他任何方法)显示它们。这样一来,您就可以在模型中操作对象,并且更改将反映在视图中(而不是像您现在尝试的相反)。

此示例(根据您发布的代码)创建4个布局,每个布局具有11个正方形,并使用定时脚本对每个正方形中的颜色进行动画处理。请注意,GridView中的每个contentrepeater需要模型的单独实例(否则,仅在最后一个视图中显示)。因此,由于项目模型是动态创建的,因此该示例更加复杂。

我应该补充一点,在“真实”应用程序中,我将使用另一种方法来跟踪创建的项目模型,而不是像在此显示的那样在显示层次结构中查找它们。试图说明的重点是通过更改模型数据来操纵显示的项目(代理)。

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()
                }
            }
        }
    }
}

enter image description here