diff --git a/example/T_TreeView.qml b/example/T_TreeView.qml
index 72bae9f1..db7ff276 100644
--- a/example/T_TreeView.qml
+++ b/example/T_TreeView.qml
@@ -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: {
+            }
+        }
+    }
+
 }
diff --git a/src/controls/FluTreeItem.qml b/src/controls/FluTreeItem.qml
index cc3b9859..34afaa6e 100644
--- a/src/controls/FluTreeItem.qml
+++ b/src/controls/FluTreeItem.qml
@@ -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
 }
diff --git a/src/controls/FluTreeView.qml b/src/controls/FluTreeView.qml
index c8ab3fe8..a9c4764f 100644
--- a/src/controls/FluTreeView.qml
+++ b/src/controls/FluTreeView.qml
@@ -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)
 
-    ListModel{
-        id:list_model
+    property alias model: list_root.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
-            height: 40
-            FluText{
-                anchors.centerIn: parent
-                text:model.text
+            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
+                }
+            }
+
         }
-        model:list_model
+    }
+
+    ListView{
+        id:list_root
+        anchors.fill: parent
+        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)
-    }
-
-
-
 }