qmlでのツリーマッピング

かつて、私の友人から「qmlでツリー構造を表示するにはどうすればよいですか？」

目的：Qt Quickを使用してツリー構造を表示するテストアプリケーションを開発します。

結果はGitHubで表示できます： github.com/1KoT1/QMLPresentTree

アプリケーションデータ構造

このアプリケーションでは、ツリー要素はTreeItemクラスによって記述されます。







contentプロパティは、いくつかの要素コンテンツを保持します。 テストアプリケーションの場合、1行で問題ありません。

要素の各インスタンスには、childItemsというサブ要素のリストが含まれています。 このようにして、ツリーが構築されます。

isOpenプロパティは、内部要素のリストの状態（展開または非表示）を保持します。

hasChildプロパティは、子があるかどうかを示します。 Item.childItems（）。IsEmpty（）を使用して回避できますが、さらに使いやすくするために、彼はhasChildフィールドを導入しました。

treeitem.hおよびtreeitem.cppでこのクラスを実装するコードを参照してください。

Model.hおよびmodel.cppは、アプリケーションデータモデルを記述します。 モデルには、要素のツリーという単一のプロパティが含まれます。

main.cppで 、モデルを作成し、qmlでモデルを表示およびエクスポートします。 ディスプレイ以外の機能がないため、コントローラーはありません。

qmlでのツリーマッピング

次に、最も興味深いものに移ります。 qmlを使用してツリー構造のマッピングを説明します。

メインqmlファイルには次のコードが含まれています。

import QtQuick 2.0 Rectangle { width: 360 height: 360 ListView{ anchors.fill: parent model: programmModel.tree delegate: ItemView{} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

基本的な考え方は次のとおりです。第1レベルの要素のフラットリストを表示します。 アイテムを記述するデリゲートには、サブアイテムを表示するためのフラットリストが含まれます。 ツリーの構造によるなど。



ウィンドウはListViewで完全に満たされています。 ListViewにはフラットリストが表示され、リストをスクロールできます。 ツリーをモデルとして示します。 実際、これは要素のフラットリストであり、各要素にはサブ要素のリストが含まれています。 各アイテムの表示はItemView.qmlで説明されています ：

 import QtQuick 2.0 Row{ id: itemView Text{ width: 10 height: 10 text: modelData.hasChild? modelData.isOpen ? "-" : "+" : "" MouseArea{ anchors.fill: parent onClicked: modelData.isOpen = !modelData.isOpen; } } Column{ Text{ text: modelData.content } Loader{ source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml" } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素はコンテンツの出力で構成されます：

 Text{ text: modelData.content }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サブ要素の存在を表示し、リストを展開できるコントロール：

 Text{ width: 10 height: 10 text: modelData.hasChild? modelData.isOpen ? "-" : "+" : "" MouseArea{ anchors.fill: parent onClicked: modelData.isOpen = !modelData.isOpen; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サブ要素リスト：

 Loader{ source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サブ要素のリストは、開いているときにのみ表示する必要があります。 これを行うには、Loader要素を使用します。 閉じられると、Empty.qmlが読み込まれます-サイズ0 x 0の長方形。サブ要素の開いているリストの表示はTreeItemsList.qmlで説明されています 。



それを考慮してください：

 import QtQuick 2.0 Column{ Repeater{ model: modelData.childItems delegate: ItemView{} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Column要素とRepeater要素の組み合わせを使用して、垂直リストを作成します。 ListViewとは異なり、Columnはコンテンツのスクロールを許可せず、内部要素を表示するために必要なスペースをすべて占有します。 メインファイルのListViewを使用して、ツリー全体がスクロールされます。



サブ要素を表示するには、最上位リストと同じデレゴットが使用されます。 したがって、各要素はその要素を表示できます。 ネストはシステムリソースによってのみ制限されます。



使用されているアプローチのおかげで、もう1つの重要な要件が満たされています。ビジュアルツリーは、開いている要素に対してのみ構築されます。つまり、余分なシステムリソースは無駄になりません。