QML：在中继器上调用 itemAt 返回 null

Question

我的代码：

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    Column {
        Row {
            Repeater {
                id: rectRepeater
                model: 3
                Rectangle {
                    width: 30
                    height: 30
                    color: "red"
                    radius: 10
                }
            }
        }
        Row {
            Repeater {
                model: 3
                Text {
                    text: rectRepeater.itemAt(0).width;
                }
            }
        }
    }
}

我收到此错误消息：

TypeError: 无法读取 null 的属性“宽度”

我发现this post 说解决方案是像这样使用Component.onCompleted（只需在Text 对象中插入一个Component.onCompleted 处理程序）：

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    Column {
        Row {
            Repeater {
                id: rectRepeater
                model: 3
                Rectangle {
                    width: 30
                    height: 30
                    color: "red"
                    radius: 10
                }
            }
        }
        Row {
            Repeater {
                model: 3
                Text {
                    Component.onCompleted: {
                        text: rectRepeater.itemAt(0).width;
                    }
                }
            }
        }
    }
}

但这失败并出现同样的错误。

有什么想法吗？

Answer 1

当您调用itemAt(0) 时，rectRepeater 项目不会退出。

当rectRepeater 被实例化时，你应该调用itemAt。

Window {
    visible: true
    width: 640
    height: 480
    Column {
        Row {
            Repeater {
                id: rectRepeater
                model: 3
                Rectangle {
                    width: 30
                    height: 30
                    color: "red"
                    radius: 10
                }

            }
        }
        Row {
            Repeater {
                id: textrep
                model: 3
                Text {
                    }
            }
        }
        Component.onCompleted: {
            //Here all object are instantiated
            for (var i = 0; i< textrep.count; i++){
                textrep.itemAt(i).text = rectRepeater.itemAt(0).width
            }
        }
    }
}

Answer 2

我会选择条件绑定

Text {
    text: rectRepeater.count > 0 ? rectRepeater.itemAt(0).width : 0;
}

一旦 rectRepeater 实际上创建了至少一个委托，就会读取该委托的值。 即使 rectRepeater 的模型在某个时候再次变为空，或者索引 0 处的项目改变了它的宽度，这仍然有效