First stab at a tree navigation in qt quick components 2

master
Jos van den Oever 2017-09-02 18:19:50 +02:00
parent 27b22cb9cf
commit c14049f001
10 changed files with 299 additions and 180 deletions

79
demo/qml/DataAndChart.qml Normal file
View File

@ -0,0 +1,79 @@
import QtQuick 2.6
import QtQml.Models 2.2
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
RowLayout {
anchors.fill: parent
Component {
id: editableDelegate
Item {
Text {
text: styleData.value
visible: !styleData.selected
}
Loader {
id: loaderEditor
anchors.fill: parent
Connections {
target: loaderEditor.item
onEditingFinished: {
if (!demo) {
return
}
var val = loaderEditor.item.text
var row = styleData.row
if (styleData.column === 0) {
demo.timeSeries.setInput(row, val)
} else {
demo.timeSeries.setResult(row, val)
}
}
}
sourceComponent: styleData.selected ? editor : null
}
Component {
id: editor
TextInput {
id: textInput
text: styleData.value
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: textInput.forceActiveFocus()
}
}
}
}
}
TableView {
model: demo.timeSeries
Layout.fillHeight: true
TableViewColumn {
role: "input"
title: qsTr("input")
}
TableViewColumn {
role: "result"
title: qsTr("result")
}
itemDelegate: {
return editableDelegate
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Text {
anchors.centerIn: parent
text: qsTr("QtChart is not available.")
visible: chartLoader.status !== Loader.Ready
}
Loader {
anchors.fill: parent
id: chartLoader
source: "chart.qml"
}
}
}

27
demo/qml/Fibonacci2.qml Normal file
View File

@ -0,0 +1,27 @@
import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ColumnLayout {
Text {
text: qsTr("Calculate the <i>nth</i> Fibonacci number")
}
TextField {
id: fibonacciInput
placeholderText: qsTr("Your number")
validator: IntValidator {
bottom: 0
top: 100
}
text: demo.fibonacci.input
onAccepted: {
var val = parseInt(text, 10)
if (val !== demo.fibonacci.input) {
demo.fibonacci.input = val
}
}
}
Text {
text: qsTr("The Fibonacci number: ") + demo.fibonacci.result
}
}

View File

@ -0,0 +1,24 @@
import QtQuick 2.6
import QtQuick.Controls 2.2
ListView {
model: demo.fibonacciList
header: Row {
Text {
width: 100
text: qsTr("Row")
}
Text {
text: qsTr("Fibonacci number")
}
}
delegate: Row {
Text {
width: 100
text: row
}
Text {
text: fibonacciNumber
}
}
}

31
demo/qml/FileTreeView.qml Normal file
View File

@ -0,0 +1,31 @@
import QtQuick 2.6
import QtQml.Models 2.2
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
TreeView {
id: treeView
model: sortedFileSystem
sortIndicatorVisible: true
alternatingRowColors: true
selection: selectionModel
TableViewColumn {
title: "Name"
role: "fileName"
}
TableViewColumn {
title: "Size"
role: "fileSize"
}
Component.onCompleted: {
var root = treeView.rootIndex
var first = sortedFileSystem.index(0, 0, root)
treeView.expand(first)
}
onSortIndicatorColumnChanged: sort()
onSortIndicatorOrderChanged: sort()
function sort() {
var role = getColumn(treeView.sortIndicatorColumn).role
model.sortByRole(role, treeView.sortIndicatorOrder)
}
}

View File

@ -0,0 +1,47 @@
import QtQuick 2.6
import QtQml.Models 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item {
anchors.fill: parent
ListView {
id: view
anchors.fill: parent
model: DelegateModel {
id: dirModel
model: sortedFileSystem
delegate: Item {
width: parent.width
height: row.height
Row {
id: row
Text {
width: 200
text: fileName
}
Text {
text: fileSize
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if (model.hasModelChildren)
view.model.rootIndex = view.model.modelIndex(index)
}
}
}
}
header: Row {
Text {
width: 200
text: qsTr("Name")
}
Text {
text: qsTr("Size")
}
}
}
}

View File

@ -0,0 +1,69 @@
import QtQuick 2.6
import QtQml.Models 2.2
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
Item {
TextField {
id: processFilterInput
focus: true
width: parent.width
placeholderText: "Filter processes"
onTextChanged: {
processes.filterRegExp = new RegExp(processFilterInput.text)
}
}
TreeView {
onClicked: {
processSelection.select(
index, ItemSelectionModel.ToggleCurrent)
}
Binding {
target: demo.processes
property: "active"
value: visible
}
width: parent.width
anchors.top: processFilterInput.bottom
anchors.bottom: parent.bottom
id: processView
model: processes
selection: processSelection
selectionMode: SelectionMode.ExtendedSelection
// selectionMode: SelectionMode.SingleSelection
sortIndicatorVisible: true
alternatingRowColors: true
TableViewColumn {
title: "name"
role: "name"
}
TableViewColumn {
title: "cpu"
role: "cpuUsage"
}
TableViewColumn {
title: "memory"
role: "memory"
}
onSortIndicatorColumnChanged: sort()
onSortIndicatorOrderChanged: sort()
function sort() {
var role = getColumn(
processView.sortIndicatorColumn).role
model.sortByRole(role, processView.sortIndicatorOrder)
}
Timer {
interval: 100
running: true
repeat: true
onTriggered: {
var root = processView.rootIndex
var systemd = processes.index(1, 0, root)
if (processes.data(systemd) === "systemd") {
processView.expand(systemd)
running = false
}
}
}
}
}

View File

@ -28,9 +28,6 @@ ApplicationWindow {
currentIndex: bar.currentIndex
Fibonacci2 {}
FibonacciList2 {}
Text {
id: treeView
text: "No TreeView in QtQuick Controls 2"
}
FileTreeView2 {}
}
}

