FluentUI/example/qml-Qt6/page/T_TreeView.qml
朱子楚\zhuzi 257f3a7b3d update
2023-09-18 00:12:39 +08:00

123 lines
3.0 KiB
QML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/component"
FluScrollablePage {
title:"TreeView"
function treeData(){
const dig = (path = '0', level = 3) => {
const list = [];
for (let i = 0; i < 8; 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();
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
paddings: 10
height: 80
Column{
anchors.verticalCenter: parent.verticalCenter
spacing: 10
FluText{
text:"高性能树控件新的TreeView用TableView实现"
}
FluText{
text:"共计:%1条数据当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
}
}
}
FluArea{
Layout.fillWidth: true
Layout.topMargin: 10
paddings: 10
height: 420
Item{
anchors.fill: tree_view
FluShadow{}
}
FluTreeView{
id:tree_view
width:slider_width.value
anchors{
top:parent.top
left:parent.left
bottom:parent.bottom
}
draggable:switch_draggable.checked
showLine: switch_showline.checked
Component.onCompleted: {
var data = treeData()
dataSource = data
}
}
Column{
spacing: 15
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:400
}
}
FluToggleSwitch{
id:switch_showline
text:"showLine"
checked: true
}
FluToggleSwitch{
id:switch_draggable
text:"draggable"
checked: false
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluTreeView{
id:tree_view
width:240
height:600
Component.onCompleted: {
var data = treeData()
dataSource = data
}
}
'
}
}