FluentUI/example/qml/page/T_TreeView.qml

131 lines
3.2 KiB
QML
Raw Normal View History

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
}