Skip to content

Commit db1e54c

Browse files
DaguerreoDaguerreo
committed
Updated examples and README
1 parent 1b58bab commit db1e54c

File tree

19 files changed

+139
-148
lines changed

19 files changed

+139
-148
lines changed

‎README.md‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
# QMLTreeView
1+
# QMLTreeView 1.0
22

33
This project provides a **QML Tree View** with a **C++ Tree Model** for **Qt 5.15** and **QuickControls 2**.
44

5-
The project is still in beta, so breaking change can happen and backward compatibility is still not guaranteed.
6-
75
## Features
86
- QML Tree View
97
- C++ Tree Model
@@ -22,19 +20,23 @@ The project is still in beta, so breaking change can happen and backward compati
2220
```
2321
int main()
2422
{
25-
auto parent1 = new TreeItem("Parent1");
26-
auto parent2 = new TreeItem("Parent2");
27-
auto child1 = new TreeItem("Child1");
28-
auto grandChild1 = new TreeItem("GrandChild1");
29-
23+
auto america = new TreeItem("America");
24+
auto asia = new TreeItem("Asia");
25+
auto europe = new TreeItem("Europe");
26+
auto brazil = new TreeItem("Brazil");
27+
auto canada = new TreeItem("Canada");
28+
auto italy = new TreeItem("Italy");
29+
auto portugal = new TreeItem("Portugal");
30+
3031
auto treeModel = new TreeModel();
31-
auto root = treeModel->rootItem().get();
32-
treeModel->addItem(root, parent1);
33-
treeModel->addItem(root, parent2);
34-
treeModel->addItem(parent1, child1);
35-
treeModel->addItem(child1, grandChild1);
36-
treeModel->addItem(child1, grandChild2);
37-
32+
model.addTopLevelItem(america);
33+
model.addTopLevelItem(asia);
34+
model.addTopLevelItem(europe);
35+
model.addItem(america, brazil);
36+
model.addItem(america, canada);
37+
model.addItem(europe, italy);
38+
model.addItem(europe, portugal);
39+
3840
QQmlApplicationEngine engine;
3941
engine.rootContext()->setContextProperty("treeModel", treeModel);
4042
engine.load(url);
@@ -56,7 +58,7 @@ Expose and populate the TreeModel from C++, then just initialize it
5658
```
5759
and this is the result
5860

59-
![](img/treeview01.png)
61+
![](img/minimal.png)
6062

6163

6264
# Platforms
@@ -67,6 +69,14 @@ Code has been tested in the following OS:
6769
- Windows
6870
- Linux
6971

72+
# Installation
73+
74+
- Copy the ```modules``` folder to your project, then add the ```qmltreeview.pri``` file or manually add headers, source and
75+
resource file.
76+
- Add the modules path to the ```QML_IMPORT_PATH```.
77+
- In the main file add the import path to the engine with ```engine.addImportPath("qrc:/modules");```
78+
- In the QML file you can include the module with ```import QMLTreeView 1.0```
79+
7080
# Customization
7181

7282
## Selection / Hovering
@@ -82,7 +92,7 @@ Hovering and selection can be activated enabling the respective properties
8292
}
8393
```
8494

85-
![](img/treeview02.png)
95+
![](img/selection.png)
8696

8797
## Styling
8898

@@ -109,7 +119,7 @@ TreeView support color styling for each part. Positioning can be customized with
109119
}
110120
```
111121

112-
![](img/treeview03.png)
122+
![](img/styled.png)
113123

114124
Font can be customized through properties ```font``` and ```fontMetrics```.
115125

@@ -217,7 +227,7 @@ TreeView {
217227
}
218228
}
219229
```
220-
![](img/treeview04.png)
230+
![](img/customdelegate.png)
221231

222232
## Data Access
223233

@@ -231,7 +241,7 @@ Data access for row element is provided by the properties:
231241
```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.
232242
Take a look at the **Manipulator Example** which show a way to manipulate the tree directly from QML.
233243

