215 lines
6.7 KiB
QML
215 lines
6.7 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import Gallery
|
|
import FluentUI.impl
|
|
|
|
ContentPage {
|
|
|
|
id: control
|
|
title: qsTr("FileTreeData")
|
|
property int depthPadding: 15
|
|
property var current
|
|
FileTreeDataController{
|
|
id: controller
|
|
onLoadDataStart: {
|
|
panel_loading.visible = true
|
|
}
|
|
onLoadDataSuccess: {
|
|
dataModel.sourceData = controller.data
|
|
panel_loading.visible = false
|
|
}
|
|
}
|
|
Component{
|
|
id: comp_row_key
|
|
Item{
|
|
id: item_layout
|
|
property var __display: display
|
|
property bool chekced: {
|
|
if(!control.current){
|
|
return false
|
|
}
|
|
return __display === control.current
|
|
}
|
|
ListTile{
|
|
id: list_tile
|
|
anchors.fill: parent
|
|
text: String(__display)
|
|
leftPadding: 6 + rowModel.depth * control.depthPadding
|
|
highlighted: item_layout.chekced
|
|
spacing: 0
|
|
leading: Row{
|
|
spacing: 0
|
|
IconButton{
|
|
opacity: rowModel.hasChildren
|
|
enabled: opacity
|
|
icon.name: FluentIcons.graph_ChevronDown
|
|
width: 20
|
|
height: 20
|
|
icon.width: 12
|
|
icon.height: 12
|
|
padding: 0
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
contentItem.rotation: rowModel.expanded ? 0 : -90
|
|
onClicked: {
|
|
item_layout.toggle()
|
|
}
|
|
}
|
|
Item{
|
|
width: 4
|
|
height: parent.height
|
|
}
|
|
Image{
|
|
width: 24
|
|
height: 24
|
|
source: rowModel.hasChildren ? "qrc:/qt/qml/Gallery/res/image/ic_folder.png" : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png"
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
Item{
|
|
width: 10
|
|
height: parent.height
|
|
}
|
|
}
|
|
onDoubleClicked: {
|
|
if(rowModel.hasChildren){
|
|
item_layout.toggle()
|
|
}
|
|
}
|
|
onClicked: {
|
|
control.current = __display
|
|
}
|
|
Rectangle{
|
|
height: 18
|
|
radius: 1.5
|
|
width: 3
|
|
visible: item_layout.chekced
|
|
color: Theme.accentColor.defaultBrushFor()
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
}
|
|
}
|
|
}
|
|
|
|
// clip: true
|
|
function toggle(){
|
|
if(rowModel.expanded){
|
|
dataModel.collapse(rowModel.index)
|
|
}else{
|
|
dataModel.expand(rowModel.index)
|
|
}
|
|
}
|
|
|
|
DropArea {
|
|
id: dropArea
|
|
anchors.fill: parent
|
|
onDropped: {
|
|
dragRect.color = "lightgreen"
|
|
console.log(drop.dragItemIndex)
|
|
}
|
|
onEntered: {
|
|
console.log(drag.source.DelegateModel.itemsIndex)
|
|
dragRect.color = "lightblue"
|
|
}
|
|
onExited: {
|
|
dragRect.color = "#ffffff"
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: dragRect
|
|
width: 30
|
|
height: parent.height
|
|
color: "white"
|
|
|
|
Text {
|
|
text: "123"
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
}
|
|
|
|
MouseArea {
|
|
id: dragArea
|
|
anchors.fill: parent
|
|
drag.target: parent
|
|
// drag.axis: Drag.YAxis
|
|
//propagateComposedEvents: true
|
|
onClicked: {
|
|
// mouse.accepted = false
|
|
console.log("click")
|
|
}
|
|
|
|
onPressed: {
|
|
// 将方块置于最顶层，使其在拖动时不会被其他元素遮挡
|
|
// dragRect.z = 10000
|
|
dragRect.visible = true
|
|
// mouse.accepted = false
|
|
}
|
|
onReleased: {
|
|
// dragRect.z = 1
|
|
dragRect.x = 0
|
|
dragRect.y = 0
|
|
dragRect.Drag.drop()
|
|
// mouse.accepted = false
|
|
// if (dragArea.containsDrag) {
|
|
// treeModel.move(rowModel.index, treeView.indexAt(dragArea.mouseX, dragArea.mouseY))
|
|
// }
|
|
}
|
|
}
|
|
|
|
Drag.active: dragArea.drag.active
|
|
Drag.hotSpot.x: dragArea.width / 2
|
|
Drag.hotSpot.y: dragArea.height / 2
|
|
Drag.source: dragRect
|
|
}
|
|
}
|
|
}
|
|
TreeDataGridModel{
|
|
id: dataModel
|
|
}
|
|
TreeDataGrid{
|
|
id: dataGrid
|
|
anchors{
|
|
top: parent.top
|
|
bottom: parent.bottom
|
|
left: parent.left
|
|
bottomMargin: 10
|
|
}
|
|
verticalHeaderVisible: false
|
|
horizonalHeaderVisible: false
|
|
width: 240
|
|
sourceModel: dataModel
|
|
columnSourceModel: ListModel{
|
|
ListElement{
|
|
title: qsTr("Key")
|
|
dataIndex: "key"
|
|
width: 240
|
|
frozen: false
|
|
rowDelegate: function(){return comp_row_key}
|
|
}
|
|
}
|
|
cellBackground: Item{}
|
|
cellForeground: Item{}
|
|
}
|
|
Component.onCompleted: {
|
|
controller.loadData()
|
|
}
|
|
Pane{
|
|
id: panel_loading
|
|
anchors.fill: dataGrid
|
|
ProgressRing{
|
|
anchors.centerIn: parent
|
|
indeterminate: true
|
|
}
|
|
background: Rectangle{
|
|
color: Theme.res.solidBackgroundFillColorBase
|
|
}
|
|
}
|
|
}
|