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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章