QML动态创建、删除控件

写在前面

这里有两篇文章：
1、Qt Quick 组件与对象动态创建详解
2、qml动态创建方法
第一篇中相关的原理什么的都写的非常详细，也有实例供练手，第二篇中的例子则简单一点，但易于理解和实践。这里笔者基于第二篇文章作一下补充。在第二篇文章中，作者使用一个按钮，点击可以动态添加控件，然后点击控件内的“删除”按钮可以删除控件本身。本篇笔者补充的是，使用外部按钮删除刚刚创建的控件。

还有另一种方法也可以实现控件的动态增加和减少，就是用QML的Model/View系统，当控件量比较少的时候，可以用Repeater实现。

第一种方法

第一部分：制作需要生成的控件

property var selectObj : ''
property int xTest : 0

Component{
    id: itemCompent
    Rectangle{
        id: rec_itemCompent
        color: "transparent"
        property var currentObject: ''
        function setBtnText(textName){
            btn_itemCompent.text = textName
        }
        //signal deleteThis(var obj)
        function showName() {
            console.log(btn_itemCompent.text)
        }
        Button{
            id: btn_itemCompent
            width: parent.width *0.95
            height: parent.height
            anchors.centerIn: parent
            text: "+"
            onClicked: {
                //rec_itemCompent.deleteThis(rec_itemCompent)
                selectObj = parent
            }
        }
        Component.onCompleted: {
            rec_itemCompent.currentObject = parent
        }
    }
}

第二部分：控件布局、生成

GridLayout{
    id: gridLayout_family_00
    width: parent.width
    height: parent.height *0.85
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    columns: 3
    rows: 3
//  function deleteItems(object) {
//      object.destroy()
//  }
    function createItem(){
        var obj = itemCompent.createObject(gridLayout_family_00, {"Layout.alignment" : Qt.AlignHCenter, "width" : parent.width *0.3, "height" : parent.height *0.25})
        obj.setBtnText(xTest.toString())
        //obj.deleteThis.connect(gridLayout_family_00.deleteItems)
    }
}

第三部分：创建、获取按钮名称、删除按钮

Button{
    id: btn_test01
    width: 100
    height: 50
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 100
    anchors.horizontalCenter: parent.horizontalCenter
    text: "创建按钮"
    onClicked: {
        xTest++
        gridLayout_family_00.createItem()
    }
}
Button{
    id: btn_test02
    width: 100
    height: 50
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 100
    text: "获取按钮文字"
    onClicked: {
        selectObj.showName()
    }
}
Button{
    id: btn_test03
    width: 100
    height: 50
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 100
    anchors.right: parent.right
    text: "删除按钮"
    onClicked: {
        selectObj.destroy()
    }
}

利用Repeater和Model实现

Repeater参考这篇文章：QML之Repeater重复器

笔者这里的例子很简单，按下“增加”按钮，网格布局中会增加按钮，按钮的文字从0开始增加。输入需要减少的那个按钮的文字，然后按减少就可以实现布局按钮的减少。

property int btnNo: 0

ListModel{
    id: myModel
}
Component{
    id: myDelegate
    Button{
        width: 50
        height: 25
        text: btnName
    }
}
Grid{
    Repeater{
        id: myRepeater
        model: myModel
        delegate: myDelegate
    }
}
Button{
    id: btn_add
    width: 100
    height: 50
    text: "增加"
    anchors.centerIn: parent
    onClicked: {
        btnNo++
        myModel.append({btnName: btnNo.toString()})
    }
}
Button{
    id: btn_del
    width: 100
    height: 50
    text: "删除"
    anchors.left: btn_add.right
    anchors.top: btn_add.top
    onClicked: {
        for(var i = 0; i < myRepeater.count; i++)
        {
            if (myRepeater.itemAt(i).text === txt_input.text){
                myModel.remove(i)
            }
        }
    }
}
Rectangle{
    width: 100
    height: 50
    color: "yellow"
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    TextInput{
        id: txt_input
        verticalAlignment: TextInput.AlignVCenter
        anchors.fill: parent
    }
}

效果呢看下图：