Question

我有一个带有嵌套元素的网格（矩形内的文本和鼠标区域）：

    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]

...
Grid{
        rows: 5
        columns: 5
        spacing: 5
        anchors.centerIn: parent
        Repeater{
            id: gridRect
            model: 25
            Rectangle{
                id: rect
                width: 50
                height: width
                color: "white"
                radius: 5
                Text {
                    id: tttt
                    anchors.centerIn: parent
                    color: "lightBlue"
                    text : index
                }
                MouseArea{
                    anchors.fill: parent
                }

            }
        }

    }

我想随机更改网格中某些正方形和文本的颜色，但是我不知道如何访问它们，我尝试使用如下计时器：

Timer {
        id: alfa
        interval: 500; running: true; repeat: true
        onTriggered: {

            /*if random square not white , a color from color array is picked to change it
            else random square.color = "white"*/
        }

    }
    Timer {
        id: beta
        interval: 1000; running: true; repeat: true
        onTriggered: {
           //changes the text of a random tttt element in the grid
        }
    }

我尝试了很多事情，但都失败了，例如使用属性绑定似乎改变了整个网格的颜色和文本，而不是单个正方形，我根本不了解如何访问嵌套元素和中继器子对象，而文档是'不能帮我该怎么办？

Answer 1

由于他们要修改视图显示的信息，因此您不应直接与视图交互，而应创建模型并通过它来修改数据：

property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]

ListModel{
    id: mymodel
    Component.onCompleted: {
        for(var i=0; i<25; i++){
            mymodel.append({"text": ""+i, "color": "white"})
        }
    }
}
Grid{
    rows: 5
    columns: 5
    spacing: 5
    anchors.centerIn: parent
    Repeater{
        id: gridRect
        model: mymodel
        Rectangle{
            id: rect
            width: 50
            height: width
            color: model.color
            radius: 5
            Text {
                id: tttt
                anchors.centerIn: parent
                color: "lightBlue"
                text : model.text
            }
            MouseArea{
                 anchors.fill: parent
            }
        }
    }
}
Timer{
    id: alfa
    interval: 500; running: true; repeat: true
    onTriggered: {
        var random_color = colorArray[Math.floor(Math.random() * colorArray.length)]
        var random_ix = Math.floor(Math.random() * mymodel.count);
        var elem = mymodel.get(random_ix)
        elem.color = elem.color === "white" ? random_color : "white"
    }
}
Timer{
    id: beta
    interval: 1000; running: true; repeat: true
    onTriggered: {
        // https://stackoverflow.com/a/38620178
        var random_str = "";
        var alphabet = "abcdefghijklmnopqrstuvwxyz";
        while (random_str.length < 6) {
            random_str += alphabet[Math.floor(Math.random() * alphabet.length)];
        }
        var random_ix = Math.floor(Math.random() * mymodel.count);
        var elem = mymodel.get(random_ix)
        elem.text = random_str
    }
}

Answer 2

您可以想到中继器正在工作，就像您刚刚将该Rectangle复制到Grid 25次一样。这意味着要访问其中之一，您必须访问网格的子项。

您可以使用早期版本的eyllanesc的响应，并在ListModel中编辑数据（我认为这是正确的方法）

或者，您也可以使用The 'children' function，它也应该出现在Grid中，它会返回Grid拥有的子级数组，这将是您通过Repeater添加的矩形。

我个人将使用ListModel方法。

如何访问随机中继器的孩子的属性？

2 个答案: