qml之动态表格效果

实现一个动态的表格效果，可以随意地添加、删除的操作。

Rectangle{
    id:tableHeadRect
    anchors.top: parent.top
    anchors.topMargin: 156
    anchors.left: parent.left
    anchors.leftMargin: 40
     720
    height: 22
 
    Text {
        text: qsTr("通讯标识")
        font.family: "Microsoft YaHei"
        font.pixelSize: 14
        color: "#A6000000"
        Text {
            text: qsTr("*")
            anchors.top:parent.top
            anchors.topMargin:2
            anchors.left: parent.right
            anchors.leftMargin: 8
            font.family: "Microsoft YaHei"
            font.pixelSize: 14
            color: "#F84430"
        }
    }
    Text {
        text: qsTr("通讯地址")
        anchors.left: parent.left
        anchors.leftMargin:160
        font.family: "Microsoft YaHei"
        font.pixelSize: 14
        color: "#A6000000"
        Text {
            text: qsTr("*")
            anchors.top:parent.top
            anchors.topMargin:2
            anchors.left: parent.right
            anchors.leftMargin: 8
            font.family: "Microsoft YaHei"
            font.pixelSize: 14
            color: "#F84430"
        }
    }
 
    Text {
        text: qsTr("备注标签")
        anchors.left: parent.left
        anchors.leftMargin:426
        font.family: "Microsoft YaHei"
        font.pixelSize: 14
        color: "#A6000000"
    }
    Text {
        text: qsTr("操作")
        anchors.left: parent.left
        anchors.leftMargin:692
        font.family: "Microsoft YaHei"
        font.pixelSize: 14
        color: "#A6000000"
    }
}//Rectangle
 
 
ListModel {
    id: listModel
    ListElement {
        addr:""
        name:""
        symbol:""
    }
}
 
ListView{
    id: listview
     parent.width
    height: 180
    anchors.top: tableHeadRect.bottom
    anchors.topMargin:6
    model: listModel
    delegate: listDelegate
    spacing: 8
    clip: true
    //interactive: false
 
   ScrollBar.vertical: ScrollBar {       //滚动条
       anchors.right: listview.right
        10
       active: true
 
       contentItem: Rectangle {
           radius: width/3        //bar的圆角
           color: "#26000000"
       }
   }
}// ListView
 
Component{
    id: listDelegate
    Rectangle{
        id: listItem
         parent.width
        anchors.left: parent.left
        anchors.leftMargin: 40
        height: 32
 
        TextField{
            id:commuAddrData
            placeholderText:qsTr("请输入")
            font.family: "Microsoft YaHei"
            font.pixelSize: 14
            144
            height:32
            validator: RegExpValidator { regExp: /[0-9]+/ }
            background: Rectangle {
                border.color: "#26000000"
            }
            onTextChanged: {
                addr=commuAddrData.text
            }
        }
 
        TextField{
            id:equipNameData
            anchors.left: parent.left
            anchors.leftMargin:160
            placeholderText:qsTr("如：XX省XX市XX区XX楼层")
            font.family: "Microsoft YaHei"
            font.pixelSize: 14
            250
            height:32
            background: Rectangle {
                border.color: "#26000000"
            }
            onTextChanged: {
                name=equipNameData.text
            }
        }
 
        TextField{
            id:symbolData
            anchors.left: parent.left
            anchors.leftMargin:426
            placeholderText:qsTr("可填写特殊的备注信息，用逗号分隔")
            font.family: "Microsoft YaHei"
            //color: Qt.rgba(0,0,0,0.25)
            font.pixelSize: 14
            250
            height:32
            background: Rectangle {
                border.color: "#26000000"
            }
            onTextChanged: {
                symbol=symbolData.text
            }
        }
 
        Button{
             60
            height: 32
            anchors.left: parent.left
            anchors.leftMargin:692
            background: Text{
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 14
                color: "#228FFF"
                text: "删除"
                font.family: "Microsoft YaHei"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    equipNameExistText.text=""
                    listview.currentIndex = index
                    listview.model.remove(listview.currentIndex);
                }
            }
        }
    }// Rectangle
}// Component
 
Button{
     88
    height: 32
    anchors.left: parent.left
    anchors.leftMargin:40
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 60
    background: Rectangle{
        color: "#FFFFFFFF"
        radius: 2
        border.color: "#17000000"
        Text{
            text: qsTr("添加")
            anchors.centerIn: parent
            font.pixelSize: 14
            font.family: "Microsoft YaHei"
            color: "#A6000000"
        }
    }
 
    onClicked: {
        //to do
        listview.model.append({"addr":"","name":"","symbol":""})
        listview.positionViewAtIndex(listview.count - 1, ListView.End)
    }
}