QML Canvas、ListView、ListModel、Delegate

绘制一个圆

		Canvas{ //选择框
            id: canvas
            anchors.fill: parent
            visible: mouse.enabled ? false : true
            onPaint: {
                //返回绘图上下文
                var ctx = getContext("2d")
                //将画布上所有像素清除为透明黑
                ctx.clearRect(0,0,canvas.width,canvas.height)
                //将当前路径重置为新路径
                ctx.beginPath()
                //描边子路径颜色
                ctx.strokeStyle = #aaff00
                //描边宽度
                ctx.lineWidth = 2
                //圆心坐标（x,y）半径r,（x+r，y）起点角度0，终点角度2*PI，逆时针（默认）画弧度
                ctx.arc(15, 15,10, 0, Math.PI*2, false)
                //用当前画笔式样描边子路径
                ctx.stroke()
            }
        }

画布重绘: canvas.requestPaint()
可以绑定ctx.arc()的参数到变量，在修改ctx.arc()的参数后调用重绘

QML列表增、删、改变顺序操作
（1）qml列表拖动改变顺序：

		ListModel{
            id: objmodel
        }
        Component{
            id: listViewDelegate
            Rectangle{
                id: wrapper
                width: 60
                height: 30
                MouseArea{
                    id: mousearea
                    anchors.fill: parent
                    onClicked:listview.currentIndex = index;
                    onPositionChanged:{
                        var pore = listview.indexAt(mousearea.mouseX + wrapper.x, mousearea.mouseY + wrapper.y);
                        if ((pore < 0) || (pore > objmodel.rowCount()))
                            return;
                        if(index !== pore){
                            objmodel.move(index,pore,1)
                        }
                    }
                }
            }
        }
        ListView {
            id: listview
            width:240
            height:180
            anchors.centerIn: parent
            delegate: listViewDelegate
            model:objmodel
            interactive: false
            focus: true
        }

（2）qml列表删除：

                Rectangle{//删除按钮
                    id: deletebtn
                    width: 20
                    height: 20
                    color: "#2E2F30"
                    visible: listViewDelegate.ListView.view.currentIndex === index ? true: false//listViewDelegate是ListView的代理的id
                    Image {
                        anchors.fill: parent
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/img/delete.png"
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                var tempVelocity = objmodel.get(index).velocity
                                //修改后面项的数据
                                for(var deleteOrder = index; deleteOrder < objmodel.rowCount(); deleteOrder++){
                                    objmodel.setProperty(deleteOrder, "velocity", objmodel.get(deleteOrder).velocity-1)
                                }
                                objmodel.remove(index,1)
                            }
                        }
                    }
                }

（3）qml列表增加：

    function addViedoToList(setPara1,setPara2){//在列表中中添加视频
        listModel.append({
                             "time": setPara1,
                             "velocity": setPara2
                         });
        listview.currentIndex = countNum -1 //选中当前项，listview是Listview的id
    }