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

200
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)
ListModel{ property alias model: list_root.model
id:list_model
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:[]
}
]
}
]
}
} }
ListView {
id: list_root
anchors.fill: parent
delegate: Rectangle{
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 width: list_root.width
height: 40 Item{
FluText{ Layout.preferredHeight: childrenRect.height
anchors.centerIn: parent Layout.preferredWidth: childrenRect.width
text:model.text
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
}
}
} }
model:list_model }
ListView{
id:list_root
anchors.fill: parent
delegate:comp_delegate
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)
}
} }