qml自定义控件——listview（自由增减list成员）

功能

最近，根据项目的需求，需要在qml编写的界面中添加一个功能：由用户自由输入参数进行调试，本来是一个或几个lineEdit就能实现输入的需求，但是由于该界面需要应用于不同类型的机器里，每个机器的参数数量都一样，所以，最终设计成了一个空白的Listview，最下面添加了“增加”、“删除”两个button来实现listview中输入的lineEdit数量的增减。当然，根据不同的需求，可以增加更多不同功能的button，这里就只写这两个最基本的button。

另外，我是直接写进主代码里的，没有单独封装成一个listview的qml，所以下面的代码，直接拷进去，自己调一下大小，重新定位一下，应该可以直接使用。有需要的可以封装出去再调用，怎么调用不用我多说吧。

先贴出来版本环境，qml的版本问题烦的一匹。

    import QtQuick 2.2
    import QtQuick.Controls 2.4
    import QtQuick.Layouts 1.3
	import QtQuick.Controls.Styles 1.4
	import QtQuick.Dialogs 1.2

不一定都要一样，主要是看一下版本，里面也有几个import这个listview并不需要，我是直接从项目代码里拷出来的，要用的人看着改吧。

listview–>Delegate

这一部分是listview的主代理部分，我一般在qml里写listview，除非内容特别少，都是喜欢把delegate和model这两块写到外面，分离出来，便于修改增添。不多逼逼，直接贴代码了——

    Component{
        id: debugDelegate
        Rectangle{
            id: lineedit
            width: 200
            height: 80
            color: ListView.isCurrentItem ?"lightblue":t_background_color             //设置选中栏蓝底高亮效果

       		 //在每个lineEdit前加一个选框，选中操作，防止误改误删
            CheckBox{                                          
                id: checked
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.verticalCenter: parent.verticalCenter
                width: 30
                height: 60
                checked: false
                onCheckedChanged: {
                    if (checked.checked === true)
                    {
                        ischosen = true
                        paramlist.currentIndex = index    //实现item切换
                    }
                    else
                    {
                        ischosen = false
                        paramlist.currentIndex = 0        //实现item切换，取消选框选择之后，默认弹回顶部栏
                    }
                }
            }

			//自定义的lineEdit，到处都有
            LineEdit{
                width: lineedit.width / 6 * 5
                height: 60
                anchors.left: checked.right
                anchors.leftMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                enabled: checked.checked                           //checkBox的选择锁定
            }
        }
    }

以上的代码，即为这个listView的代理模块，每次增减的对象都是一个被checkBox锁住的lineEdit。

PS：这里的选框虽然可以多选，但是并不能进行批量删除等操作，因为我的项目里没有这个需要，所以我是直接用listview的currentinedx进行item定位的，而currentindex只有一个，所以如要要实现批量操作的话，可以把选中项目的index提取出来，放进一个数组里，然后在操作的位置，遍历读取数组元素，具体怎么实现，自己写去吧（￣へ￣）

listview–>Model。

因为需要要求最开始是一个空的listview，所以这里的model非常简单，什么都不需要，只要声明一个对象给listview就够了。

    Component{
        id: debugModel
        ListModel{
            id: listmodel
        }
    }

id加不加随便，看个人需要有没有定位要求之类的，自己用的时候根据需要改吧。

listview

接下来就是最重要的主体部分，其实listview的主体非常简单，只是对上面两个模块的调用，也没加什么别的东西。

        ListView{
            id: paramlist
            width: 200
            height: 400
            anchors.top: parent.top
            clip: true
            focus: true
            
            delegate: debugDelegate
            model: debugModel.createObject(paramlist)
        }

Button

最后，就是实现listview中item的增减了，这里的两个按钮，我并没有和listview写进一个rectangle里，因为需要可能随时会改，到时候，改变按钮组的rectangle不会影响到上面的listview，所以个人建议在listview下面单独写一个按钮组的retangle，便于以后的修改。

增加按钮

            Button{
                id: addBtn
                width: 200
                height: 60
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                
                background: Rectangle{
                    border.color: "gray"
                    border.width: 1
                    gradient: Gradient {
                        GradientStop {
                            position: 0.00;
                            color: "#fdfdfd";
                        }
                        GradientStop {
                            position: 1.00;
                            color: Qt.rgba(0.7725, 0.7725, 0.7725, 1.0);
                        }
                    }
                }

                Text {
                    id: add
                    text: qsTr("增加行")
                   // font.bold: true
                    font.pixelSize: 30
                    font.family: "华文新魏"
                    anchors.centerIn: parent
                }

                onClicked: {
                    paramlist.model.append({});           //增减item，注意（）里面的{}，不要写反了，因为model是空的，所以{}也是空的
                }
            }

删除按钮

为了防止误删，除了checkBox的选择之外，还加了一个messagedialog算是第二层保险，删除部分的代码，写进messagedialog里。

            Button{
                id: deleteBtn
                width: 200
                height: 60
                anchors.left: addBtn.right
                anchors.leftMargin: 15
                anchors.verticalCenter: parent.verticalCenter

                background: Rectangle{
                    border.color: "gray"
                    border.width: 1
                    gradient: Gradient {
                        GradientStop {
                            position: 0.00;
                            color: "#fdfdfd";
                        }
                        GradientStop {
                            position: 1.00;
                            color: Qt.rgba(0.7725, 0.7725, 0.7725, 1.0);
                        }
                    }
                }

                Text {
                    id: deletes
                    text: qsTr("删除行")
                    font.family: "华文行楷"
                  //  font.bold: true
                    font.pixelSize: 30
                    anchors.centerIn: parent
                }

                onClicked: {
                    if (ischosen)
                    {
                        delete_dialog.visible = true
                    }
                }

                MessageDialog{
                    id: delete_dialog
                    icon: StandardIcon.Question
                    title: "删除操作，谨慎确认"
                    text: "是否删除当前选中行"
                    standardButtons: StandardButton.Yes | StandardButton.No
                    onYes: {        
                        paramlist.model.remove(paramlist.currentIndex);
                        ischosen = false
                        paramlist.currentIndex = 0
                    }
                }
            }

效果图

动态图呢？
不存在的，
图我都懒得拍，
更别说动态的，
我的信仰回笼教的教义不支持我做这么勤劳的事。
ヾ(⌐■_■)ノ 帅瞎