FluentUI/example/qml/page/T_TreeView.qml
朱子楚\zhuzi 6a5f9d04a9 update
2024-03-29 16:56:09 +08:00

131 lines
3.2 KiB
QML

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "../component"
FluContentPage {
title: qsTr("TreeView")
function treeData(){
const dig = (path = '0', level = 4) => {
const list = [];
for (let i = 0; i < 6; i += 1) {
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();
}
Column{
id: layout_column
spacing: 12
width: 300
anchors{
top:parent.top
left: parent.left
leftMargin: 10
bottom:parent.bottom
bottomMargin: 20
}
FluText{
text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
}
FluText{
text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
}
RowLayout{
spacing: 10
FluText{
text: "cellHeight:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id: slider_cell_height
value: 30
from: 30
to:100
}
}
RowLayout{
spacing: 10
FluText{
text: "depthPadding:"
Layout.alignment: Qt.AlignVCenter
}
FluSlider{
id: slider_depth_padding
value: 30
from: 30
to:100
}
}
FluToggleSwitch{
id: switch_showline
text:"showLine"
checked: false
}
FluToggleSwitch{
id: switch_draggable
text:"draggable"
checked: false
}
FluToggleSwitch{
id: switch_checkable
text:"checkable"
checked: false
}
FluButton{
text: "all expand"
onClicked: {
tree_view.allExpand()
}
}
FluButton{
text: "all collapse"
onClicked: {
tree_view.allCollapse()
}
}
}
FluFrame{
anchors{
left: layout_column.right
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: 5
topMargin: 5
bottomMargin: 5
}
FluShadow{}
FluTreeView{
id:tree_view
anchors.fill: parent
cellHeight: slider_cell_height.value
draggable:switch_draggable.checked
showLine: switch_showline.checked
checkable:switch_checkable.checked
depthPadding: slider_depth_padding.value
Component.onCompleted: {
var data = treeData()
dataSource = data
}
}
}
}