180 lines
6.8 KiB
QML
180 lines
6.8 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Layouts
|
|
import FluentUI
|
|
|
|
Window {
|
|
id: fileListTestWindow
|
|
visible: true
|
|
width: 800
|
|
height: 600
|
|
title: "File List Test1"
|
|
signal search(string tag)
|
|
signal open(string file)
|
|
Item {
|
|
anchors.fill: parent
|
|
ListView {
|
|
id: listView
|
|
anchors.fill: parent
|
|
spacing: 10
|
|
header: fileListItemHeader
|
|
model: fileListModel
|
|
delegate: fileListItemDelegate
|
|
}
|
|
Component {
|
|
id: fileListItemHeader
|
|
Item {
|
|
id: fileListItemHeaderItem
|
|
width: ListView.view.width
|
|
height: 48
|
|
RowLayout {
|
|
FluBreadcrumbBar {
|
|
id: header
|
|
width: parent.width
|
|
height: parent.height
|
|
separator: ">"
|
|
items: [{
|
|
"title": "Home"
|
|
}, {
|
|
"title": "Documents"
|
|
}, {
|
|
"title": "File List"
|
|
}]
|
|
onClickItem: function (model) {
|
|
if (model.index + 1 !== count()) {
|
|
items = items.slice(0, model.index + 1)
|
|
}
|
|
}
|
|
onItemsChanged: {
|
|
fileListItemHeaderItem.update()
|
|
}
|
|
}
|
|
// back to folder button
|
|
FluIconButton {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
id: backButton
|
|
width: 24
|
|
height: 24
|
|
iconSource: FluentIcons.ChromeBack
|
|
onClicked: {
|
|
if (header.count() > 1) {
|
|
header.items = header.items.slice(
|
|
0, header.count() - 1)
|
|
}
|
|
fileListItemHeaderItem.update()
|
|
}
|
|
}
|
|
}
|
|
|
|
function add(folderName) {
|
|
listView.headerItem.children[0].items
|
|
= listView.headerItem.children[0].items.concat([{
|
|
"title": folderName
|
|
}])
|
|
}
|
|
function update() {
|
|
// combine all header items to a path
|
|
var path = ""
|
|
// for (var i = 0; i < listView.headerItem.children[0].items.length; i++) {
|
|
// path += listView.headerItem.children[0].items[i].title + "/"
|
|
// }
|
|
console.log(path)
|
|
var newListModel = [{
|
|
"title": "File 2",
|
|
"isDir": false,
|
|
"brief": "This is a test file",
|
|
"size": 500,
|
|
"type": "WORD",
|
|
"date": "2020-09-09",
|
|
"pageView": 100,
|
|
"stars": 10,
|
|
"tags": "tag1,tag2,tag3"
|
|
}, {
|
|
"title": "File 3",
|
|
"isDir": false,
|
|
"brief": "This is a test file",
|
|
"size": 500,
|
|
"type": "WORD",
|
|
"date": "2020-09-09",
|
|
"pageView": 100,
|
|
"stars": 10,
|
|
"tags"// 15 tags
|
|
: "tag1,tag2,tag3,tag4,tag5,tag6,tag7,tag8,tag9,tag10,tag11,tag12,tag13,tag14,tag15"
|
|
}]
|
|
// http request for new list data
|
|
fileListModel.clear()
|
|
fileListModel.append(newListModel)
|
|
// set ListView currentItem to null
|
|
listView.currentIndex = -1
|
|
}
|
|
}
|
|
}
|
|
Component {
|
|
id: fileListItemDelegate
|
|
Rectangle {
|
|
id: fileListItemRect
|
|
width: ListView.view.width
|
|
height: 120
|
|
color: !ListView.isCurrentItem ? "lightgray" : "red"
|
|
FileListItem {
|
|
id: fileListItem
|
|
width: parent.width
|
|
height: parent.height
|
|
title: model.title
|
|
isDir: model.isDir
|
|
brief: model.brief
|
|
size: model.size
|
|
type: model.type
|
|
date: model.date
|
|
pageView: model.pageView
|
|
stars: model.stars
|
|
// split string to array
|
|
tags: model.tags.split(",")
|
|
onTagClicked: {
|
|
emit: search(tag)
|
|
console.log(tag)
|
|
}
|
|
}
|
|
function doubleClicked() {
|
|
listView.currentIndex = index
|
|
if (model.isDir) {
|
|
listView.headerItem.add(model.title)
|
|
} else {
|
|
emit: open(model.uid)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ListModel {
|
|
id: fileListModel
|
|
ListElement {
|
|
title: "File 1"
|
|
isDir: true
|
|
brief: "This is a test file"
|
|
type: "FOLDER"
|
|
}
|
|
ListElement {
|
|
uid: "2"
|
|
title: "File 2"
|
|
isDir: false
|
|
brief: "This is a test file"
|
|
size: 500
|
|
type: "WORD"
|
|
date: "2020-09-09"
|
|
pageView: 100
|
|
stars: 10
|
|
}
|
|
ListElement {
|
|
uid: "3"
|
|
title: "File 3"
|
|
isDir: false
|
|
brief: "This is a test file"
|
|
type: "PPT"
|
|
date: "2020-09-09"
|
|
pageView: 100
|
|
size: 10200000022
|
|
stars: 10
|
|
}
|
|
}
|
|
}
|
|
}
|