Back to Qt.io
Contact Us Blog Download Qt
このページでは

TreeModel QML Type

単純なツリーモデルをカプセル化しています。詳細...

Import Statement: import Qt.labs.qmlmodels
Since: Qt 6.10

プロパティ

方法

  • void appendRow(var treeRow)
  • void appendRow(parent, var treeRow)
  • void clear()
  • variant data(index, string role)
  • var getRow(rowIndex)
  • QModelIndex index(list<int> treeIndex, int column)
  • QModelIndex index(int row, int column, var parent)
  • void insertRow(int rowIndex, object row) (since 6.12)
  • void insertRow(int rowIndex, QModelIndex parent, object row) (since 6.12)
  • bool moveRows(QModelIndex sourceParent, int sourceRow, int count, QModelIndex destinationParent, int destinationChild) (since 6.12)
  • void removeRow(rowIndex)
  • bool setData(index, variant value, string role)
  • void setRow(rowIndex, var treeRow)

詳細な説明

TreeModel型は、TreeView で使用可能なツリーモデルのデータとして、JavaScript/JSONオブジェクトを格納します。これは、C++でQAbstractItemModel のカスタムサブクラスを作成することなく、非常にシンプルなモデルをサポートすることを目的としています。

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    TreeView {
        id: treeView
        anchors.fill: parent

        selectionModel: ItemSelectionModel {}

        model: TreeModel {
            id: treeModel

            TableModelColumn {
                display: "checked"
            }
            TableModelColumn {
                display: "size"
            }
            TableModelColumn {
                display: "type"
            }
            TableModelColumn {
                display: "name"
            }
            TableModelColumn {
                display: "lastModified"
            }

            rows: [{
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Documents",
                    lastModified: "2025-07-01",
                    rows: [{
                            checked: true,
                            size: "24 KB",
                            type: "file",
                            name: "Resume.pdf",
                            lastModified: "2025-06-20",
                        }, {
                            checked: false,
                            size: "2 MB",
                            type: "folder",
                            name: "Reports",
                            lastModified: "2025-06-10",
                            rows: [{
                                    checked: true,
                                    size: "850 KB",
                                    type: "file",
                                    name: "Q2_Report.docx",
                                    lastModified: "2025-06-15",
                                }, {
                                    checked: false,
                                    size: "1.2 MB",
                                    type: "file",
                                    name: "Q3_Plan.xlsx",
                                    lastModified: "2025-06-18",
                                }]
                        }]
                },
                {
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Pictures",
                    lastModified: "2025-05-30",
                    rows: [{
                            checked: true,
                            size: "3.5 MB",
                            type: "file",
                            name: "Vacation.jpg",
                            lastModified: "2025-05-15",
                        }, {
                            checked: false,
                            size: "2.1 MB",
                            type: "file",
                            name: "Family.png",
                            lastModified: "2025-05-20",
                        }]
                }
            ]
        }

        delegate: TreeViewDelegate {}
    }
}

モデルの初期データは、rows プロパティ、またはappendRow()の呼び出しによって設定されます。モデル内の各列は、TableModelColumn インスタンスを宣言することで指定され、各インスタンスの順序によって列インデックスが決まります。モデルのComponent::completed()シグナルがエミットされると、列と役割が確定し、モデルの存続期間中は変更できなくなります。

サポートされている行データ構造

各行はツリー内のノードを表します。各ノードは同じタイプの列を持ちます。TreeModelはJavaScript/JSONデータに対応するように設計されているため、各行は単純なキーと値のペアのリストとなります：

                {
                    checked: false,
                    size: "—",
                    type: "folder",
                    name: "Pictures",
                    lastModified: "2025-05-30",
                    rows: [{
                            checked: true,
                            size: "3.5 MB",
                            type: "file",
                            name: "Vacation.jpg",
                            lastModified: "2025-05-15",
                        }, {
                            checked: false,
                            size: "2.1 MB",
                            type: "file",
                            name: "Family.png",
                            lastModified: "2025-05-20",
                        }]
                }

ノードには子ノードを持つことができ、これらは「rows」キーに関連付けられた配列に格納されます。「rows」はこの目的のために予約されており、このキーには子ノードのリストのみを関連付ける必要があります。

モデルの操作は `QModelIndices` を通じて行います。特定の行/ノードにアクセスするには、getRow() 関数を使用できます。また、rows プロパティを介してモデルの JavaScript データに直接アクセスすることも可能ですが、この方法ではモデルデータを変更することはできません。

