[qml] Implement a multi-select listView

支持

• 单选
• ctrl多选
• shift多选

import QtQuick 2.15
import QtQml.Models 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15


ApplicationWindow {
    id: root
    visible: true
    minimumWidth: 200
    minimumHeight: 200
    property int lastIndex: 0
    Item {
        width: 200; height: 200
        DelegateModel {
            id: visualModel

            model: ListModel {
                ListElement { name: "Apple" }
                ListElement { name: "Orange1" }
                ListElement { name: "Apple1" }
                ListElement { name: "Orange2" }
                ListElement { name: "Apple2" }
                ListElement { name: "Orange3" }
                ListElement { name: "Apple3" }
                ListElement { name: "Orange4" }
                ListElement { name: "Apple4" }
            }

            groups: [
                DelegateModelGroup {
                    id : delegateModelGroup
                    name: "mulitSelect"
                    function removeAll(){
                        var count = delegateModelGroup.count;
                        if(count !== 0){
                            delegateModelGroup.remove(0,count);
                        }
                    }
                }
            ]
            delegate: Rectangle {
                id: item
                height: 25
                width: 200
                color: item.DelegateModel.inMulitSelect ? 'red' : '#607D8B'
                Text {
                    text: name
                }
                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked:{
                        if(mouse.button === Qt.RightButton){
                            //copyPasteMenu.popup()
                            console.log("RightButton")
                        }
                        if(mouse.button === Qt.LeftButton){
                            switch(mouse.modifiers){
                            case Qt.ControlModifier :
                                item.DelegateModel.inMulitSelect = !item.DelegateModel.inMulitSelect
                                break;
                            case Qt.ShiftModifier :
                                delegateModelGroup.removeAll();
                                var start = lastIndex <= index? lastIndex: index;
                                var end = lastIndex >= index? lastIndex: index;
                                for(var i = start;i <= end;i++){
                                    visualModel.items.get(i).inMulitSelect = true
                                }
                                break;
                            default:
                                delegateModelGroup.removeAll();
                                item.DelegateModel.inMulitSelect = true
                                lastIndex = index
                                break;
                            }
                        }
                    }
                }
            }
        }
        ListView {
            anchors.fill: parent
            model: visualModel
        }
    }
}