From 73bf9576d4f9eeac295cc77551c528a941a4cbfb Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Tue, 7 Mar 2023 18:43:03 +0800 Subject: [PATCH] update --- example/T_TreeView.qml | 200 +++++++++++++++++++++++- src/controls/FluTreeItem.qml | 8 +- src/controls/FluTreeView.qml | 284 +++++++++++++++++++++++++++++++---- 3 files changed, 452 insertions(+), 40 deletions(-) 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 items; + +Item { + property string name + property bool expanded: false + property list 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){ - 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) - } - - - }