First stab at a tree navigation in qt quick components 2
parent
27b22cb9cf
commit
c14049f001
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -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")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -28,9 +28,6 @@ ApplicationWindow {
|
|||
currentIndex: bar.currentIndex
|
||||
Fibonacci2 {}
|
||||
FibonacciList2 {}
|
||||
Text {
|
||||
id: treeView
|
||||
text: "No TreeView in QtQuick Controls 2"
|
||||
}
|
||||
FileTreeView2 {}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue