wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-03-07 18:43:03 +08:00
parent 5f1eb364f8
commit 73bf9576d4
3 changed files with 452 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
example/T_TreeView.qml
View File

@ -11,17 +11,207 @@ Item {
text:"TreeView" text:"TreeView"
fontStyle: FluText.TitleLarge fontStyle: FluText.TitleLarge
} }
ListModel {
id: tree_model
ListElement {
text: "Root"
expanded:true
items: [
ListElement {
text: "Node 1"
expanded:false
items: [
ListElement {
text: "Node 1.1"
expanded:true
items:[
ListElement{
text:"Node 1.1.1"
expanded:true
items:[
ListElement{
text:"Node 1.1.1.1"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.2"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.3"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.4"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.5"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.6"
expanded:false
items:[]
}
]
}
]
},
ListElement {
text: "Node 1.2"
expanded:false
items:[]
}
]
},
ListElement {
text: "Node 2"
expanded:false
items:[]
},
ListElement {
text: "Node 3"
expanded:true
items: [
ListElement {
text: "Node 3.1"
expanded:false
items:[]
},
ListElement {
text: "Node 3.2"
expanded:false
items:[]
},
ListElement {
text: "Node 3.3"
expanded:false
items:[]
},
ListElement {
text: "Node 3.4"
expanded:false
items:[]
},
ListElement {
text: "Node 3.5"
expanded:false
items:[]
},
ListElement {
text: "Node 3.6"
expanded:false
items:[]
},
ListElement {
text: "Node 3.7"
expanded:false
items:[]
},
ListElement {
text: "Node 3.8"
expanded:false
items:[]
},
ListElement {
text: "Node 3.9"
expanded:false
items:[]
},
ListElement {
text: "Node 3.10"
expanded:true
items:[
ListElement{
text:"Node 3.10.1"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.2"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.3"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.4"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.5"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.6"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.7"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.8"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.9"
expanded:false
items:[]
}
]
},
ListElement {
text: "Node 3.11"
expanded:false
items:[]
}
]
}
]
}
}
FluTreeView{ FluTreeView{
id:tree_view id:tree_view
width:100 width:240
anchors{ anchors{
top:title.bottom top:title.bottom
left:parent.left left:parent.left
bottom:parent.bottom bottom:parent.bottom
} }
Component.onCompleted: { model:tree_model
}
ColumnLayout{
anchors{
left: tree_view.right
right: parent.right
top: parent.top
}
FluButton{
text:"test"
onClicked: {
}
}
} }
} }
}

8
src/controls/FluTreeItem.qml
View File

@ -1,6 +1,8 @@
import QtQuick 2.15 import QtQuick 2.15
QtObject {
property string text; Item {
property list<FluTreeItem> items; property string name
property bool expanded: false
property list<FluTreeItem> children
} }

284
src/controls/FluTreeView.qml
View File

@ -1,52 +1,272 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Window 2.15 import QtQuick.Window 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0 import FluentUI 1.0
import QtGraphicalEffects 1.15 import QtGraphicalEffects 1.15
Rectangle { Rectangle {
id:root id:root
color:"#eeeeee" color: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
property alias model: list_root.model
ListModel { ListModel {
id:list_model id: tree_model
ListElement {
text: "Root"
expanded:true
items: [
ListElement {
text: "Node 1"
expanded:false
items: [
ListElement {
text: "Node 1.1"
expanded:true
items:[
ListElement{
text:"Node 1.1.1"
expanded:true
items:[
ListElement{
text:"Node 1.1.1.1"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.2"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.3"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.4"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.5"
expanded:false
items:[]
},
ListElement{
text:"Node 1.1.1.6"
expanded:false
items:[]
}
]
}
]
},
ListElement {
text: "Node 1.2"
expanded:false
items:[]
}
]
},
ListElement {
text: "Node 2"
expanded:false
items:[]
},
ListElement {
text: "Node 3"
expanded:true
items: [
ListElement {
text: "Node 3.1"
expanded:false
items:[]
},
ListElement {
text: "Node 3.2"
expanded:false
items:[]
},
ListElement {
text: "Node 3.3"
expanded:false
items:[]
},
ListElement {
text: "Node 3.4"
expanded:false
items:[]
},
ListElement {
text: "Node 3.5"
expanded:false
items:[]
},
ListElement {
text: "Node 3.6"
expanded:false
items:[]
},
ListElement {
text: "Node 3.7"
expanded:false
items:[]
},
ListElement {
text: "Node 3.8"
expanded:false
items:[]
},
ListElement {
text: "Node 3.9"
expanded:false
items:[]
},
ListElement {
text: "Node 3.10"
expanded:true
items:[
ListElement{
text:"Node 3.10.1"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.2"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.3"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.4"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.5"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.6"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.7"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.8"
expanded:false
items:[]
},
ListElement{
text:"Node 3.10.9"
expanded:false
items:[]
}
]
},
ListElement {
text: "Node 3.11"
expanded:false
items:[]
}
]
}
]
}
}
Component{
id:comp_delegate
ColumnLayout{
id:layout_column
spacing: 0
property var itemModel: model
property int level: mapToItem(list_root,0,0).x/0.001
width: list_root.width
Item{
Layout.preferredHeight: childrenRect.height
Layout.preferredWidth: childrenRect.width
Rectangle{
height: parent.height
width: list_root.width
anchors.margins: 2
radius: 4
color:{
if(FluTheme.isDark){
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered)?Qt.rgba(62/255,62/255,62/255,1):Qt.rgba(50/255,50/255,50/255,1)
}else{
return (item_layout_mouse.containsMouse || item_layout_expanded.hovered)?Qt.rgba(244/255,244/255,244/255,1):Qt.rgba(253/255,253/255,253/255,1)
}
}
MouseArea{
id:item_layout_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.debug("---------")
}
}
}
RowLayout{
spacing: 0
Item{
width: 15*level
Layout.alignment: Qt.AlignVCenter
}
FluIconButton{
id:item_layout_expanded
color:"#00000000"
icon:model.expanded?FluentIcons.FA_angle_down:FluentIcons.FA_angle_right
onClicked: {
model.expanded = !model.expanded
}
}
FluText{
text:model.text
Layout.alignment: Qt.AlignVCenter
}
}
}
Item{
Layout.preferredWidth: layout_column.width
Layout.preferredHeight:childrenRect.height
visible: model.expanded
ListView{
x:0.001
width: parent.width
height: childrenRect.height
model:itemModel.items
delegate:comp_delegate
boundsBehavior: ListView.StopAtBounds
}
}
}
} }
ListView{ ListView{
id:list_root id:list_root
anchors.fill: parent anchors.fill: parent
delegate:comp_delegate
delegate: Rectangle{
width: list_root.width
height: 40
FluText{
anchors.centerIn: parent
text:model.text
}
}
model:list_model
clip: true clip: true
} }
function addItems(items:list<FluTreeItem>){
items.map(item=>{
list_model.append({"text":item.text})
console.debug(item.text)
})
}
function createItem(text){
var com = Qt.createComponent("FluTreeItem.qml")
return com.createObject(root,{text:text})
}
Component.onCompleted: {
addItems([createItem("item1"),createItem("item2")])
// var data=[{"text":"item1"},{"text":"item1"}]
// list_model.append(data)
}
} }