2. 程式人生 > >QML自定義樹控制元件（TreeView 的style加上節點可拖動）

QML自定義樹控制元件（TreeView 的style加上節點可拖動）

阿新 • • 發佈：2018-12-20

  • 背景：

         前段時間工作需要使用QML的TreeView，要通過拖動節點，對應節點執行對應的操作，查了很多的資料，沒有看到關於節點可拖動的資料，檢視TreeView的原始碼，貌似存在關於節點拖動的地方，但是始終沒有看到可以使用的介面，只好自己動手造輪子了，加上使用過程中踩了不少的坑，也算是給後面用到的人一個案例吧，如果有什麼好的建議，什麼疑問，又或者有好的蘿蔔坑推薦，都可以加這個QQ：995187021，即使沒有解決問題，也可以交個朋友。

  • 程式碼：（不知道怎麼描述，就直接看註釋了，有問題加QQ）

MyTreeView.qml

​​​​​​​

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2
Rectangle{
    property variant nodePic: ["qrc:/pic/pan.png","qrc:/pic/dir.png","qrc:/pic/file.png"]
    id:root
    TreeView{
        id:myTree
        anchors.fill:parent
        style: treeViewStyle
        selection: sel
        headerVisible: false    //隱藏列的頭，想知道作用可以註釋掉執行看效果
        Component.onCompleted: {
            model = TreeModel.model() //從TreeModel獲取model
        }
        itemDelegate:Item{          //節點代理
            id:treeItem
            Image {                 //節點前的圖片
                id: nodeImg
                height: parent.height
                width: {                //不同級的節點圖片寬度不一樣
                    if(styleData.depth==0){
                        return parent.width/6
                    }else if(styleData.depth==1){
                        return parent.width/10
                    }else if(styleData.depth==2){
                        return parent.width/6
                    }
                }
                source: {                       //不同級的節點圖片不一樣
                    if(styleData.depth==0){
                        return nodePic[0]
                    }else if(styleData.depth==1){
                        return nodePic[1]
                    }else if(styleData.depth==2){
                        return nodePic[2]
                    }
                }
            }
            Text{
                id:itemText
                anchors.left: nodeImg.right
                anchors.leftMargin: 4
                anchors.bottom:parent.bottom
                // elide: styleData.elideMode
                text:styleData.value       //顯示來自model的文字
                color: styleData.selected ? "#007dff":"white"  //選中時字型顏色切換
                font.pointSize:styleData.selected ? 10:9      //選中時字型大小改變
                Drag.active: styleData.depth<=1 ? false:itemMosue.drag.active;//一級節點不可拖動
                Drag.supportedActions: Qt.CopyAction;   //選擇複製資料到DropArea
                Drag.dragType: Drag.Automatic;          //選擇自動開始拖動
                Drag.mimeData: {"text": text};          //選擇要傳的資料，這裡傳文字
                MouseArea{                              //節點代理的滑鼠事件
                    id:itemMosue
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: itemText
                    Drag.onDragStarted: {       //控制檯列印開始拖動
                        console.log("start")
                    }
                    onPressed: {
                        sel.setCurrentIndex(styleData.index,0x0010) //點選了文字，選中該節點
                        if(styleData.isExpanded){                   //切換節點的展開狀態
                            myTree.collapse(styleData.index)
                        }
                        else{
                            myTree.expand(styleData.index)
                        }
                    }
                    //onReleased: parent.Drag.drop()
                }
            }
        }
        TableViewColumn {               //列
            title:qsTr("所有通道")
            role: "text"                //顯示的元素
            width: 200                  //列的寬
        }
    }
    ItemSelectionModel {            //自定義新增選中
        id: sel
        model: TreeModel.model();
    }
    Component {
        id:treeViewStyle            //樹的自定義樣式
        TreeViewStyle {
            indentation: 30         //節點間隔
            branchDelegate: Image { //節點的展開標記圖
                id:image
                source: styleData.isExpanded ? "qrc:/pic/collapse.png" : "qrc:/pic/expansion.png"
                width: 9
                height:9
                anchors.top:parent.top
                anchors.topMargin: 2
            }
            rowDelegate: Rectangle {            //行代理
                height: 16
                color:styleData.selected? "#e9fffd" : "#323232" //這裡決定了選中的顏色和背景顏色
            }

        }
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MyTreeView{
        id:myTree
        height: parent.height
        width: parent.width/2
    }
    Rectangle{
                id:dropContainer
                height: parent.height/2
                width: parent.width/4
                anchors.left: myTree.right
                y:10
                Text {
                    id: accptedText
                    text: qsTr("請拖動樹節點到該矩形框!!!")
                    color: "red"
                }
                  border.color: "red"
                  border.width: 1
                  DropArea{
                            id:myDropArea
                            anchors.fill: parent
                            onDropped: {
                            if(drop.supportedActions == Qt.CopyAction){
                                    accptedText.text=drop.getDataAsString("text")
                            }
                         }
                  }

    }
}

相關推薦

QML自定義樹控制元件（TreeView 的style加上節點可拖動）

背景：          前段時間工作需要使用QML的TreeView，要通過拖動節點，對應節點執行對應的操作，查了很多的資料，沒有看到關於節點可拖動的資料，檢視TreeView的原始碼，貌似存在關於節點拖動的地方，但是始終沒有看到可以使用的介面，只好自己動手造輪子了

android 自定義倒計時控制元件（圓形倒計時顯示）

先上效果圖 - 倒計時結束 程式碼塊 attr.xml 控制元件需要用到的屬性： <?xml version="1.0" encoding="utf-8"?> <resources> <de

ASP.NET中使用自定義驗證控制元件（原作）

   asp.net 1.1中，有不少驗證控制元件，大大方便了我們，但有的時候，當需要做特殊的驗證時，還會覺得不夠用的，於是我們可以用自定義驗證控制元件CustomValidator，要使用這個控制元件，必須在服務端寫相應的事件，格式如下：Sub FunctionName(s

（轉）C# 自定義使用者控制元件

C# 自定義使用者控制元件   轉：https://blog.csdn.net/xiongxuanwen/article/details/2605109 本例是製作一個簡單的自定義控制元件，然後用一個簡單的測試程式，對於初學者來說，本例子比較簡單，只能起到拋石引玉的效

自定義Imageview控制元件實現多種手勢操作 （拖動、水平縮放、豎直縮放、等比例縮放、雙擊、長按）

專案中需要使用自定義控制元件的多種手勢操作，之前在網上查閱資料的時候發現能找到的一般是隻實現了其中的幾種，這次就把我做的控制元件分享一下，人人為我，我為人人嘛，哈哈！ 這個自定義控制元件實現的主要功能是控制元件的拖動和縮放（注意：不是對控制元件中的圖片進行操作，話說很多帖子

Android 三角標籤（自定義Textview控制元件）

先來看一下效果 上程式碼 package com.zph.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.C

自定義RatingBar控制元件，實現可自定義星星（或專案所需圖片）的寬高，告別使用warp_content導致控制元件大小不可控

之前做過的一款app中涉及到RatingBar控制元件，基本上來說都會要求用圖片來替代， 即使同樣是星星（可能是覺得系統自帶的比較醜吧，不過我覺得還好啊）。 當時就覺得很難去做適配，UI給的圖片沒法去控制寬高，只能使用warp_content來做， 可是這樣會導

自定義dorado控制元件之自定義繼承自DataTreeGrid的行政區劃樹列表控制元件

這篇文章是基於已經實現了一個springBoot+mybatis+mysql的行政區劃後臺程式碼後在寫一個dorado控制元件的，具體程式碼之後會上傳到部落格。程式碼包為folivora-sysAdminDivisions。不貼出springBoot+mybaties+mysql實現部分原因

網上購物系統（Task007）——自定義DateList控制元件分頁顯示商品資訊

原始碼：13033480群共享 一、資料集Model新增商品資訊類ItemInfo.cs。 using System; namespace WestGarden.Model { public class ItemInfo { privat

帶checkbox的ListView實現（二）——自定義Checkable控制元件的實現方法

前言：前一篇文章給大家展示了傳統的Listview的寫法，但有的時候我們並不想在DataHolder類中加一個標識是否選中的checked的成員變數，因為在專案開發中，大部分的ListItemLayout佈局都是大家共用的，有些人根本不需要checkbox控制元件，所以會在初

CLR自定義.NET控制元件製作（4）——滑鼠訊息的響應

1 #include "stdafx.h" 2 #ifdef _DEBUG 3 #define new DEBUG_NEW 4 #endif 5 #include "myview.h" 6 7 IMPLEMENT_DYNCREATE(CMyView, CView) 8 9 BEGIN_MESSAGE_

WinForm中使用自定義Tooltip控制元件

private ToolTip tooltipCtr; 建構函式中： 隱藏預設的Tooltip：this.ShowCellToolTips = false; this.tooltipCtr = new ToolTip(); 設定停留時間（還有許多其他時間設定）：thi

自定義的控制元件 實現一個繞圓圈的箭頭

自定義的類 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import

Android UI-自定義日曆控制元件

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

自定義titilbar控制元件

自定義titilbar控制元件 自定義佈局 <?xml version="1.0" encoding="utf-8"?> <ImageView android:id="@+id/imageView1" android:layout_width=

android開發：自定義組合控制元件

內容介紹 本文記錄，自定義組合控制元件，為了可以程式碼複用，減少程式碼量 配置控制元件屬性檔案 開啟res/values/目錄下的arss.xml檔案，新增下面屬性程式碼，如果沒有建立arrs.xml檔案。 <?xml version="1.0" enc

android自定義開關控制元件-SlideSwitch

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

android 多功能自定義畫板控制元件(用於解決特定需求)

在專案中需要做一個可以自定義軌跡，但始終只有一條線，並且支援撤銷（撤銷單位為MotionEvent的down事件到up事件），還要支援動畫預覽等功能，最重要的是能夠按照間隔畫素來獲取所有點的座標，用於專案的其他功能。 整體的思路 1.專案中的應用場景需要畫板是一個圓形的，這個好實現用canv

自定義View控制元件

xml裡面的 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

自定義FlowLayout控制元件實現自定義寬度並換行

最近的需求是實現新增購物車頁面，展示規格的時候會出現顯示不全，資料會自動剪下掉，後邊重新自定義了FlowLayout問題得到解決，下面直接上程式碼 public class FlowLayoutView extends ViewGroup { private final int DE