QML自己实现TreeView

最新推荐文章于 2024-08-06 17:53:31 发布

DongDongBaJiaYou

最新推荐文章于 2024-08-06 17:53:31 发布

阅读量439

点赞数

分类专栏： QML 文章标签： qml

本文链接：https://blog.csdn.net/wisdomroc/article/details/118521619

版权

QML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这篇博客通过QtQuick展示了如何创建一个递归列表视图，包括基本的模型数据操作和委托设计。在简单实现中，博主创建了一个具有层级关系的数据模型，并用ListView展示。进阶实现中，增加了节点颜色区分、双击展开/收起子节点以及展开/收起符号的功能，增强了交互体验。

摘要由CSDN通过智能技术生成

简单实现（仅用最简洁的方案实现基本功能）：

import QtQuick 2.0

Item {
   width: 600
   height: 600

   //Model
   ListModel {
      id: objModel
      Component.onCompleted: {
          objModel.append({"name":"A1","level":0,"subNode":[]})
          objModel.append({"name":"A2","level":0,"subNode":[]})
          objModel.append({"name":"A3","level":0,"subNode":[]})
          objModel.get(1).subNode.append({"name":"B1","level":1,"subNode":[]})
          objModel.get(1).subNode.append({"name":"B2","level":1,"subNode":[]})
          objModel.get(1).subNode.get(0).subNode.append({"name":"C3","level":2,"subNode":[]})
      }
   }

   //Delegate
   Component {
      id: objRecursiveDelegate
      Column {
          Row {
               //indent
               Item {
                  height: 1
                  width: model.level * 20
               }

               Text {
                   text:model.name
               }
            }

         Repeater {
            model: subNode
            delegate: objRecursiveDelegate
         }
      }
   }

   //View
  ListView{
       anchors.fill: parent
       model:objModel
       delegate: objRecursiveDelegate
   }
}

进阶实现，丰富功能：

A）有子节点的父节点显示蓝色，无子节点的父节点显示绿色。

B）双击展开/收起子节点。

C）展开显示 – 号，收起显示 + 号。

import QtQuick 2.0

Item {
   width: 600
   height: 600   

   //Model
   ListModel {
      id: objModel
      Component.onCompleted: {
          objModel.append({"name":"Zero","level":0,"subNode":[]})
          objModel.append({"name":"One","level":0,"subNode":[]})
          objModel.append({"name":"Two","level":0,"subNode":[]})
          objModel.get(1).subNode.append({"name":"Three","level":1,"subNode":[]})
          objModel.get(1).subNode.append({"name":"Four","level":1,"subNode":[]})
          objModel.get(1).subNode.get(0).subNode.append({"name":"Five","level":2,"subNode":[]})
      }
   }

   //Delegate
   Component {
         id: objRecursiveDelegate
         Column {
            id: objRecursiveColumn
            MouseArea {
               width: objRow.implicitWidth
               height: objRow.implicitHeight
               onDoubleClicked: {
                  for(var i = 1; i < parent.children.length - 1; ++i) {
                     parent.children[i].visible = !parent.children[i].visible
                  }
               }
               Row {
                  id: objRow
                  Item {
                     height: 1
                     width: model.level * 20
                  }
                  Text {
                     text: (objRecursiveColumn.children.length > 2 ?
                              objRecursiveColumn.children[1].visible ?
                              qsTr("-  ") : qsTr("+ ") : qsTr("   ")) + model.name
                     color: objRecursiveColumn.children.length > 2 ? "blue" : "green"
                  }
               }
            }
            Repeater {
               model: subNode
               delegate: objRecursiveDelegate
            }
         }
      }

   //View
      ListView {
         anchors.fill: parent
         model: objModel
         delegate: objRecursiveDelegate
      }
}