2023-08-24 15:50:37 +08:00
|
|
|
import QtQuick 2.15
|
|
|
|
import QtQuick.Layouts 1.15
|
|
|
|
import QtQuick.Window 2.15
|
|
|
|
import QtQuick.Controls 2.15
|
|
|
|
import FluentUI 1.0
|
2023-08-26 17:20:30 +08:00
|
|
|
import "../component"
|
2023-03-07 00:05:27 +08:00
|
|
|
|
2023-09-22 00:11:58 +08:00
|
|
|
FluContentPage {
|
2023-03-10 18:08:32 +08:00
|
|
|
|
2024-03-09 15:35:48 +08:00
|
|
|
title: qsTr("TreeView")
|
2023-03-07 18:43:03 +08:00
|
|
|
|
2023-09-15 01:28:03 +08:00
|
|
|
function treeData(){
|
2023-09-21 18:29:09 +08:00
|
|
|
const dig = (path = '0', level = 4) => {
|
2023-09-15 01:28:03 +08:00
|
|
|
const list = [];
|
2023-09-22 17:35:02 +08:00
|
|
|
for (let i = 0; i < 6; i += 1) {
|
2023-09-15 01:28:03 +08:00
|
|
|
const key = `${path}-${i}`;
|
|
|
|
const treeNode = {
|
|
|
|
title: key,
|
|
|
|
key,
|
|
|
|
};
|
|
|
|
if (level > 0) {
|
|
|
|
treeNode.children = dig(key, level - 1);
|
|
|
|
}
|
|
|
|
list.push(treeNode);
|
|
|
|
}
|
|
|
|
return list;
|
|
|
|
};
|
|
|
|
return dig();
|
2023-03-07 23:27:32 +08:00
|
|
|
}
|
2023-03-07 18:43:03 +08:00
|
|
|
|
2023-09-22 00:11:58 +08:00
|
|
|
Column{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: layout_column
|
2023-09-22 00:11:58 +08:00
|
|
|
spacing: 12
|
|
|
|
width: 300
|
|
|
|
anchors{
|
|
|
|
top:parent.top
|
|
|
|
left: parent.left
|
|
|
|
leftMargin: 10
|
|
|
|
bottom:parent.bottom
|
|
|
|
bottomMargin: 20
|
|
|
|
}
|
|
|
|
|
|
|
|
FluText{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
|
2023-09-22 00:11:58 +08:00
|
|
|
}
|
|
|
|
|
2023-09-22 17:35:02 +08:00
|
|
|
FluText{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
|
2023-09-22 17:35:02 +08:00
|
|
|
}
|
|
|
|
|
2023-09-22 00:11:58 +08:00
|
|
|
RowLayout{
|
2023-09-15 19:11:55 +08:00
|
|
|
spacing: 10
|
|
|
|
FluText{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: "cellHeight:"
|
2023-09-22 00:11:58 +08:00
|
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
}
|
|
|
|
FluSlider{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: slider_cell_height
|
2023-09-22 00:11:58 +08:00
|
|
|
value: 30
|
|
|
|
from: 30
|
|
|
|
to:100
|
2023-09-15 19:11:55 +08:00
|
|
|
}
|
2023-09-22 00:11:58 +08:00
|
|
|
}
|
|
|
|
RowLayout{
|
|
|
|
spacing: 10
|
2023-09-15 19:11:55 +08:00
|
|
|
FluText{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: "depthPadding:"
|
2023-09-22 00:11:58 +08:00
|
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
}
|
|
|
|
FluSlider{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: slider_depth_padding
|
2023-09-22 00:11:58 +08:00
|
|
|
value: 30
|
|
|
|
from: 30
|
|
|
|
to:100
|
|
|
|
}
|
|
|
|
}
|
|
|
|
FluToggleSwitch{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: switch_showline
|
2023-09-22 00:11:58 +08:00
|
|
|
text:"showLine"
|
2023-09-22 17:35:02 +08:00
|
|
|
checked: false
|
2023-09-22 00:11:58 +08:00
|
|
|
}
|
|
|
|
FluToggleSwitch{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: switch_draggable
|
2023-09-22 00:11:58 +08:00
|
|
|
text:"draggable"
|
2023-09-22 17:35:02 +08:00
|
|
|
checked: false
|
|
|
|
}
|
|
|
|
FluToggleSwitch{
|
2024-03-09 15:35:48 +08:00
|
|
|
id: switch_checkable
|
2023-09-22 17:35:02 +08:00
|
|
|
text:"checkable"
|
|
|
|
checked: false
|
2023-09-22 00:11:58 +08:00
|
|
|
}
|
|
|
|
FluButton{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: "all expand"
|
2023-09-22 00:11:58 +08:00
|
|
|
onClicked: {
|
|
|
|
tree_view.allExpand()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
FluButton{
|
2024-03-09 15:35:48 +08:00
|
|
|
text: "all collapse"
|
2023-09-22 00:11:58 +08:00
|
|
|
onClicked: {
|
|
|
|
tree_view.allCollapse()
|
2023-09-15 19:11:55 +08:00
|
|
|
}
|
2023-03-07 23:27:32 +08:00
|
|
|
}
|
2023-04-06 17:32:21 +08:00
|
|
|
}
|
2024-03-29 16:56:09 +08:00
|
|
|
FluFrame{
|
2023-09-22 00:11:58 +08:00
|
|
|
anchors{
|
|
|
|
left: layout_column.right
|
|
|
|
top: parent.top
|
|
|
|
bottom: parent.bottom
|
|
|
|
right: parent.right
|
|
|
|
rightMargin: 5
|
|
|
|
topMargin: 5
|
|
|
|
bottomMargin: 5
|
2023-09-15 19:11:55 +08:00
|
|
|
}
|
2023-09-22 00:11:58 +08:00
|
|
|
FluShadow{}
|
2023-04-06 17:32:21 +08:00
|
|
|
FluTreeView{
|
|
|
|
id:tree_view
|
2023-09-22 00:11:58 +08:00
|
|
|
anchors.fill: parent
|
|
|
|
cellHeight: slider_cell_height.value
|
2023-09-17 20:36:33 +08:00
|
|
|
draggable:switch_draggable.checked
|
2023-09-15 19:11:55 +08:00
|
|
|
showLine: switch_showline.checked
|
2023-09-22 17:35:02 +08:00
|
|
|
checkable:switch_checkable.checked
|
2023-09-22 00:11:58 +08:00
|
|
|
depthPadding: slider_depth_padding.value
|
2023-04-06 17:32:21 +08:00
|
|
|
Component.onCompleted: {
|
2023-09-15 01:28:03 +08:00
|
|
|
var data = treeData()
|
|
|
|
dataSource = data
|
2023-03-07 23:27:32 +08:00
|
|
|
}
|
|
|
|
}
|
2023-04-06 17:32:21 +08:00
|
|
|
}
|
2023-03-07 00:05:27 +08:00
|
|
|
}
|