首页 > 解决方案 > 如何在作为Repeater的孩子的gridview中获取属性

问题描述

我怎样才能得到 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'
                }
            }
        }
    }
}

标签: qtqml

解决方案


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

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

此示例(基于您发布的代码)创建 4 个布局,每个布局有 11 个正方形,并使用定时脚本为每个正方形中的颜色设置动画。请注意,我们需要为其中的每个GridViews提供单独的模型实例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()
                }
            }
        }
    }
}

在此处输入图像描述


推荐阅读