QML组件的访问以及修改视图delegate的属性

1.访问通过QML文件定义的组件

通过对qml文档实例化建立对象。
访问组件实例中的属性：组件实例的id.属性名
调用组件实例中的函数：组件实例的id.函数名()

2.访问通过Loader定义的组件

通过对Loader动态加载组件来创建对象。
访问Loader加载组件的属性：Loader的id.item.属性名
调用Loader加载组件的函数：Loader的id.item.函数名()

注意：
使用Loader的item属性可以访问到所加载的组件的顶层的对象。因此只能访问到顶层对象中定义的属性和方法。不能访问组件内部更深的结构层次中定义的属性。若想访问更深层次中的属性，需要将其定义为顶层的属性。

3.访问视图委托delegate中的组件

在视图的委托delegate中，并不像1,2中创建了组件实例对象，因此也无法在组件外部访问。以下代码中试图访问ListView视图的委托中的属性，是无法成功的。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListView {
        id: myView
        anchors.left: parent.left
        anchors.leftMargin: 20
        width: 100
        height: 200
        model: ListModel {
            id: myModel
            ListElement {type: "Dog"; age: 8}
            ListElement {type: "Cat"; age: 5}
        }
        delegate: Component {
            Text {
                id: myText
                text: type + ": " + age;
                font.bold: true
                color: "black"
            }
        }
    }
    Button {
        id: myButton
        anchors.bottom: parent.bottom
        text: "change"
        onPressed: {
            //下面代码访问视图委托的组件中的属性，无法成功。
            myText.color = "red";
        }
        onReleased: {
            myText.color = "black";
        }
    }
}

可改为如下方式。直接看代码。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListView {
        id: myView
        anchors.left: parent.left
        anchors.leftMargin: 20
        width: 100
        height: 200
        model: ListModel {
            id: myModel
            ListElement {type: "Dog"; age: 8}
            ListElement {type: "Cat"; age: 5}
        }
        delegate: Component {
            Text {
                id: myText
                text: type + ": " + age;
                font.bold: true
                //方法1：将组件内部的属性绑定函数
//                color: {
//                    if (myButton.pressed) {
//                        return "red"
//                    } else {
//                        return "black"
//                    }
//                }
                //方法2：使用binding给属性绑定函数
//                Component.onCompleted: {
//                    color = Qt.binding(function() {
//                        return myButton.pressed ? "red" : "black"
//                    })
//                }
                //方法3：使用Connections信号处理器
                Connections {
                    target: myButton
                    onPressed: {
                        color = "red"
                    }
                    onReleased: {
                        color = "black"
                    }
                }
            }
        }
    }
    Button {
        id: myButton
        anchors.bottom: parent.bottom
        text: "change"
    }
}