QML-动态添加控件

QML中的控件的使用都是提前创建好的，在运行时就已经全部初始化完成了，会一一显示到画布上。但是如果不想提前创建好所有控件，想在运行时动态创建和删除，就需要自己写一些方法了。
第一步（也可以先执行第三步再回来从头执行）
准备好你需要动态创建的控件（我以一个滑动按钮为例），如果直接创建完成，如下：

创建代码如下，这是一个可以拖动改变位置，并记录TRUE OR FALSE 的类似开关的滑动按钮

Switch {
                id: sth
                x:500
                y:10
                text: "false"
                property int pos:0


                MouseArea {
                    anchors.fill: parent
                    property int lastX : 0
                    property int lastY : 0
                    onPressed: {
                        //鼠标按下时，记录鼠标初始位置
                        lastX = mouseX
                        lastY = mouseY
                    }
                    onPositionChanged: {
                        if (pressed) {
                            //鼠标按住的前提下，坐标改变时，计算偏移量，应用到目标item的坐标上即可
                            sth.x += mouseX - lastX
                            sth.y += mouseY - lastY
                        }
                    }

                    onClicked: {
                        selectObj1 = parent
                        if(sth.pos % 2 == 0) {
                            sth.position = 1
                            sth.text = "true"
                        } else {
                            sth.position = 0
                            sth.text = "flase"
                        }
                        sth.pos++
                    }
                }
            }

 

注意：onClicked中的第一句selectObj1 = parent，一定要写，将本控件赋值给定好的一个对象，selectObj1在后面第三步定义

第二步
定义两个按钮，一个设置为”创建开关“，一个为 ”删除开关“，并定义好Onclicked鼠标单击事件函数，目前函数还是空的，代码如下

Button{
            id: btn_test11
            width: 100
            height: 50
            x:10
            y:130
            text: "创建开关"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                     
                }
            }
        }

        Button{
            id: btn_test12
            width: 100
            height: 50
            x:10
            y:190
            text: "删除开关"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    
                }
            }

        }

第三步
定义一个变量 selectObj1 用于保存当前的点击控件的id（详细作用后面细说）

property var selectObj1 : ''

第四步
创建一个Component对象，因为该对象不是一个可见元素，所以对象里面包含一个Rectangle矩形框，里面也提供一些必要的变量，代码如下

Component{
        id: itemCompent1
        Rectangle{
            id: rec_itemCompent1
            color: "transparent"
            property var currentObject: ''
            //定义控件位置
        }
    }

第五步
最简单的一步，在第四步中的代码中有一处注释”//定义控件位置“，直接将第一步中准备好的控件复制到这个位置，复制后的代码如下

Component{
        id: itemCompent1
        Rectangle{
            id: rec_itemCompent1
            color: "transparent"
            property var currentObject: ''

            Switch {
                id: sth
                x:500
                y:10
                text: "false"
                property int pos:0


                MouseArea {
                    anchors.fill: parent
                    property int lastX : 0
                    property int lastY : 0
                    onPressed: {
                        //鼠标按下时，记录鼠标初始位置
                        lastX = mouseX
                        lastY = mouseY
                    }
                    onPositionChanged: {
                        if (pressed) {
                            //鼠标按住的前提下，坐标改变时，计算偏移量，应用到目标item的坐标上即可
                            sth.x += mouseX - lastX
                            sth.y += mouseY - lastY
                        }
                    }

                    onClicked: {
                        selectObj1 = parent
                        if(sth.pos % 2 == 0) {
                            sth.position = 1
                            sth.text = "true"
                        } else {
                            sth.position = 0
                            sth.text = "flase"
                        }
                        sth.pos++
                    }
                }
            }
        }
    }

第六步

需要定义一个方法，用于控件的创建，QML中自带的creatObject方法，这个方法需要定义的到一个控件创建的组件中，这里我定义到了一个网格布局中，也可以定义到别的地方，代码如下

GridLayout{
        id: gridLayout_family_01
        width: 200
        height: 200
        function createItem(){
            var obj = itemCompent1.createObject(gridLayout_family_01, {"Layout.alignment" : Qt.AlignHCenter, "width" : 200 , "height" : 200 })
        }
    }

注意 itemCompent1 就是第四步中Component对象的id， gridLayout_family_01为这个网格布局的id
第七步
还记得第二步中创建好的两个按钮 ，”创建开关“和 ”删除开关“的单击信号函数还没有写内容，最后就是写里面的内容，代码如下

Button{
            id: btn_test11
            width: 100
            height: 50
            x:10
            y:130
            text: "创建开关"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    gridLayout_family_01.createItem()
                }
            }
        }

        Button{
            id: btn_test12
            width: 100
            height: 50
            x:10
            y:190
            text: "删除开关"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    selectObj1.destroy()
                }
            }

        }

按下创建按钮后，就调用gridLayout_family_01的创建控件方法
按下删除按钮后，就将第三步中创建的变量destroy就删除了，因为在第一步的时候已经用selectObj1 = parent，将本控件对象赋值给这个变量了，这就是第一步的关键。
最后实现的效果如图

点击创建开关按钮时会创建出滑动按钮，（这里我点击了3次，所以创建了3个）

 

当点击某一个开关后，按下删除开关按钮，就可以将控件删除了