234-
![](img/manipulation.png)
244+
![](img/manipulator.png)
235245

236246
## Customizing Models
237247

@@ -296,4 +306,4 @@ TreeView {
296306
}
297307
```
298308

299-
![](img/treeview05.png)
309+
![](img/json.png)

‎examples/customdelegate/main.cpp‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,33 @@
66

77
void populateModel(TreeModel& model)
88
{
9-
auto parent1 = new TreeItem("Parent1");
10-
auto parent2 = new TreeItem("Parent2");
11-
auto parent3 = new TreeItem("Parent3");
12-
auto parent4 = new TreeItem("Parent4");
13-
auto parent5 = new TreeItem("Parent5");
14-
auto parent6 = new TreeItem("Parent6");
15-
16-
auto child1 = new TreeItem("Child1");
17-
auto child2 = new TreeItem("Child2");
18-
auto child3 = new TreeItem("Child3");
19-
auto grandChild1 = new TreeItem("GrandChild1");
20-
auto grandChild2 = new TreeItem("GrandChild2");
21-
auto grateChild1 = new TreeItem("GreateChild1");
22-
auto grateChild2 = new TreeItem("GreateChild2");
23-
24-
model.addTopLevelItem(parent1);
25-
model.addTopLevelItem(parent2);
26-
model.addTopLevelItem(parent3);
27-
model.addTopLevelItem(parent4);
28-
model.addTopLevelItem(parent5);
29-
model.addTopLevelItem(parent6);
30-
31-
model.addItem(parent1, child1);
32-
model.addItem(parent1, child2);
33-
model.addItem(parent1, child3);
34-
model.addItem(child1, grandChild1);
35-
model.addItem(child1, grandChild2);
36-
model.addItem(grandChild1, grateChild1);
37-
model.addItem(grandChild1, grateChild2);
9+
auto america = new TreeItem("America");
10+
auto asia = new TreeItem("Asia");
11+
auto europe = new TreeItem("Europe");
12+
auto oceania = new TreeItem("Oceania");
13+
14+
auto brazil = new TreeItem("Brazil");
15+
auto canada = new TreeItem("Canada");
16+
auto mexico = new TreeItem("Mexico");
17+
auto usa = new TreeItem("USA");
18+
19+
auto italy = new TreeItem("Italy");
20+
auto france = new TreeItem("France");
21+
auto portugal = new TreeItem("Portugal");
22+
auto spain = new TreeItem("Spain");
23+
24+
model.addTopLevelItem(america);
25+
model.addTopLevelItem(asia);
26+
model.addTopLevelItem(europe);
27+
model.addTopLevelItem(oceania);
28+
model.addItem(america, brazil);
29+
model.addItem(america, canada);
30+
model.addItem(america, mexico);
31+
model.addItem(america, usa);
32+
model.addItem(europe, italy);
33+
model.addItem(europe, france);
34+
model.addItem(europe, portugal);
35+
model.addItem(europe, spain);
3836
}
3937

4038
int main(int argc, char *argv[]) {

‎examples/customdelegate/main.qml‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,7 @@ Window {
1212
height: 400
1313
title: qsTr("Custom Delegate")
1414

15-
Rectangle {
16-
anchors.fill: parent
17-
border.width: 1
18-
border.color: "black"
19-
clip: true
20-
21-
TreeView {
15+
TreeView {
2216
id: delegateTreeView
2317
anchors.fill: parent
2418
anchors.margins: 1
@@ -89,6 +83,6 @@ Window {
8983
onCurrentDataChanged: console.log("current data is " + currentData)
9084
onCurrentItemChanged: console.log("current item is " + currentItem)
9185
}
92-
}
86+
9387

9488
}

‎examples/minimal/main.cpp‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,33 @@
66

77
void populateModel(TreeModel& model)
88
{
9-
auto parent1 = new TreeItem("Parent1");
10-
auto parent2 = new TreeItem("Parent2");
11-
auto parent3 = new TreeItem("Parent3");
12-
auto parent4 = new TreeItem("Parent4");
13-
auto parent5 = new TreeItem("Parent5");
14-
auto parent6 = new TreeItem("Parent6");
15-
16-
auto child1 = new TreeItem("Child1");
17-
auto child2 = new TreeItem("Child2");
18-
auto child3 = new TreeItem("Child3");
19-
auto grandChild1 = new TreeItem("GrandChild1");
20-
auto grandChild2 = new TreeItem("GrandChild2");
21-
auto grateChild1 = new TreeItem("GreateChild1");
22-
auto grateChild2 = new TreeItem("GreateChild2");
23-
24-
model.addTopLevelItem(parent1);
25-
model.addTopLevelItem(parent2);
26-
model.addTopLevelItem(parent3);
27-
model.addTopLevelItem(parent4);
28-
model.addTopLevelItem(parent5);
29-
model.addTopLevelItem(parent6);
30-
31-
model.addItem(parent1, child1);
32-
model.addItem(parent1, child2);
33-
model.addItem(parent1, child3);
34-
model.addItem(child1, grandChild1);
35-
model.addItem(child1, grandChild2);
36-
model.addItem(grandChild1, grateChild1);
37-
model.addItem(grandChild1, grateChild2);
9+
auto america = new TreeItem("America");
10+
auto asia = new TreeItem("Asia");
11+
auto europe = new TreeItem("Europe");
12+
auto oceania = new TreeItem("Oceania");
13+
14+
auto brazil = new TreeItem("Brazil");
15+
auto canada = new TreeItem("Canada");
16+
auto mexico = new TreeItem("Mexico");
17+
auto usa = new TreeItem("USA");
18+
19+
auto italy = new TreeItem("Italy");
20+
auto france = new TreeItem("France");
21+
auto portugal = new TreeItem("Portugal");
22+
auto spain = new TreeItem("Spain");
23+
24+
model.addTopLevelItem(america);
25+
model.addTopLevelItem(asia);
26+
model.addTopLevelItem(europe);
27+
model.addTopLevelItem(oceania);
28+
model.addItem(america, brazil);
29+
model.addItem(america, canada);
30+
model.addItem(america, mexico);
31+
model.addItem(america, usa);
32+
model.addItem(europe, italy);
33+
model.addItem(europe, france);
34+
model.addItem(europe, portugal);
35+
model.addItem(europe, spain);
3836
}
3937

4038
int main(int argc, char *argv[]) {

‎examples/styled/main.cpp‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,33 @@
66

77
void populateModel(TreeModel& model)
88
{
9-
auto parent1 = new TreeItem("Parent1");
10-
auto parent2 = new TreeItem("Parent2");
11-
auto parent3 = new TreeItem("Parent3");
12-
auto parent4 = new TreeItem("Parent4");
13-
auto parent5 = new TreeItem("Parent5");
14-
auto parent6 = new TreeItem("Parent6");
15-
16-
auto child1 = new TreeItem("Child1");
17-
auto child2 = new TreeItem("Child2");
18-
auto child3 = new TreeItem("Child3");
19-
auto grandChild1 = new TreeItem("GrandChild1");
20-
auto grandChild2 = new TreeItem("GrandChild2");
21-
auto grateChild1 = new TreeItem("GreateChild1");
22-
auto grateChild2 = new TreeItem("GreateChild2");
23-
24-
model.addTopLevelItem(parent1);
25-
model.addTopLevelItem(parent2);
26-
model.addTopLevelItem(parent3);
27-
model.addTopLevelItem(parent4);
28-
model.addTopLevelItem(parent5);
29-
model.addTopLevelItem(parent6);
30-
31-
model.addItem(parent1, child1);
32-
model.addItem(parent1, child2);
33-
model.addItem(parent1, child3);
34-
model.addItem(child1, grandChild1);
35-
model.addItem(child1, grandChild2);
36-
model.addItem(grandChild1, grateChild1);
37-
model.addItem(grandChild1, grateChild2);
9+
auto america = new TreeItem("America");
10+
auto asia = new TreeItem("Asia");
11+
auto europe = new TreeItem("Europe");
12+
auto oceania = new TreeItem("Oceania");
13+
14+
auto brazil = new TreeItem("Brazil");
15+
auto canada = new TreeItem("Canada");
16+
auto mexico = new TreeItem("Mexico");
17+
auto usa = new TreeItem("USA");
18+
19+
auto italy = new TreeItem("Italy");
20+
auto france = new TreeItem("France");
21+
auto portugal = new TreeItem("Portugal");
22+
auto spain = new TreeItem("Spain");
23+
24+
model.addTopLevelItem(america);
25+
model.addTopLevelItem(asia);
26+
model.addTopLevelItem(europe);
27+
model.addTopLevelItem(oceania);
28+
model.addItem(america, brazil);
29+
model.addItem(america, canada);
30+
model.addItem(america, mexico);
31+
model.addItem(america, usa);
32+
model.addItem(europe, italy);
33+
model.addItem(europe, france);
34+
model.addItem(europe, portugal);
35+
model.addItem(europe, spain);
3836
}
3937

4038
int main(int argc, char *argv[]) {

‎examples/styled/main.qml‎

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,36 +12,29 @@ Window {
1212
height: 400
1313
title: qsTr("Styled TreeView")
1414

15-
Rectangle {
16-
anchors.fill: parent
17-
border.width: 1
18-
border.color: "black"
19-
clip: true
20-
21-
TreeView {
22-
id: styledTreeView
23-
24-
anchors.fill: parent
25-
anchors.margins: 1
26-
27-
model: treeModel
28-
selectionEnabled: true
29-
hoverEnabled: true
30-
31-
color: "steelblue"
32-
handleColor: "steelblue"
33-
hoverColor: "skyblue"
34-
selectedColor: "cornflowerblue"
35-
selectedItemColor: "white"
36-
handleStyle: TreeView.Handle.Chevron
37-
rowHeight: 40
38-
rowPadding: 30
39-
rowSpacing: 12
40-
font.pixelSize: 20
41-
42-
onCurrentIndexChanged: console.log("current index is (row=" + currentIndex.row + ", depth=" + model.depth(currentIndex) + ")")
43-
onCurrentDataChanged: console.log("current data is " + currentData)
44-
onCurrentItemChanged: console.log("current item is " + currentItem)
45-
}
46-
}
15+
TreeView {
16+
id: styledTreeView
17+
18+
anchors.fill: parent
19+
anchors.margins: 1
20+
21+
model: treeModel
22+
selectionEnabled: true
23+
hoverEnabled: true
24+
25+
color: "steelblue"
26+
handleColor: "steelblue"
27+
hoverColor: "skyblue"
28+
selectedColor: "cornflowerblue"
29+
selectedItemColor: "white"
30+
handleStyle: TreeView.Handle.Chevron
31+
rowHeight: 40
32+
rowPadding: 30
33+
rowSpacing: 12
34+
font.pixelSize: 20
35+
36+
onCurrentIndexChanged: console.log("current index is (row=" + currentIndex.row + ", depth=" + model.depth(currentIndex) + ")")
37+
onCurrentDataChanged: console.log("current data is " + currentData)
38+
onCurrentItemChanged: console.log("current item is " + currentItem)
39+
}
4740
}

‎img/customdelegate.png‎

27.5 KB
Loading

‎img/json.png‎

20.5 KB
Loading

‎img/manipulation.png‎

-30.8 KB
Binary file not shown.

‎img/manipulator.png‎

26.2 KB
Loading

0 commit comments

Comments
 (0)