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-06-12 16:46:02 +08:00
|
|
|
|
import "qrc:///example/qml/component"
|
2023-08-26 17:20:30 +08:00
|
|
|
|
import "../component"
|
2023-03-07 00:05:27 +08:00
|
|
|
|
|
2023-04-06 17:32:21 +08:00
|
|
|
|
FluScrollablePage {
|
2023-03-10 18:08:32 +08:00
|
|
|
|
|
|
|
|
|
title:"TreeView"
|
2023-03-07 18:43:03 +08:00
|
|
|
|
|
2023-09-15 01:28:03 +08:00
|
|
|
|
function treeData(){
|
|
|
|
|
const dig = (path = '0', level = 4) => {
|
|
|
|
|
const list = [];
|
2023-09-15 19:11:55 +08:00
|
|
|
|
for (let i = 0; i < 10; 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-04-06 17:32:21 +08:00
|
|
|
|
FluArea{
|
|
|
|
|
Layout.fillWidth: true
|
2023-09-15 01:28:03 +08:00
|
|
|
|
Layout.topMargin: 10
|
2023-04-06 17:32:21 +08:00
|
|
|
|
paddings: 10
|
2023-09-15 19:11:55 +08:00
|
|
|
|
height: 80
|
|
|
|
|
Column{
|
2023-09-15 01:28:03 +08:00
|
|
|
|
anchors.verticalCenter: parent.verticalCenter
|
2023-09-15 19:11:55 +08:00
|
|
|
|
spacing: 10
|
|
|
|
|
FluText{
|
|
|
|
|
text:"高性能树控件,新的TreeView用TableView实现!!"
|
|
|
|
|
}
|
|
|
|
|
FluText{
|
|
|
|
|
text:"共计:%1条数据,当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
|
|
|
|
|
}
|
2023-03-07 23:27:32 +08:00
|
|
|
|
}
|
2023-04-06 17:32:21 +08:00
|
|
|
|
}
|
|
|
|
|
FluArea{
|
|
|
|
|
Layout.fillWidth: true
|
|
|
|
|
Layout.topMargin: 10
|
|
|
|
|
paddings: 10
|
|
|
|
|
height: 400
|
2023-09-15 19:11:55 +08:00
|
|
|
|
Item{
|
|
|
|
|
anchors.fill: tree_view
|
|
|
|
|
FluShadow{}
|
|
|
|
|
}
|
2023-04-06 17:32:21 +08:00
|
|
|
|
FluTreeView{
|
|
|
|
|
id:tree_view
|
2023-09-15 19:11:55 +08:00
|
|
|
|
width:slider_width.value
|
2023-04-06 17:32:21 +08:00
|
|
|
|
anchors{
|
|
|
|
|
top:parent.top
|
|
|
|
|
left:parent.left
|
|
|
|
|
bottom:parent.bottom
|
2023-03-07 18:43:03 +08:00
|
|
|
|
}
|
2023-09-15 19:11:55 +08:00
|
|
|
|
showLine: switch_showline.checked
|
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-09-15 19:11:55 +08:00
|
|
|
|
Column{
|
|
|
|
|
anchors{
|
|
|
|
|
top:parent.top
|
|
|
|
|
topMargin: 10
|
|
|
|
|
bottomMargin: 10
|
|
|
|
|
rightMargin: 10
|
|
|
|
|
bottom:parent.bottom
|
|
|
|
|
right: parent.right
|
|
|
|
|
}
|
|
|
|
|
RowLayout{
|
|
|
|
|
spacing: 10
|
|
|
|
|
FluText{
|
|
|
|
|
text:"width:"
|
|
|
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
|
}
|
|
|
|
|
FluSlider{
|
|
|
|
|
id:slider_width
|
|
|
|
|
value: 200
|
|
|
|
|
from: 160
|
|
|
|
|
to:320
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-07 23:27:32 +08:00
|
|
|
|
|
2023-09-15 19:11:55 +08:00
|
|
|
|
FluToggleSwitch{
|
|
|
|
|
id:switch_showline
|
|
|
|
|
text:"showLine"
|
|
|
|
|
checked: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-06 17:32:21 +08:00
|
|
|
|
CodeExpander{
|
|
|
|
|
Layout.fillWidth: true
|
2023-04-19 17:25:46 +08:00
|
|
|
|
Layout.topMargin: -1
|
2023-04-06 17:32:21 +08:00
|
|
|
|
code:'FluTreeView{
|
|
|
|
|
id:tree_view
|
|
|
|
|
width:240
|
|
|
|
|
height:600
|
|
|
|
|
Component.onCompleted: {
|
2023-09-15 01:28:03 +08:00
|
|
|
|
var data = treeData()
|
|
|
|
|
dataSource = data
|
2023-04-06 17:32:21 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
'
|
|
|
|
|
}
|
2023-03-07 00:05:27 +08:00
|
|
|
|
}
|