新しい行を追加するには、appendRow() を使用します。既存の行を変更するには、setRow()、removeRow()、およびclear() を使用します。

外部の JSON ソースでの TreeModel の使用

TreeModelの本来の用途は、QMLファイル内でJSONデータを直接定義することですが、その構造がTreeModelで定義された構造と一致している限り、任意のJSONオブジェクトをこのモデルで使用できます。JSONオブジェクトのすべての行がモデルで定義された列に準拠している場合、rowsプロパティを通じて直接割り当てることができます。

JSONオブジェクトのソースはファイルでも構いません。たとえば、モデルが次のように定義されている場合

    TreeModel {
        id: treeModel
        objectName: "testModel"

        TableModelColumn { display: "checked" }
        TableModelColumn { display: "size" }
        TableModelColumn { display: "type" }
        TableModelColumn { display: "name" }
        TableModelColumn { display: "lastModified" }
    }

であり、ファイルに保存されているJSONオブジェクトが

let folders = [
    {
        "checked": false,
        "size": "—",
        "type": "folder",
        "name": "Documents",
        "lastModified": "2025-07-01",
        "rows": [
            {
                "checked": true,
                "size": "24 KB",
                "type": "file",
                "name": "Resume.pdf",
                "lastModified": "2025-06-20"
            }
        ]
    },
    {
        "checked": false,
        "size": "—",
        "type": "folder",
        "name": "Pictures",
        "lastModified": "2025-05-30",
        "rows": [
            {
                "checked": true,
                "size": "3.5 MB",
                "type": "file",
                "name": "Vacation.jpg",
                "lastModified": "2025-05-15"
            }
        ]
    }
]

である場合、このオブジェクトは、JavaScriptファイルを

モジュール

import "TreeData.js" as JsonData

としてインポートすることで提供でき、その後、次のように直接代入できます

    Component.onCompleted: treeView.model.rows = JsonData.folders

警告： JSONデータが信頼できるソースから取得されていることを確認してください 。モデルは入力に基づいて行を動的に生成するため、形式が不正なJSONや信頼できないJSONを使用すると、予期しない動作やパフォーマンスの問題を引き起こす可能性があります。

JSON オブジェクトが解析されて JavaScript 配列として代入される別の例については、TableModel を参照してください。

TableModelColumn およびTreeViewも参照してください 。

プロパティのドキュメント

columnCount : int [read-only]

この読み取り専用プロパティは、モデル内の列数を保持します。

列数は、rows プロパティが設定された後、またはappendRow()が初めて呼び出された後、モデルの存続期間中は固定されます。

rows : var

このプロパティは、モデルデータを行の配列の形式で保持します。

関連項目： getRow()、setRow()、appendRow()、clear()、およびcolumnCount 。

メソッドのドキュメント

void appendRow(var treeRow)

ルートノードに「treeRow 」を追加します。

setRow() およびremoveRow()も参照してください 。

void appendRow(parent, var treeRow)

treeRow に含まれる値（セル）を用いて、parent に新しい treeRow を追加します。

treeModel.appendRow(index, {
    checked: false,
    size: "-",
    type: "folder",
    name: "Orders",
    lastModified: "2025-07-02",
    rows: [
        {
            checked: true,
            size: "38 KB",
            type: "file",
            name: "monitors.xlsx",
            lastModified: "2025-07-02"
        },
        {
            checked: true,
            size: "54 KB",
            type: "file",
            name: "notebooks.xlsx",
            lastModified: "2025-07-02"
        }
    ]
});

parent QModelIndex をバックエンドとする匿名 QML 型です。 が無効な場合、 がルートノードに追加されます。parent treeRow

setRow() およびremoveRow()も参照してください 。

void clear()

モデルからすべての行を削除します。

removeRow()も参照してください 。

variant data(index, string role)

指定された `index ` にある、指定された `role` に属する `TreeModel ` からのデータを返します。

index QModelIndex をバックエンドとする匿名 QML 型です。

index() およびsetData()も参照してください 。

var getRow(rowIndex)

モデル内の指定されたインデックスにあるtreeRowを返します。rowIndex は、QModelIndex をバックエンドとする匿名QML型です。

注： 返されたオブジェクト を使用してモデルの内容を変更することはできません。代わりに setTreeRow() を使用してください。

関連項目： setRow()、appendRow()、およびremoveRow()。

QModelIndex index(list<int> treeIndex, int column)

指定されたtreeIndex およびcolumn を参照するオブジェクトを返します。このオブジェクトは、data()関数に渡してそのセルのデータを取得したり、setData()に渡してそのセルの内容を編集したりすることができます。