View File

@ -40,190 +40,24 @@ ApplicationWindow {
anchors.fill: parent
Tab {
title: "object"
Fibonacci {
anchors.fill: parent
}
Fibonacci {}
}
Tab {
title: "list"
FibonacciList {
anchors.fill: parent
}
FibonacciList {}
}
Tab {
title: "tree"
TreeView {
id: treeView
model: sortedFileSystem
sortIndicatorVisible: true
alternatingRowColors: true
selection: selectionModel
TableViewColumn {
title: "Name"
role: "fileName"
}
TableViewColumn {
title: "Size"
role: "fileSize"
}
Component.onCompleted: {
var root = treeView.rootIndex
var first = sortedFileSystem.index(0, 0, root)
treeView.expand(first)
}
onSortIndicatorColumnChanged: sort()
onSortIndicatorOrderChanged: sort()
function sort() {
var role = getColumn(treeView.sortIndicatorColumn).role
model.sortByRole(role, treeView.sortIndicatorOrder)
}
}
FileTreeView {}
}
Tab {
title: "processes"
Item {
anchors.fill: parent
TextField {
id: processFilterInput
focus: true
width: parent.width
placeholderText: "Filter processes"
onTextChanged: {
processes.filterRegExp = new RegExp(processFilterInput.text)
}
}
TreeView {
onClicked: {
processSelection.select(
index, ItemSelectionModel.ToggleCurrent)
}
Binding {
target: demo.processes
property: "active"
value: visible
}
width: parent.width
anchors.top: processFilterInput.bottom
anchors.bottom: parent.bottom
id: processView
model: processes
selection: processSelection
selectionMode: SelectionMode.ExtendedSelection
// selectionMode: SelectionMode.SingleSelection
sortIndicatorVisible: true
alternatingRowColors: true
TableViewColumn {
title: "name"
role: "name"
}
TableViewColumn {
title: "cpu"
role: "cpuUsage"
}
TableViewColumn {
title: "memory"
role: "memory"
}
onSortIndicatorColumnChanged: sort()
onSortIndicatorOrderChanged: sort()
function sort() {
var role = getColumn(
processView.sortIndicatorColumn).role
model.sortByRole(role, processView.sortIndicatorOrder)
}
Timer {
interval: 100
running: true
repeat: true
onTriggered: {
var root = processView.rootIndex
var systemd = processes.index(1, 0, root)
if (processes.data(systemd) === "systemd") {
processView.expand(systemd)
running = false
}
}
}
}
}
ProcessesTree {}
}
Tab {
id: chartTab
title: "chart"
RowLayout {
anchors.fill: parent
Component {
id: editableDelegate
Item {
Text {
text: styleData.value
visible: !styleData.selected
}
Loader {
id: loaderEditor
anchors.fill: parent
Connections {
target: loaderEditor.item
onEditingFinished: {
if (!demo) {
return
}
var val = loaderEditor.item.text
var row = styleData.row
if (styleData.column === 0) {
demo.timeSeries.setInput(row, val)
} else {
demo.timeSeries.setResult(row, val)
}
}
}
sourceComponent: styleData.selected ? editor : null
}
Component {
id: editor
TextInput {
id: textInput
text: styleData.value
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: textInput.forceActiveFocus()
}
}
}
}
}
TableView {
model: demo.timeSeries
Layout.fillHeight: true
TableViewColumn {
role: "input"
title: "input"
}
TableViewColumn {
role: "result"
title: "result"
}
itemDelegate: {
return editableDelegate
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Text {
anchors.centerIn: parent
text: "QtChart is not available."
visible: chartLoader.status !== Loader.Ready
}
Loader {
anchors.fill: parent
id: chartLoader
source: "chart.qml"
}
}
}
DataAndChart {}
}
}
}

View File

@ -1,14 +1,18 @@
<RCC>
<qresource prefix="/">
<file>qml/demo.qml</file>
<file>qml/chart.qml</file>
<file>qml/demo-qtquick2.qml</file>
<file>logo.svg</file>
<file>qml/DataAndChart.qml</file>
<file>qml/Fibonacci.qml</file>
<file>qml/Fibonacci2.qml</file>
<file>qml/FibonacciList.qml</file>
<file>qml/FibonacciList2.qml</file>
<file>qml/FileTreeView.qml</file>
<file>qml/FileTreeView2.qml</file>
<file>qml/ProcessesTree.qml</file>
<file>qml/StyleSwitcher.qml</file>
<file>qml/StyleSwitcher2.qml</file>
<file>qml/Fibonacci2.qml</file>
<file>qml/FibonacciList2.qml</file>
<file>qml/chart.qml</file>
<file>qml/demo-qtquick2.qml</file>
<file>qml/demo.qml</file>
</qresource>
</RCC>

View File

@ -212,9 +212,16 @@ QWidget* createListTab(Model* model) {
QWidget* createTreeTab(Model* model) {
QTreeView* view = new QTreeView();
model->demo.fileSystemTree()->setHeaderData(0, Qt::Horizontal,
view->tr("Name"), Qt::DisplayRole);
model->demo.fileSystemTree()->setHeaderData(1, Qt::Horizontal,
view->tr("Size"), Qt::DisplayRole);
view->setUniformRowHeights(true);
view->setSortingEnabled(true);
view->setModel(&model->sortedFileSystem);
view->header()->setSectionHidden(2, true);
view->header()->setSectionHidden(3, true);
view->header()->setSectionHidden(4, true);
auto root = model->sortedFileSystem.index(0, 0);
view->expand(root);
view->sortByColumn(0, Qt::AscendingOrder);