update

example/qml-Qt6/page/T_TreeView.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluScrollablePage {
+FluContentPage {
 
     title:"TreeView"
 
@@ -28,105 +28,94 @@ FluScrollablePage {
         return dig();
     }
 
-    FluArea{
+    Column{
-        Layout.fillWidth: true
+        id:layout_column
-        Layout.topMargin: 10
+        spacing: 12
-        paddings: 10
+        width: 300
-        height: 80
+        anchors{
-        Column{
+            topMargin: 20
-            anchors.verticalCenter: parent.verticalCenter
+            top:parent.top
+            left: parent.left
+            leftMargin: 10
+            bottom:parent.bottom
+            bottomMargin: 20
+        }
+
+        FluText{
+            text:"共计%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
+        }
+
+        RowLayout{
             spacing: 10
             FluText{
-                text:"高性能树控件，新的TreeView用TableView实现！！"
+                text:"cellHeight:"
+                Layout.alignment: Qt.AlignVCenter
             }
+            FluSlider{
+                id:slider_cell_height
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        RowLayout{
+            spacing: 10
             FluText{
-                text:"共计：%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
+                text:"depthPadding:"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluSlider{
+                id:slider_depth_padding
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        FluToggleSwitch{
+            id:switch_showline
+            text:"showLine"
+            checked: true
+        }
+        FluToggleSwitch{
+            id:switch_draggable
+            text:"draggable"
+            checked: true
+        }
+        FluButton{
+            text:"all expand"
+            onClicked: {
+                tree_view.allExpand()
+            }
+        }
+        FluButton{
+            text:"all collapse"
+            onClicked: {
+                tree_view.allCollapse()
             }
         }
     }
     FluArea{
-        Layout.fillWidth: true
+        anchors{
-        Layout.topMargin: 10
+            left: layout_column.right
-        paddings: 10
+            top: parent.top
-        height: 420
+            bottom: parent.bottom
-        Item{
+            right: parent.right
-            anchors.fill: tree_view
+            rightMargin: 5
-            FluShadow{}
+            topMargin: 5
+            bottomMargin: 5
         }
+        FluShadow{}
         FluTreeView{
             id:tree_view
-            width:slider_width.value
+            anchors.fill: parent
-            anchors{
+            cellHeight: slider_cell_height.value
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
-            }
             draggable:switch_draggable.checked
             showLine: switch_showline.checked
+            depthPadding: slider_depth_padding.value
             Component.onCompleted: {
                 var data = treeData()
                 dataSource = data
             }
         }
-        Column{
-            spacing: 15
-            anchors{
-                top:parent.top
-                topMargin: 10
-                bottomMargin: 10
-                rightMargin: 10
-                bottom:parent.bottom
-                right: parent.right
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"width:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_width
-                    value: 280
-                    from: 160
-                    to:400
-                }
-            }
-            FluToggleSwitch{
-                id:switch_showline
-                text:"showLine"
-                checked: true
-            }
-            FluToggleSwitch{
-                id:switch_draggable
-                text:"draggable"
-                checked: true
-            }
-            FluButton{
-                text:"all expand"
-                onClicked: {
-                    tree_view.allExpand()
-                }
-            }
-            FluButton{
-                text:"all collapse"
-                onClicked: {
-                    tree_view.allCollapse()
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var data = treeData()
-        dataSource = data
-    }
-}
-'
     }
 }

example/qml-Qt6/window/MainWindow.qml

@@ -183,7 +183,7 @@ CustomWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter

example/qml/page/T_TreeView.qml

@@ -6,7 +6,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-FluScrollablePage {
+FluContentPage {
 
     title:"TreeView"
 
@@ -29,105 +29,94 @@ FluScrollablePage {
         return dig();
     }
 
-    FluArea{
+    Column{
-        Layout.fillWidth: true
+        id:layout_column
-        Layout.topMargin: 10
+        spacing: 12
-        paddings: 10
+        width: 300
-        height: 80
+        anchors{
-        Column{
+            topMargin: 20
-            anchors.verticalCenter: parent.verticalCenter
+            top:parent.top
+            left: parent.left
+            leftMargin: 10
+            bottom:parent.bottom
+            bottomMargin: 20
+        }
+
+        FluText{
+            text:"共计%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
+        }
+
+        RowLayout{
             spacing: 10
             FluText{
-                text:"高性能树控件，新的TreeView用TableView实现！！"
+                text:"cellHeight:"
+                Layout.alignment: Qt.AlignVCenter
             }
+            FluSlider{
+                id:slider_cell_height
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        RowLayout{
+            spacing: 10
             FluText{
-                text:"共计：%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
+                text:"depthPadding:"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluSlider{
+                id:slider_depth_padding
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        FluToggleSwitch{
+            id:switch_showline
+            text:"showLine"
+            checked: true
+        }
+        FluToggleSwitch{
+            id:switch_draggable
+            text:"draggable"
+            checked: true
+        }
+        FluButton{
+            text:"all expand"
+            onClicked: {
+                tree_view.allExpand()
+            }
+        }
+        FluButton{
+            text:"all collapse"
+            onClicked: {
+                tree_view.allCollapse()
             }
         }
     }
     FluArea{
-        Layout.fillWidth: true
+        anchors{
-        Layout.topMargin: 10
+            left: layout_column.right
-        paddings: 10
+            top: parent.top
-        height: 420
+            bottom: parent.bottom
-        Item{
+            right: parent.right
-            anchors.fill: tree_view
+            rightMargin: 5
-            FluShadow{}
+            topMargin: 5
+            bottomMargin: 5
         }
+        FluShadow{}
         FluTreeView{
             id:tree_view
-            width:slider_width.value
+            anchors.fill: parent
-            anchors{
+            cellHeight: slider_cell_height.value
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
-            }
             draggable:switch_draggable.checked
             showLine: switch_showline.checked
+            depthPadding: slider_depth_padding.value
             Component.onCompleted: {
                 var data = treeData()
                 dataSource = data
             }
         }
-        Column{
-            spacing: 15
-            anchors{
-                top:parent.top
-                topMargin: 10
-                bottomMargin: 10
-                rightMargin: 10
-                bottom:parent.bottom
-                right: parent.right
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"width:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_width
-                    value: 280
-                    from: 160
-                    to:400
-                }
-            }
-            FluToggleSwitch{
-                id:switch_showline
-                text:"showLine"
-                checked: true
-            }
-            FluToggleSwitch{
-                id:switch_draggable
-                text:"draggable"
-                checked: true
-            }
-            FluButton{
-                text:"all expand"
-                onClicked: {
-                    tree_view.allExpand()
-                }
-            }
-            FluButton{
-                text:"all collapse"
-                onClicked: {
-                    tree_view.allCollapse()
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var data = treeData()
-        dataSource = data
-    }
-}
-'
     }
 }

example/qml/window/MainWindow.qml

@@ -186,7 +186,7 @@ CustomWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter

src/FluHttp.cpp

@@ -119,7 +119,8 @@ void FluHttp::post(HttpRequest* r,HttpCallable* c){
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
-            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            QNetworkReply::NetworkError error = reply->error();
+            bool isSuccess = error == QNetworkReply::NoError;
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
@@ -134,6 +135,9 @@ void FluHttp::post(HttpRequest* r,HttpCallable* c){
                     onError(callable,status,errorString,result);
                 }
             }
+            if(error == QNetworkReply::OperationCanceledError){
+                break;
+            }
         }
         onFinish(callable,request);
     });
@@ -174,7 +178,8 @@ void FluHttp::postString(HttpRequest* r,HttpCallable* c){
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
-            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            QNetworkReply::NetworkError error = reply->error();
+            bool isSuccess = error == QNetworkReply::NoError;
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
@@ -189,6 +194,9 @@ void FluHttp::postString(HttpRequest* r,HttpCallable* c){
                     onError(callable,status,errorString,result);
                 }
             }
+            if(error == QNetworkReply::OperationCanceledError){
+                break;
+            }
         }
         onFinish(callable,request);
     });
@@ -228,7 +236,8 @@ void FluHttp::postJson(HttpRequest* r,HttpCallable* c){
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
-            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            QNetworkReply::NetworkError error = reply->error();
+            bool isSuccess = error == QNetworkReply::NoError;
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
@@ -243,6 +252,9 @@ void FluHttp::postJson(HttpRequest* r,HttpCallable* c){
                     onError(callable,status,errorString,result);
                 }
             }
+            if(error == QNetworkReply::OperationCanceledError){
+                break;
+            }
         }
         onFinish(callable,request);
     });
@@ -273,14 +285,15 @@ void FluHttp::get(HttpRequest* r,HttpCallable* c){
             QNetworkRequest req(url);
             addHeaders(&req,data["headers"].toMap());
             QEventLoop loop;
-            QNetworkReply* reply = manager.get(req);
+            auto reply = QPointer(manager.get(req));
             _cacheReply.append(reply);
             connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
             connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
             loop.exec();
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
-            bool isSuccess = reply->error() == QNetworkReply::NoError;
+            QNetworkReply::NetworkError error = reply->error();
+            bool isSuccess = error == QNetworkReply::NoError;
             QString result = QString::fromUtf8(reply->readAll());
             if (isSuccess) {
                 handleCache(httpId,result);
@@ -296,6 +309,9 @@ void FluHttp::get(HttpRequest* r,HttpCallable* c){
             }
             reply->deleteLater();
             reply = nullptr;
+            if(error == QNetworkReply::OperationCanceledError){
+                break;
+            }
         }
         onFinish(callable,request);
     });

src/FluTreeModel.cpp

@@ -2,15 +2,10 @@
 
 #include <QMetaEnum>
 
-Node::Node(QObject *parent)
+Node::Node(QObject *parent): QObject{parent}{
-    : QObject{parent}
-{
-
 }
 
-FluTreeModel::FluTreeModel(QObject *parent)
+FluTreeModel::FluTreeModel(QObject *parent): QAbstractItemModel{parent}{
-    : QAbstractItemModel{parent}
-{
     dataSourceSize(0);
 }
 
@@ -209,7 +204,6 @@ void FluTreeModel::dragAnddrop(int dragIndex,int dropIndex,bool isDropTopArea){
     }
     _rows.move(dragIndex,targetIndex);
     endMoveRows();
-
     Q_EMIT layoutAboutToBeChanged();
     if(dragItem->_parent == dropItem->_parent){
         QList<Node*>* children = &(dragItem->_parent->_children);
@@ -256,7 +250,6 @@ void FluTreeModel::dragAnddrop(int dragIndex,int dropIndex,bool isDropTopArea){
             }
         }
         srcChildren->removeAt(srcIndex);
-
         if(dropIndex > dragIndex){
             if(isDropTopArea){
                 targetIndex = destIndex;
@@ -270,26 +263,18 @@ void FluTreeModel::dragAnddrop(int dragIndex,int dropIndex,bool isDropTopArea){
                 targetIndex = destIndex + 1;
             }
         }
-
         destChildren->insert(targetIndex,dragItem);
-
-        foreach (auto item,*destChildren) {
-            qDebug()<<item->title();
-        }
-
     }
-
     changePersistentIndex(index(qMin(dragIndex,dropIndex),0),index(qMax(dragIndex,dropIndex),0));
-
     Q_EMIT layoutChanged(QList<QPersistentModelIndex>(),QAbstractItemModel::VerticalSortHint);
 
 }
 
 bool FluTreeModel::hitHasChildrenExpanded(int row){
-    //    auto itemData = _rows.at(row);
+    auto itemData = _rows.at(row);
-    //    if(itemData->hasChildren() && itemData->_isExpanded){
+    if(itemData->hasChildren() && itemData->_isExpanded){
-    //        return true;
+        return true;
-    //    }
+    }
     return false;
 }
 

src/Qt5/imports/FluentUI/Controls/FluTreeView.qml

@@ -10,6 +10,8 @@ Item {
     property var dataSource
     property bool showLine: true
     property bool draggable: false
+    property int cellHeight: 30
+    property int depthPadding: 30
     property color lineColor: FluTheme.dark ? Qt.rgba(111/255,111/255,111/255,1) : Qt.rgba(217/255,217/255,217/255,1)
     id:control
     QtObject {
@@ -112,13 +114,13 @@ Item {
             property bool isCurrent: d.current === itemModel
             id:item_container
             width: {
-                var w = 46 + item_layout_text.width + 30*itemModel.depth
+                var w = 46 + item_loader_cell.width + control.depthPadding*itemModel.depth
                 if(control.width>w){
                     return control.width
                 }
                 return w
             }
-            height: 30
+            height: control.cellHeight
             implicitWidth: width
             implicitHeight: height
             function toggle(){
@@ -194,13 +196,13 @@ Item {
                         var pos = FluTools.cursorPos()
                         var viewPos = table_view.mapToGlobal(0,0)
                         var y = table_view.contentY + pos.y-viewPos.y
-                        var index = Math.floor(y/30)
+                        var index = Math.floor(y/control.cellHeight)
-                        if(tree_model.hitHasChildrenExpanded(index) && y>index*30+15){
+                        if(tree_model.hitHasChildrenExpanded(index) && y>index*control.cellHeight+control.cellHeight/2){
                             d.dropIndex = index + 1
                             d.isDropTopArea = true
                         }else{
                             d.dropIndex = index
-                            if(y>index*30+15){
+                            if(y>index*control.cellHeight+control.cellHeight/2){
                                 d.isDropTopArea = false
                             }else{
                                 d.isDropTopArea = true
@@ -229,14 +231,8 @@ Item {
             Rectangle{
                 id:item_line_drop_tip
                 anchors{
-                    left: parent.left
+                    left: layout_row.left
-                    leftMargin: {
+                    leftMargin: 26
-                        var count = itemModel.depth+1
-                        if(itemModel.hasChildren()){
-                            return 30*count - 8
-                        }
-                        return 30*count + 18
-                    }
                     right: parent.right
                     rightMargin: 10
                     bottom: parent.bottom
@@ -283,18 +279,18 @@ Item {
                 height: itemModel.hideLineFooter() ? parent.height/2 : parent.height
                 anchors{
                     top: parent.top
-                    right: layout_row.left
+                    left: item_line_h.left
-                    rightMargin: -9
                 }
             }
             FluRectangle{
+                id:item_line_h
                 height: 1
                 color: control.lineColor
                 visible: control.showLine && isItemLoader  && itemModel.depth !== 0 && !itemModel.hasChildren()
-                width: 18
+                width: depthPadding - 10
                 anchors{
                     right: layout_row.left
-                    rightMargin: -27
+                    rightMargin: -24
                     verticalCenter: parent.verticalCenter
                 }
             }
@@ -309,7 +305,7 @@ Item {
                         top:parent.top
                         bottom: parent.bottom
                         left: parent.left
-                        leftMargin: 30*(index+2) - 8
+                        leftMargin: control.depthPadding*(index+1) + 24
                     }
                 }
             }
@@ -342,9 +338,10 @@ Item {
             }
             RowLayout{
                 id:layout_row
+                height: parent.height
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
-                anchors.leftMargin: 14 + 30*itemModel.depth
+                anchors.leftMargin: 14 + control.depthPadding*itemModel.depth
                 Component{
                     id:com_icon_btn
                     FluIconButton{
@@ -364,23 +361,38 @@ Item {
                     Layout.preferredWidth: 20
                     Layout.preferredHeight: 20
                     sourceComponent: itemModel.hasChildren() ? com_icon_btn : undefined
-                }
-                Item{
-                    id:item_layout_text
-                    Layout.preferredWidth: item_text.implicitWidth+14
-                    Layout.preferredHeight:item_text.implicitHeight+14
                     Layout.alignment: Qt.AlignVCenter
-                    FluText {
+                }
-                        id:item_text
+                Loader{
-                        text: itemModel.title
+                    property var modelData: itemModel
-                        anchors.centerIn: parent
+                    property var itemMouse: item_mouse
-                        color:{
+                    id:item_loader_cell
-                            if(item_mouse.pressed){
+                    Layout.preferredWidth: {
-                                return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                        if(item){
-                            }
+                            return item.width
-                            return FluTheme.dark ? FluColors.White : FluColors.Grey220
                         }
+                        return 0
                     }
+                    Layout.fillHeight: true
+                    sourceComponent:com_item_text
+                }
+            }
+        }
+    }
+    Component{
+        id:com_item_text
+        Item{
+            width: item_text.width
+            FluText {
+                id:item_text
+                text: modelData.title
+                rightPadding: 14
+                anchors.centerIn: parent
+                color:{
+                    if(itemMouse.pressed){
+                        return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                    }
+                    return FluTheme.dark ? FluColors.White : FluColors.Grey220
                 }
             }
         }
@@ -403,5 +415,4 @@ Item {
     function allCollapse(){
         tree_model.allCollapse()
     }
-
 }

src/Qt6/imports/FluentUI/Controls/FluTreeView.qml

@@ -10,6 +10,8 @@ Item {
     property var dataSource
     property bool showLine: true
     property bool draggable: false
+    property int cellHeight: 30
+    property int depthPadding: 30
     property color lineColor: FluTheme.dark ? Qt.rgba(111/255,111/255,111/255,1) : Qt.rgba(217/255,217/255,217/255,1)
     id:control
     QtObject {
@@ -112,13 +114,13 @@ Item {
             property bool isCurrent: d.current === itemModel
             id:item_container
             width: {
-                var w = 46 + item_layout_text.width + 30*itemModel.depth
+                var w = 46 + item_loader_cell.width + control.depthPadding*itemModel.depth
                 if(control.width>w){
                     return control.width
                 }
                 return w
             }
-            height: 30
+            height: control.cellHeight
             implicitWidth: width
             implicitHeight: height
             function toggle(){
@@ -194,13 +196,13 @@ Item {
                         var pos = FluTools.cursorPos()
                         var viewPos = table_view.mapToGlobal(0,0)
                         var y = table_view.contentY + pos.y-viewPos.y
-                        var index = Math.floor(y/30)
+                        var index = Math.floor(y/control.cellHeight)
-                        if(tree_model.hitHasChildrenExpanded(index) && y>index*30+15){
+                        if(tree_model.hitHasChildrenExpanded(index) && y>index*control.cellHeight+control.cellHeight/2){
                             d.dropIndex = index + 1
                             d.isDropTopArea = true
                         }else{
                             d.dropIndex = index
-                            if(y>index*30+15){
+                            if(y>index*control.cellHeight+control.cellHeight/2){
                                 d.isDropTopArea = false
                             }else{
                                 d.isDropTopArea = true
@@ -229,14 +231,8 @@ Item {
             Rectangle{
                 id:item_line_drop_tip
                 anchors{
-                    left: parent.left
+                    left: layout_row.left
-                    leftMargin: {
+                    leftMargin: 26
-                        var count = itemModel.depth+1
-                        if(itemModel.hasChildren()){
-                            return 30*count - 8
-                        }
-                        return 30*count + 18
-                    }
                     right: parent.right
                     rightMargin: 10
                     bottom: parent.bottom
@@ -283,18 +279,18 @@ Item {
                 height: itemModel.hideLineFooter() ? parent.height/2 : parent.height
                 anchors{
                     top: parent.top
-                    right: layout_row.left
+                    left: item_line_h.left
-                    rightMargin: -9
                 }
             }
             FluRectangle{
+                id:item_line_h
                 height: 1
                 color: control.lineColor
                 visible: control.showLine && isItemLoader  && itemModel.depth !== 0 && !itemModel.hasChildren()
-                width: 18
+                width: depthPadding - 10
                 anchors{
                     right: layout_row.left
-                    rightMargin: -27
+                    rightMargin: -24
                     verticalCenter: parent.verticalCenter
                 }
             }
@@ -309,7 +305,7 @@ Item {
                         top:parent.top
                         bottom: parent.bottom
                         left: parent.left
-                        leftMargin: 30*(index+2) - 8
+                        leftMargin: control.depthPadding*(index+1) + 24
                     }
                 }
             }
@@ -342,9 +338,10 @@ Item {
             }
             RowLayout{
                 id:layout_row
+                height: parent.height
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
-                anchors.leftMargin: 14 + 30*itemModel.depth
+                anchors.leftMargin: 14 + control.depthPadding*itemModel.depth
                 Component{
                     id:com_icon_btn
                     FluIconButton{
@@ -364,23 +361,38 @@ Item {
                     Layout.preferredWidth: 20
                     Layout.preferredHeight: 20
                     sourceComponent: itemModel.hasChildren() ? com_icon_btn : undefined
-                }
-                Item{
-                    id:item_layout_text
-                    Layout.preferredWidth: item_text.implicitWidth+14
-                    Layout.preferredHeight:item_text.implicitHeight+14
                     Layout.alignment: Qt.AlignVCenter
-                    FluText {
+                }
-                        id:item_text
+                Loader{
-                        text: itemModel.title
+                    property var modelData: itemModel
-                        anchors.centerIn: parent
+                    property var itemMouse: item_mouse
-                        color:{
+                    id:item_loader_cell
-                            if(item_mouse.pressed){
+                    Layout.preferredWidth: {
-                                return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                        if(item){
-                            }
+                            return item.width
-                            return FluTheme.dark ? FluColors.White : FluColors.Grey220
                         }
+                        return 0
                     }
+                    Layout.fillHeight: true
+                    sourceComponent:com_item_text
+                }
+            }
+        }
+    }
+    Component{
+        id:com_item_text
+        Item{
+            width: item_text.width
+            FluText {
+                id:item_text
+                text: modelData.title
+                rightPadding: 14
+                anchors.centerIn: parent
+                color:{
+                    if(itemMouse.pressed){
+                        return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                    }
+                    return FluTheme.dark ? FluColors.White : FluColors.Grey220
                 }
             }
         }
@@ -403,5 +415,4 @@ Item {
     function allCollapse(){
         tree_model.allCollapse()
     }
-
 }