返されるオブジェクトは、QModelIndex をバックエンドとする匿名 QML 型です。

最初のパラメータtreeIndex は、ルートから目的の行に至る行番号のパスを表し、ツリー内のナビゲーションに使用されます。これは例を挙げて説明するのが最も分かりやすいでしょう。

インデックスパスを持つノードAからFまでのツリー図
  • ツリーのルートは、無効な `QModelIndex` によって参照できるという点で特殊です。
  • ノード A はルートの最初の子ノードであり、対応するtreeIndex は[0] です。
  • ノード B はノード A の最初の子ノードです。A のtreeIndex は[0] であるため、B のtreeIndex は[0,0] となります。
  • ノード C は A の 2 番目の子であり、そのtreeIndex は[0,1] です。
  • ノード D は A の 3 番目の子ノードであり、そのtreeIndex は[0,2] です。
  • ノード E はルートの 2 番目の子であり、そのtreeIndex は[1] です。
  • ノード F はルートの 3 番目の子であり、そのtreeIndex は[2] です。

このオーバーロードにより、親ノードへのQModelIndex を持たずに、ノードへのQModelIndex を取得することが可能になります。

指定されたリストでノードが見つからない場合、無効なモデルインデックスが返されます。無効なモデルインデックスはノードのルートを参照していることに注意してください。

QModelIndex および QML における関連クラス、ならびに `data()`も参照してください 。

QModelIndex index(int row, int column, var parent)

指定されたparent のrow およびcolumn を参照するオブジェクトを返します。このオブジェクトは、data()関数に渡してそのセルからデータを取得したり、setData()に渡してそのセルの内容を編集したりすることができます。

返されるオブジェクトは、QModelIndex をバックエンドとする匿名QML型です。

QModelIndex および QML の関連クラス、data()も参照してください 。

[since 6.12] void insertRow(int rowIndex, object row)

rowIndex の位置にあるルートアイテムに、row 内の値（セル）を持つ新しい行を挿入します。

このメソッドは Qt 6.12 で導入されました。

appendRow()、setRow()、およびremoveRow()も参照してください 。

[since 6.12] void insertRow(int rowIndex, QModelIndex parent, object row)

parent の位置rowIndex に、row に指定された値（セル）を含む新しい行を挿入します。

model.insertRow(2, parentIndex, {
    checkable: true, checked: false,
    amount: 1,
    fruitType: "Pear",
    fruitName: "Williams",
    fruitPrice: 1.50,
})

このメソッドは Qt 6.12 で導入されました。

appendRow()、setRow()、およびremoveRow()も参照してください 。

[since 6.12] bool moveRows(QModelIndex sourceParent, int sourceRow, int count, QModelIndex destinationParent, int destinationChild)

sourceRow から始まるcount 行を、sourceParent からdestinationParent へ移動し、destinationChild の前に挿入します。

destinationChild は、移動前の destinationParent 内での位置（移動前のインデックス）を指し、QAbstractItemModel::beginMoveRows() との整合性が保たれています。

ソース範囲と宛先範囲は存在している必要があり、sourceParent とdestinationParent は、親が自身の子の下に移動してしまうような形で重複してはなりません。

行の移動に成功した場合はtrue を返し、失敗した場合はfalse を返します。

このメソッドは Qt 6.12 で導入されました。

appendRow()、insertRow()、およびremoveRow()も参照してください 。

void removeRow(rowIndex)

rowIndex で参照されている TreeRow をモデルから削除します。rowIndex は、QModelIndex をバックエンドとする匿名 QML 型です。

treeModel.removeTreeRow(rowIndex)

clear()も参照してください 。

bool setData(index, variant value, string role)

指定されたindex の位置にあるTreeRowに対し、role で指定されたデータフィールドを、value を用いて挿入または更新します。成功した場合はtrueを、失敗した場合はfalseを返します。

index QModelIndex をバックエンドとする匿名 QML 型です。

data() およびindex()も参照してください 。

void setRow(rowIndex, var treeRow)

モデル内のrowIndex にあるTreeRowを、treeRow に置き換えます。rowIndex は、QModelIndex によってサポートされている匿名QML型です。

子行を持つ行は拒否されます。

すべての列/セルがtreeRow に存在し、かつ正しい順序で並んでいる必要があります。その行の子行には影響しません。

treeModel.setRow(rowIndex, {
    checked: true,
    size: "-",
    type: "folder",
    name: "Subtitles",
    lastModified: "2025-07-07",
    iconColor: "blue"
});

appendRow()も参照してください 。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.