常用QML 創建組件實踐

main.qml

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    width: 800
    height: 600
    visible: true

    Rectangle {
        id: mainRect
        anchors.fill: parent
        property var mainRectComponent: null

        Column {
            id: mainColumn
            spacing: 5

            width: parent.width
            property var count: 0

            function deleteItems(object) {
                object.destroy()
            }

            function createItem() {
                var color = 'red'
                if (mainColumn.count % 3 === 1)
                    color = 'yellow'
                else if (mainColumn.count % 3 === 2)
                    color = 'blue'
                mainColumn.count++

                //創建QML文件對象
                var Component = Qt.createComponent("qrc:/TestCompont.qml")
                var obj2 = Component.createObject(mainColumn,{'color': "red",'width': mainRect.width});
                obj2.setCurrentText('Component' + mainColumn.count.toString() + ', From File TestComponent')
                obj2.deleteThis.connect(mainColumn.deleteItems)
            }
        }


        Button {
            anchors.top: mainColumn.bottom
            anchors.topMargin: 10
            anchors.right: mainRect.right
            anchors.rightMargin: 10
            text: '添加'

            onClicked: {
                mainColumn.createItem()
            }
        }

    }
}

 

 

TestComponent.qml

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Rectangle {
    id: compontRect
    color: Qt.rgba(0.8, 0.4, 0.4, 1.0)
    implicitWidth: 200
    implicitHeight: 50
    property var currentObject: ''

    signal deleteThis(var obj)

    // 設置文字的內容
    function setCurrentText(textName) {
        interText.text = "123"+textName
    }

    Text {
        id: interText
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.verticalCenter: parent.verticalCenter
        text: qsTr("text")
    }
    Button {
        anchors.margins: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        text: '刪除'

        onClicked: {
            //compontRect.deleteThis(compontRect)
            compontRect.destroy()
        }
    }

    Component.onCompleted: {
        compontRect.currentObject = parent
    }
}

 

部件不定義在文件內部，減少耦合

 

刪除實踐可以子部件自己實現，也可以由調用者決定。

 

                //創建QML文件對象

                var Component = Qt.createComponent("qrc:/TestCompont.qml")

               //obj2  需要 (parent, {param})   返回即是對象，通過對象調用方法，信號綁定操作。         
               var obj2 = Component.createObject(mainColumn,{'color': "red",'width': mainRect.width});

                obj2.setCurrentText('Component' + mainColumn.count.toString() + ', From File TestComponent')

                
              //obj2.deleteThis.connect(mainColumn.deleteItems)   調用者決定按鈕功能