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"
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{
id:tree_view
width:100
width:240
anchors{
top:title.bottom
left:parent.left
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
QtObject {
property string text;
property list<FluTreeItem> items;
Item {
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.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import QtGraphicalEffects 1.15
Rectangle {
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 {
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{
id:list_root
anchors.fill: parent
delegate: Rectangle{
width: list_root.width
height: 40
FluText{
anchors.centerIn: parent
text:model.text
}
}
model:list_model
delegate:comp_delegate
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)
}
}