mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 03:10:10 +08:00
update
This commit is contained in:
zhuzihcu
parent
5f1eb364f8
commit
73bf9576d4
@ -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: {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user