From 8412d1fa04ceddea5a16d3ae6892a827c8eac291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Tue, 7 Mar 2023 23:27:32 +0800 Subject: [PATCH] update --- example/T_TreeView.qml | 280 +++++++++---------------- src/controls/FluCheckBox.qml | 5 + src/controls/FluTreeView.qml | 388 +++++++++++++++++------------------ 3 files changed, 293 insertions(+), 380 deletions(-) diff --git a/example/T_TreeView.qml b/example/T_TreeView.qml index db7ff27..5ec7ec7 100644 --- a/example/T_TreeView.qml +++ b/example/T_TreeView.qml @@ -12,181 +12,44 @@ Item { 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:[] - } - ] - } - ] - } + function randomName() { + var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"] + return names[Math.floor(Math.random() * names.length)] } + function randomCompany() { + var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"] + return companies[Math.floor(Math.random() * companies.length)] + } + + function randomDepartment() { + var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"] + return departments[Math.floor(Math.random() * departments.length)] + } + + function createEmployee() { + var name = randomName() + return tree_view.createItem(name, false) + } + + function createSubtree(numEmployees) { + var employees = [] + for (var i = 0; i < numEmployees; i++) { + employees.push(createEmployee()) + } + return tree_view.createItem(randomDepartment(), true, employees) + } + + function createOrg(numLevels, numSubtrees, numEmployees) { + if (numLevels === 0) { + return [] + } + var subtrees = [] + for (var i = 0; i < numSubtrees; i++) { + subtrees.push(createSubtree(numEmployees)) + } + return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees)) + } FluTreeView{ @@ -197,7 +60,17 @@ Item { left:parent.left bottom:parent.bottom } - model:tree_model + onItemClicked: + (model)=>{ + showSuccess(model.text) + } + + Component.onCompleted: { + var org = createOrg(10, 3, 5) + updateData(org) + + } + } @@ -207,11 +80,62 @@ Item { right: parent.right top: parent.top } - FluButton{ - text:"test" - onClicked: { + + FluText{ + text:{ + if(tree_view.selectionMode === FluTreeView.None){ + return "FluTreeView.None" + } + if(tree_view.selectionMode === FluTreeView.Single){ + return "FluTreeView.Single" + } + if(tree_view.selectionMode === FluTreeView.Multiple){ + return "FluTreeView.Multiple" + } } } - } + FluButton{ + text:"None" + onClicked: { + tree_view.selectionMode = FluTreeView.None + } + } + + FluButton{ + text:"Single" + onClicked: { + tree_view.selectionMode = FluTreeView.Single + } + } + + FluButton{ + text:"Multiple" + onClicked: { + tree_view.selectionMode = FluTreeView.Multiple + } + } + + FluFilledButton{ + text:"获取选中的数据" + onClicked: { + if(tree_view.selectionMode === FluTreeView.None){ + showError("当前非选择模式,没有选中的数据") + } + if(tree_view.selectionMode === FluTreeView.Single){ + showSuccess(tree_view.signleData().text) + } + if(tree_view.selectionMode === FluTreeView.Multiple){ + if(tree_view.multipData().length===0){ + showError("没有选中数据") + return + } + var info = [] + tree_view.multipData().map((value)=>info.push(value.text)) + showSuccess(info.join(",")) + } + } + } + + } } diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml index 9712b19..62d0f7b 100644 --- a/src/controls/FluCheckBox.qml +++ b/src/controls/FluCheckBox.qml @@ -7,6 +7,7 @@ Item { id:root property bool checked: false property string text: "Check Box" + property var checkClicked width: childrenRect.width height: childrenRect.height @@ -78,6 +79,10 @@ Item { anchors.fill: parent hoverEnabled: true onClicked: { + if(checkClicked){ + checkClicked() + return + } checked = !checked } } diff --git a/src/controls/FluTreeView.qml b/src/controls/FluTreeView.qml index a9c4764..5043e22 100644 --- a/src/controls/FluTreeView.qml +++ b/src/controls/FluTreeView.qml @@ -9,263 +9,247 @@ Rectangle { id:root 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 + enum TreeViewSelectionMode { + None, + Single, + Multiple + } - ListModel { - id: tree_model - ListElement { - text: "Root" + property int selectionMode: FluTreeView.None + + property var currentElement + property var currentParentElement + + property var multipElement: [] + + property var rootModel: tree_model.get(0).items + + signal itemClicked(var item) + + ListModel{ + id:tree_model + ListElement{ + text: "根节点" 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:[] - } - ] - } - ] + items:[] } } - + Component{ + id: delegate_root + Column{ + width: calculateWidth() + property var itemModel: model + Repeater{ + id: repeater_first_level + model: items + delegate: delegate_items + } + function calculateWidth(){ + var w = 0; + for(var i = 0; i < repeater_first_level.count; i++) { + var child = repeater_first_level.itemAt(i) + if(w < child.width_hint){ + w = child.width_hint; + } + } + return w; + } + } + } Component{ - id:comp_delegate + id:delegate_items - ColumnLayout{ - id:layout_column - spacing: 0 + Column{ + id:item_layout + + property real level: (mapToItem(list_root,0,0).x+list_root.contentX)/0.001 + property var text: model.text??"Item" + property bool isItems : (model.items !== undefined) && (model.items.count !== 0) + property var items: model.items??[] + property var expanded: model.expanded??true + property int width_hint: calculateWidth() + property bool singleSelected: currentElement === model property var itemModel: model - property int level: mapToItem(list_root,0,0).x/0.001 - width: list_root.width + + function calculateWidth(){ + var w = Math.max(list_root.width, item_layout_row.implicitWidth + 10); + if(expanded){ + for(var i = 0; i < repeater_items.count; i++) { + var child = repeater_items.itemAt(i) + if(w < child.width_hint){ + w = child.width_hint; + } + } + } + return w; + } Item{ - Layout.preferredHeight: childrenRect.height - Layout.preferredWidth: childrenRect.width + id:item_layout_rect + width: list_root.contentWidth + height: item_layout_row.implicitHeight + Rectangle{ - height: parent.height - width: list_root.width + anchors.fill: parent anchors.margins: 2 - radius: 4 color:{ if(FluTheme.isDark){ + if(item_layout.singleSelected && selectionMode === FluTreeView.Single){ + return Qt.rgba(62/255,62/255,62/255,1) + } 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{ + if(item_layout.singleSelected && selectionMode === FluTreeView.Single){ + return Qt.rgba(244/255,244/255,244/255,1) + } 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) } } + Rectangle{ + width: 3 + color:FluTheme.primaryColor.dark + visible: item_layout.singleSelected && (selectionMode === FluTreeView.Single) + radius: 3 + height: 20 + anchors{ + left: parent.left + verticalCenter: parent.verticalCenter + } + } + MouseArea{ id:item_layout_mouse anchors.fill: parent hoverEnabled: true onClicked: { - console.debug("---------") + item_layout_rect.onClickItem() } } } + + function onClickItem(){ + if(selectionMode === FluTreeView.None){ + itemClicked(model) + } + if(selectionMode === FluTreeView.Single){ + currentElement = model + if(item_layout.parent.parent.parent.itemModel){ + currentParentElement = item_layout.parent.parent.parent.itemModel + }else{ + if(item_layout.parent.itemModel){ + currentParentElement = item_layout.parent.itemModel + } + } + } + if(selectionMode === FluTreeView.Multiple){ + + } + } + RowLayout{ - spacing: 0 + id:item_layout_row + anchors.verticalCenter: item_layout_rect.verticalCenter + Item{ width: 15*level Layout.alignment: Qt.AlignVCenter } + + FluCheckBox{ + text:"" + checked: multipElement.includes(itemModel) + visible: selectionMode === FluTreeView.Multiple + checkClicked:function(){ + if(checked){ + multipElement = multipElement.filter((value) => value !== itemModel) + }else{ + multipElement = [...multipElement,itemModel] + } + } + } + FluIconButton{ id:item_layout_expanded color:"#00000000" - icon:model.expanded?FluentIcons.FA_angle_down:FluentIcons.FA_angle_right + icon:item_layout.expanded?FluentIcons.FA_angle_down:FluentIcons.FA_angle_right + opacity: item_layout.isItems onClicked: { + if(!item_layout.isItems){ + item_layout_rect.onClickItem() + return + } model.expanded = !model.expanded } } - FluText{ - text:model.text + + FluText { + text: item_layout.text Layout.alignment: Qt.AlignVCenter + topPadding: 10 + bottomPadding: 10 } } } + 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 + id:item_sub + visible: { + if(!isItems){ + return false + } + return item_layout.expanded??false } + + width: item_sub_layout.implicitWidth + height: item_sub_layout.implicitHeight + x:0.001 + Column{ + id: item_sub_layout + Repeater{ + id:repeater_items + model: item_layout.items + delegate: delegate_items + } + } + } } } - ListView{ - id:list_root + ListView { + id: list_root anchors.fill: parent - delegate:comp_delegate + delegate: delegate_root + boundsBehavior: ListView.StopAtBounds + contentWidth: contentItem.childrenRect.width + model: tree_model + flickableDirection: Flickable.HorizontalAndVerticalFlick clip: true + ScrollBar.vertical: ScrollBar { } + ScrollBar.horizontal: ScrollBar { } + } + + + function updateData(items){ + rootModel.clear() + rootModel.append(items) + } + + function signleData(){ + return currentElement + } + + function multipData(){ + return multipElement + } + + function createItem(text="Title",expanded=true,items=[]){ + return {text:text,expanded:expanded,items:items}; }