FluentUI/example/qml-Qt6/page/T_TreeView.qml

132 lines
3.2 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
2024-01-25 17:26:50 +08:00
import "../component"
2023-08-24 15:50:37 +08:00
2023-09-22 00:11:58 +08:00
FluContentPage {
2023-08-24 15:50:37 +08:00
title:"TreeView"
2023-09-14 18:50:36 +08:00
function treeData(){
2023-09-21 18:29:09 +08:00
const dig = (path = '0', level = 4) => {
2023-09-14 18:50:36 +08:00
const list = [];
2023-09-22 17:35:02 +08:00
for (let i = 0; i < 6; i += 1) {
2023-09-14 18:50:36 +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-09-22 00:11:58 +08:00
Column{
id:layout_column
spacing: 12
width: 300
anchors{
topMargin: 20
top:parent.top
left: parent.left
leftMargin: 10
bottom:parent.bottom
bottomMargin: 20
}
FluText{
text:"共计%1条数据当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
}
2023-09-22 17:35:02 +08:00
FluText{
text:"共计选中%1条数据".arg(tree_view.selectionModel().length)
}
2023-09-22 00:11:58 +08:00
RowLayout{
2023-09-15 19:11:55 +08:00
spacing: 10
FluText{
2023-09-22 00:11:58 +08:00
text:"cellHeight:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id:slider_cell_height
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{
2023-09-22 00:11:58 +08:00
text:"depthPadding:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id:slider_depth_padding
value: 30
from: 30
to:100
}
}
FluToggleSwitch{
id:switch_showline
text:"showLine"
2023-09-22 17:35:02 +08:00
checked: false
2023-09-22 00:11:58 +08:00
}
FluToggleSwitch{
id:switch_draggable
text:"draggable"
2023-09-22 17:35:02 +08:00
checked: false
}
FluToggleSwitch{
id:switch_checkable
text:"checkable"
checked: false
2023-09-22 00:11:58 +08:00
}
FluButton{
text:"all expand"
onClicked: {
tree_view.allExpand()
}
}
FluButton{
text:"all collapse"
onClicked: {
tree_view.allCollapse()
2023-09-15 19:11:55 +08:00
}
2023-08-24 15:50:37 +08:00
}
}
FluArea{
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-08-24 15:50:37 +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-09-14 18:50:36 +08:00
Component.onCompleted: {
var data = treeData()
dataSource = data
}
}
2023-08-24 15:50:37 +08:00
}
}