qml demo分析(externaldraganddrop-拖拽)

一、效果展示

　　客戶端程序拖拽是一個很常見的需求，對於QWidget程序來說，需要重寫如圖1這么幾個方法，通過重寫這幾個方法的邏輯，我們就可以控制鼠標拖拽的邏輯，糟糕的是QDrag執行exec后是一個阻塞主事件循環的操作，這個時候除了拖拽界面外，其他界面不能響應鼠標事件。作者之前就有過這么一個需要主界面響應的需求，當時我是重寫了如圖2所示的接口，來模擬程序拖拽。

圖1 QWidget拖拽接口

圖2 QWidget鼠標事件

 　　如圖3所示是示例拖拽展示，界面上有3個大的EditText，相互之間可以進行拖拽，將文本移動到新的EditText。

圖3 示例拖拽

二、源碼分析

　　這個示例代碼只有2個qml文件，一個是自定義的組件DragAndDropTextItem，另一個是主界面布局。

1、自定義組件DragAndDropTextItem

　　自定義組件DragAndDropTextItem根節點是Rectangle，支持鼠標事件，MouseArea捕獲整個根節點的是標事件，並設置拖拽對象為draggable組件。DraopArea區域有許多槽函數，這些槽函數會自動被調用，比如onEntered，當鼠標進行的時候被調用，onExited當鼠標離開時被調用，具體代碼如下

import QtQuick 2.2

Rectangle {
    id: item
    property string display//導出屬性
    color: "#EEE"//自定義矩形背景色
    Text {
        anchors.fill: parent
        text: item.display//文本顯示綁定導出屬性(文本字符串)
        wrapMode: Text.WordWrap//文本按字折行
    }
    DropArea {//拖拽區域
        anchors.fill: parent
        keys: ["text/plain"]//該字段對應draggable中mimeData
        onEntered: {
            item.color = "#FCC"
        }
        onExited: {
            item.color = "#EEE"//鼠標拖拽退出時恢復常規背景色
        }
        onDropped: {//鼠標拖拽完成  釋放時觸發
            item.color = "#EEE"
            if (drop.hasText) {//拖拽含有文本字符串
                if (drop.proposedAction == Qt.MoveAction || drop.proposedAction == Qt.CopyAction) {
                    item.display = drop.text//重置當前顯示文本
                    drop.acceptProposedAction()//接受目標動作，停止事件傳遞
                }
            }
        }
    }
    //鼠標事件區域，覆蓋整個矩形
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        drag.target: draggable//拖拽目標指定
    }
    Item {
        id: draggable//
        anchors.fill: parent
        Drag.active: mouseArea.drag.active
        Drag.hotSpot.x: 10//熱點位置
        Drag.hotSpot.y: 10
        Drag.mimeData: { "text/plain": item.display }//設置拖拽時內部數據
        Drag.dragType: Drag.Automatic//拖拽類型
        Drag.onDragStarted: {//拖拽開始
        }
        Drag.onDragFinished: {//拖拽結束  拖拽操作狀態為接受  
            if (dropAction == Qt.MoveAction) {//如果是移動操作，將顯示置空
                item.display = ""//清空被拖拽文本框
            }
        }
    } // Item
}

2、主界面布局

　　主界面使用了列布局器ColumnLayout，第一行是一個Text文本，顯示該應用程序的基本描述信息，接下來3行是3個自定義控件DragAndDropTextItem，代碼如下

import QtQuick 2.2
import QtQuick.Layouts 1.0

Item {
    id: root//作用域內 唯一標示
    width: 320
    height: 480

    ColumnLayout {//列布局器，類似於GridLayout  但是只有一列

        anchors.fill: parent
        anchors.margins: 8

        Text {//第一行顯示一串文本
            Layout.fillWidth: true
            text: "Drag text into, out of, and between the boxes below."
            wrapMode: Text.WordWrap
        }

        //支持拖拽自定義控件
        DragAndDropTextItem {
            Layout.fillWidth: true
            height: 142
            display: "Sample Text"
        }

        //支持拖拽自定義控件
        DragAndDropTextItem {
            Layout.fillWidth: true
            height: 142
            display: "Option/ctrl drag to copy instead of move text."
        }

        //支持拖拽自定義控件
        DragAndDropTextItem {
            Layout.fillWidth: true
            height: 142
            display: "Drag out into other applications."
        }
    }
}