{"id":15209389,"url":"https://github.com/daguerreo/qmltreeview","last_synced_at":"2025-04-13T05:21:06.516Z","repository":{"id":89296775,"uuid":"378085712","full_name":"Daguerreo/QMLTreeView","owner":"Daguerreo","description":"A TreeView component for QML/QtQuick 2 with a generic TreeModel for Qt5 and compatible with Qt6","archived":false,"fork":false,"pushed_at":"2025-02-07T18:18:22.000Z","size":627,"stargazers_count":61,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T10:12:07.899Z","etag":null,"topics":["qml","qmltreemodel","qmltreeview","qt","qt-framework","qt5","qt5-qml","qtquick-controls2","qtreemodel","treemodel","treeview"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Daguerreo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-18T08:32:41.000Z","updated_at":"2025-02-07T18:18:24.000Z","dependencies_parsed_at":"2023-04-14T02:03:18.805Z","dependency_job_id":"a4ae5794-a9ce-48e2-9e3c-0476eecd8527","html_url":"https://github.com/Daguerreo/QMLTreeView","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daguerreo%2FQMLTreeView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daguerreo%2FQMLTreeView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daguerreo%2FQMLTreeView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daguerreo%2FQMLTreeView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Daguerreo","download_url":"https://codeload.github.com/Daguerreo/QMLTreeView/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245743426,"owners_count":20665092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qml","qmltreemodel","qmltreeview","qt","qt-framework","qt5","qt5-qml","qtquick-controls2","qtreemodel","treemodel","treeview"],"created_at":"2024-09-28T07:23:22.282Z","updated_at":"2025-03-26T22:10:16.917Z","avatar_url":"https://github.com/Daguerreo.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QMLTreeView for Qt 5\n\nThis project provides a **QML Tree View** with a **C++ Tree Model** for **Qt 5.15** and **QuickControls 2**.\n\nSince **Qt 6.3** [TreeView](https://doc.qt.io/qt-6/qml-qtquick-treeview.html) has been added as standard component.\nIt is suggested to use the standard one.\n\n## Requirements\n\n- Minimum Qt version: 5.15 (works with Qt6)\n- Minimum C++ version: C++11\n\n## Features\n\n - QML Tree View\n - C++ Tree Model\n - Item selection\n - Item hovering\n - Customizable layout (color, font, positioning)\n - Delegates to fully customize part of the TreeView\n - A Json Tree View implementation\n\n\n# Usage\n\n## C++\n\n```\nint main()\n{\n   auto america = new TreeItem(\"America\");\n   auto asia = new TreeItem(\"Asia\");\n   auto europe = new TreeItem(\"Europe\");  \n   auto brazil = new TreeItem(\"Brazil\");\n   auto canada = new TreeItem(\"Canada\");\n   auto italy = new TreeItem(\"Italy\");\n   auto portugal = new TreeItem(\"Portugal\");\n\n   auto treeModel = new TreeModel();\n   model.addTopLevelItem(america);\n   model.addTopLevelItem(asia);\n   model.addTopLevelItem(europe);\n   model.addItem(america, brazil);\n   model.addItem(america, canada);\n   model.addItem(europe, italy);\n   model.addItem(europe, portugal);\n\n   QQmlApplicationEngine engine;\n   engine.rootContext()-\u003esetContextProperty(\"treeModel\", treeModel);\n   engine.load(url);\n\n   return app.exec();\n}\n```\n\n## QML\n\nExpose and populate the TreeModel from C++, then just initialize it \n\n```\n    TreeView {\n        anchors.fill: parent\n        model: treeModel\n    }\n```\nand this is the result\n\n![](img/minimal.png)\n\n\n# Platforms\n\nCode has been tested in the following OS:\n\n- Windows\n- Linux\n\n# Installation\n\n- Copy the ```modules``` folder to your project, then add the ```qmltreeview.pri``` file or manually add headers, source and\nresource file. \n- Add the modules path to the ```QML_IMPORT_PATH```.\n- In the main file add the import path to the engine with ```engine.addImportPath(\"qrc:/modules\");```\n- In the QML file you can include the module with ```import QMLTreeView 1.0```\n\n# Customization\n\n## Selection / Hovering\n\nHovering and selection can be activated enabling the respective properties\n```\n    TreeView {\n        anchors.fill: parent\n        model: treeModel\n        \n        selectionEnabled: true\n        hoverEnabled: true\n    }\n```\n\n![](img/selection.png)\n\n## Styling\n\nTreeView support color styling for each part. Positioning can be customized with the properties ```rowHeight```, ```rowPadding``` and ```rowSpacing```.\n\n```\n    TreeView {\n        anchors.fill: parent\n        model: treeModel\n\n        selectionEnabled: true\n        hoverEnabled: true\n\n        color: \"steelblue\"\n        handleColor: \"steelblue\"\n        hoverColor: \"skyblue\"\n        selectedColor: \"cornflowerblue\"\n        selectedItemColor: \"white\"\n        \n        handleStyle: TreeView.Handle.Chevron\n        rowHeight: 30\n        rowPadding: 30 \n        font.pixelSize: 24\n    }\n```\n\n![](img/styled.png)\n\nFont can be customized through properties ```font``` and ```fontMetrics```.\n\nThe default handle comes with differents default styles:\n\n```\n    enum Handle {\n        Triangle,\n        TriangleSmall,\n        TriangleOutline,\n        TriangleSmallOutline,\n        Chevron,\n        Arrow\n    }\n```\n\n## Custom Delegates\n\nThese component are provided and can be customized with delegates:\n- ```contentItem```: the control element of each row\n- ```handle```: element to collapse/expand the TreeView\n- ```highlight```: the highlight element\n\nEach delegate can use the property ```currentRow``` to retreive the information for its own row.\ncurrentRow possess the following properties:\n- ```currentIndex```\n- ```currentData```\n- ```currentItem```\n- ```itemChildCount```\n- ```expanded```\n- ```selected```\n- ```hasChildren```\n- ```isSelectedIndex```\n- ```isHoveredIndex```\n- ```isSelectedAndHoveredIndex```\n\n`currentRow` possess the following methods:\n- `currentRow.toggle()` toggles the expansion of the current section.\n- `currentRow.dataForRole(int)` get the value for the input role.\n\n```\nTreeView {\n    id: delegateTreeView\n    anchors.fill: parent\n    anchors.margins: 1\n\n    model: treeModel\n    selectionEnabled: true\n\n    contentItem: Row {\n        spacing: 10\n\n        Rectangle {\n            width: parent.height * 0.6\n            height: width\n            radius: width\n            y: width / 3\n            color: currentRow.hasChildren ? \"tomato\" : \"lightcoral\"\n        }\n\n        Text {\n            verticalAlignment: Text.AlignVCenter\n\n            color: currentRow.isSelectedIndex ? delegateTreeView.selectedItemColor : delegateTreeView.color\n            text: currentRow.currentData\n            font: delegateTreeView.font\n        }\n    }\n\n    handle: Item {\n        width: 20\n        height: 20\n        Rectangle {\n            anchors.centerIn: parent\n            width: 10\n            height: 2\n            color: \"black\"\n            visible: currentRow.hasChildren\n\n            Rectangle {\n                anchors.centerIn: parent\n                width: parent.height\n                height: parent.width\n                color: parent.color\n                visible: parent.visible \u0026\u0026 !currentRow.expanded\n            }\n        }\n    }\n\n    highlight: Item {\n        Rectangle {\n            color: \"pink\"\n            width: parent.width * 0.9\n            height: parent.height\n            anchors.left: parent.left\n            radius: 20\n        }\n        Rectangle {\n            color: \"pink\"\n            width: parent.width * 0.2\n            height: parent.height\n            anchors.right: parent.right\n            radius: 20\n        }\n        \n        Behavior on y { NumberAnimation { duration: 150 }}\n    }\n}\n```\n![](img/customdelegate.png)\n\n## Data Access\n\nData access for row element is provided by the properties:\n- ```currentIndex```: return the model index for the selected element\n- ```currentData```: return the data for the selected element\n- ```currentItem```: return the visual item of the selected element\n\n```\ntext: currentRow.dataForRole(jsonModel.role(\"value\"))\n```\n\n## Node Manipulation\n\n```TreeModel``` provides the methods ```addTopLevelItem,``` ```addItem```, ```removeItem``` and ```clear``` to add and remove node to the tree. ```setData``` instead provides a way to change the data of a given node.\nTake a look at the **Manipulator Example** which show a way to manipulate the tree directly from QML.\n\n![](img/manipulator.png)\n\n## Custom Roles\n\nIf your model support multiple roles, use `currentRow.dataForRole(int)`\nto access the desired role.\n\n**Json Example** show the use of the custom role: \n\n```\n{\n   \"firstName\": \"John\",\n   \"lastName\": \"Smith\",\n   \"age\": 25,\n   \"address\": {\n      \"streetAddress\": \"21 2nd Street\",\n      \"city\": \"New York\",\n      \"state\": \"NY\",\n      \"postalCode\": \"10021\",\n      \"owner\": true\n   },\n   \"phoneNumber\": [\n      {\n        \"type\": \"home\",\n        \"number\": \"212 555-1234\"\n      },\n      {\n        \"type\": \"fax\",\n        \"number\": \"646 555-4567\"\n      }\n   ]\n}\n```\n\nmain.qml\n\n```\nTreeView {\n   id: jsonView\n   \n   anchors.fill: parent\n   anchors.margins: 1\n   \n   model: jsonModel\n   rowPadding: 20\n   selectionEnabled: true\n   \n   contentItem: RowLayout {\n      Text {\n         verticalAlignment: Text.AlignVCenter\n         horizontalAlignment: Text.AlignLeft\n         text: currentRow.dataForRole(jsonModel.role(\"key\"))\n      }\n      \n      Text {\n         Layout.fillWidth: true\n         Layout.rightMargin: 10\n         \n         verticalAlignment: Text.AlignVCenter\n         horizontalAlignment: Text.AlignRight\n         text: currentRow.dataForRole(jsonModel.role(\"value\"))\n      }\n   }\n}\n```\n\n![](img/json.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaguerreo%2Fqmltreeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaguerreo%2Fqmltreeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaguerreo%2Fqmltreeview/lists"}