387 lines
13 KiB
QML
387 lines
13 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import FluentUI.impl
|
|
import Gallery
|
|
|
|
Item {
|
|
id: control
|
|
property int depthPadding: 15
|
|
property var current: "0"
|
|
property var initData: []
|
|
|
|
property var homeChecked: true
|
|
|
|
signal clickItem(var data)
|
|
signal clickHome()
|
|
|
|
Component{
|
|
id: comp_row_key
|
|
Item{
|
|
id: item_layout
|
|
anchors.fill: parent
|
|
property var __display: display
|
|
property bool chekced: {
|
|
if(!control.current){
|
|
return false
|
|
}
|
|
return __display === control.current
|
|
}
|
|
ListTile{
|
|
anchors.fill: parent
|
|
text: rowModel.key //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: 15
|
|
height: 15
|
|
source: rowModel.icon ? rowModel.icon : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png" // 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: {
|
|
console.log(rowModel["icon"])
|
|
if(rowModel.hasChildren){
|
|
item_layout.toggle()
|
|
}
|
|
}
|
|
onClicked: {
|
|
control.current = __display
|
|
control.clickItem(rowModel.cdata)
|
|
}
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// TreeDataGridModel{
|
|
// id: dataModel
|
|
// }
|
|
|
|
ListModel {
|
|
id: dataModel
|
|
ListElement {
|
|
uuid: "1"
|
|
title: "分组1"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
ListElement {
|
|
uuid: "2"
|
|
title: "分组2"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
ListElement {
|
|
uuid: "3"
|
|
title: "分组1"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
ListElement {
|
|
uuid: "4"
|
|
title: "分组2"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
ListElement {
|
|
uuid: "5"
|
|
title: "分组1"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
ListElement {
|
|
uuid: "6"
|
|
title: "分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2"
|
|
icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
|
|
checked: false
|
|
}
|
|
}
|
|
|
|
Component{
|
|
id: list_item
|
|
Rectangle{
|
|
width: parent.width
|
|
height: 38
|
|
color: "transparent"
|
|
Rectangle{
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
height: 34
|
|
color: "transparent"
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
spacing: 5
|
|
z: 2
|
|
Image{
|
|
Layout.leftMargin: 10
|
|
Layout.preferredHeight: 12
|
|
Layout.preferredWidth: 14
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/" + (control.current == model.uuid ? "folder_black.png" : "folder_white.png")
|
|
}
|
|
Label{
|
|
text: model.title
|
|
Layout.preferredWidth: parent.width - 80
|
|
elide: Text.ElideRight
|
|
color: control.current == model.uuid ? "#2a2a2a" : "#ffffff"
|
|
}
|
|
Item{
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: parent.color = "#2d2d2d"
|
|
onExited: {
|
|
parent.color = "transparent"
|
|
}
|
|
onClicked: {
|
|
control.current = model.uuid
|
|
control.clickItem(model)
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
// width: 3
|
|
anchors.fill: parent
|
|
height: 20
|
|
// anchors.top: parent.top
|
|
// anchors.topMargin: 7
|
|
color: "#4CA0E0"
|
|
radius: 5
|
|
z: 1
|
|
gradient: Gradient {
|
|
orientation: Gradient.Horizontal
|
|
GradientStop { position: 0.0; color: "#77ED8B" }
|
|
GradientStop { position: 1.0; color: "#22C55E" }
|
|
}
|
|
visible: control.current == model.uuid
|
|
}
|
|
}
|
|
|
|
InfoBadge {
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.rightMargin: 10
|
|
anchors.topMargin: 10
|
|
count: 5
|
|
color: "#ffffff"
|
|
tcolor: "#2a2a2a"
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout{
|
|
spacing: 5
|
|
anchors.fill: parent
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 35
|
|
color: "transparent"
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
spacing: 5
|
|
z: 2
|
|
Image{
|
|
Layout.leftMargin: 10
|
|
Layout.preferredHeight: 12
|
|
Layout.preferredWidth: 14
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/" + (control.current == "0" ? "home_black.png" : "home_white.png")
|
|
}
|
|
Label{
|
|
text: "主页"
|
|
color: control.current == "0" ? "#2a2a2a": "#ffffff"
|
|
}
|
|
Item{
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: parent.color = "#2d2d2d"
|
|
onExited: parent.color = "transparent"
|
|
onClicked: {
|
|
control.current = "0"
|
|
control.clickHome()
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
// width: 3
|
|
// height: 20
|
|
z: 1
|
|
anchors.fill: parent
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 0
|
|
radius: 5
|
|
gradient: Gradient {
|
|
orientation: Gradient.Horizontal
|
|
GradientStop { position: 0.0; color: "#77ED8B" }
|
|
GradientStop { position: 1.0; color: "#22C55E" }
|
|
}
|
|
|
|
visible: control.current == "0"
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 1
|
|
color: Qt.rgba(216/255,216/255,216/255, 0.2)
|
|
}
|
|
|
|
ScrollView{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
ListView{
|
|
anchors.fill: parent
|
|
id: list_view
|
|
model: dataModel
|
|
clip: true
|
|
delegate: list_item
|
|
highlight: Item{}
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 35
|
|
Layout.leftMargin: -10
|
|
Layout.rightMargin: -10
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
radius: 5
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
spacing: 5
|
|
IconButton{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.topMargin: 5
|
|
Layout.leftMargin: 5
|
|
Layout.bottomMargin: 5
|
|
icon.name: FluentIcons.graph_DictionaryAdd
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
backgroundColor: "#535353"
|
|
onClicked: {
|
|
console.log(dataGrid)
|
|
folderNew.launch({ title: "" })
|
|
}
|
|
}
|
|
IconButton{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.topMargin: 5
|
|
Layout.rightMargin: 5
|
|
Layout.bottomMargin: 5
|
|
icon.name: FluentIcons.graph_Delete
|
|
icon.width: 14
|
|
icon.height: 14
|
|
backgroundColor: "#535353"
|
|
spacing: 5
|
|
onClicked: {
|
|
console.log(dataGrid)
|
|
folderNew.launch({ title: "" })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 新建目录弹框
|
|
WindowResultLauncher{
|
|
id: folderNew
|
|
path: "/newFolder"
|
|
onResult: (data)=>{
|
|
var data = {id: control.generateUUID(), title: data.title, height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
|
|
control.setMenuData(data)
|
|
}
|
|
}
|
|
////////////
|
|
|
|
Component.onCompleted: {
|
|
// var data = {id: "1", title: "充电站规划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
|
|
// control.setMenuData(data)
|
|
// var data = {id: "12", title: "运输计划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
|
|
// control.setMenuData(data)
|
|
}
|
|
|
|
function setMenuData(data) {
|
|
// var tmp = initData.find((v) => v.id == data.id)
|
|
// if (!tmp) {
|
|
// tmp = { id: data.id, key: data.title ? data.title : "未命名", height: 35, icon: data.icon, cdata: data }
|
|
// initData.push(tmp)
|
|
// } else {
|
|
// tmp.key = data.title
|
|
// tmp.cdata = data
|
|
// }
|
|
|
|
// dataModel.sourceData = initData
|
|
dataModel.append({title: data.title, icon: data.icon,uuid:data.id,checked:false})
|
|
}
|
|
|
|
function generateUUID() {
|
|
var d = new Date().getTime();
|
|
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
|
var r = (d + Math.random()*16)%16 | 0;
|
|
d = Math.floor(d/16);
|
|
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
|
|
});
|
|
return uuid;
|
|
}
|
|
}
|