From a54a99bbe13e9cbe0a2d7d87a760e46260e1734a Mon Sep 17 00:00:00 2001 From: FeJQ Date: Fri, 18 Aug 2023 18:18:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1.=E5=A2=9E=E5=8A=A0FluEditableText=202.Nav?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=88=87=E6=8D=A2=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=8A=9F=E8=83=BD=203.example=E7=9A=84=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=A2=9E=E5=8A=A0=E5=8F=B3=E9=94=AE=E9=87=8D?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E6=BC=94=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/qml/global/ItemsOriginal.qml | 43 +++++++++++ .../FluentUI/Controls/FluNavigationView.qml | 76 ++++++++++++++++++- src/imports/FluentUI/Controls/FluPaneItem.qml | 3 + .../FluentUI/Controls/FluPaneItemExpander.qml | 3 + 4 files changed, 123 insertions(+), 2 deletions(-) diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml index e6af8a6f..a9dd2085 100644 --- a/example/qml/global/ItemsOriginal.qml +++ b/example/qml/global/ItemsOriginal.qml @@ -7,6 +7,12 @@ FluObject{ property var navigationView + function rename(item, newName){ + if(newName && newName.trim().length>0){ + item.title = newName; + } + } + FluPaneItem{ id:item_home count: 9 @@ -21,11 +27,48 @@ FluObject{ } navigationView.push("qrc:/example/qml/page/T_Home.qml") } + rightMenu: FluMenu{ + property string renameText : "重命名" + id:nav_item_right_menu + enableAnimation: false + width: 120 + + FluMenuItem{ + text: nav_item_right_menu.renameText + visible: true + onClicked: { + item_home.editable = true; + + } + } + } + onTitleEdited:function(newText){ + rename(item_home,newText) + } } FluPaneItemExpander{ + id:item_expander_basic_input title:lang.basic_input icon:FluentIcons.CheckboxComposite + + rightMenu: FluMenu{ + property string renameText : "重命名" + id:nav_item_expander_right_menu + enableAnimation: false + width: 120 + + FluMenuItem{ + text: nav_item_expander_right_menu.renameText + visible: true + onClicked: { + item_expander_basic_input.editable = true; + + } + } + } + onTitleEdited:function(newText){ rename(item_expander_basic_input,newText)} + FluPaneItem{ id:item_buttons count: 99 diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 8e94c068..91b9f337 100644 --- a/src/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/imports/FluentUI/Controls/FluNavigationView.qml @@ -16,6 +16,8 @@ Item { property int topPadding: 0 property int navWidth: 300 property int pageMode: FluNavigationViewType.Stack + property FluMenu navItemRightMenu + property FluMenu navItemExpanderRightMenu signal logoClicked id:control QtObject{ @@ -163,6 +165,29 @@ Item { leftMargin: 6 rightMargin: 6 } + + Loader{ + id:navItemRightMenuLoader + //anchors.centerIn: parent + sourceComponent: model.rightMenu + } + + MouseArea{ + anchors.fill: parent + acceptedButtons: Qt.RightButton + onClicked: function(mouse){ + if (mouse.button === Qt.RightButton) { + if(model.rightMenu){ + var rightMenuComponent = model.rightMenu.createObject(navItemRightMenuLoader); // navItemRightMenuLoader 是你要将菜单附加到的父级项 + if (rightMenuComponent !== null) { + rightMenuComponent.popup(); + } + } + } + } + z:-100 + } + onClicked: { if(d.isCompactAndNotPanel){ control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children) @@ -291,9 +316,10 @@ Item { } } } - FluText{ + FluEditableText{ id:item_title text:model.title + editable: model.editable visible: { if(d.isCompactAndNotPanel){ return false @@ -312,6 +338,17 @@ Item { } return FluTheme.dark ? FluColors.White : FluColors.Grey220 } + onFluTextEdited:function(newText) { + if(model.onTitleEdited) + model.onTitleEdited(newText) + } + onFluLostFocus:function(isActiveFocus){ + if(!isActiveFocus){ + model.editable = false + if(model.onTitleEdited) + model.onTitleEdited(item_title.text) + } + } } } } @@ -352,6 +389,28 @@ Item { leftMargin: 6 rightMargin: 6 } + + Loader{ + id:loader_auto_suggest_boxsssssdd + sourceComponent: model.rightMenu + } + + MouseArea{ + anchors.fill: parent + acceptedButtons: Qt.RightButton + onClicked: function(mouse){ + if (mouse.button === Qt.RightButton) { + if(model.rightMenu){ + var rightMenuComponent = model.rightMenu.createObject(loader_auto_suggest_boxsssssdd); // loader_auto_suggest_boxsssssdd 是你要将菜单附加到的父级项 + if (rightMenuComponent !== null) { + rightMenuComponent.popup(); + } + } + } + } + z:-100 + } + onClicked: { if(type === 0){ if(model.tapFunc){ @@ -442,9 +501,10 @@ Item { } } } - FluText{ + FluEditableText{ id:item_title text:model.title + editable: model.editable visible: { if(d.isCompactAndNotPanel){ return false @@ -463,6 +523,18 @@ Item { left:item_icon.right right: item_dot_loader.left } + onFluTextEdited:function(newText) { + if(model.onTitleEdited) + model.onTitleEdited(newText) + } + onFluLostFocus:function(isActiveFocus){ + if(!isActiveFocus){ + model.editable = false + if(model.onTitleEdited){ + model.onTitleEdited(item_title.text) + } + } + } } Loader{ id:item_dot_loader diff --git a/src/imports/FluentUI/Controls/FluPaneItem.qml b/src/imports/FluentUI/Controls/FluPaneItem.qml index e30ccb5d..145b5729 100644 --- a/src/imports/FluentUI/Controls/FluPaneItem.qml +++ b/src/imports/FluentUI/Controls/FluPaneItem.qml @@ -19,4 +19,7 @@ QtObject { property int count: 0 signal tap property var tapFunc + property Component rightMenu + property bool editable + property var onTitleEdited:null } diff --git a/src/imports/FluentUI/Controls/FluPaneItemExpander.qml b/src/imports/FluentUI/Controls/FluPaneItemExpander.qml index 4bc6a717..d1313b4c 100644 --- a/src/imports/FluentUI/Controls/FluPaneItemExpander.qml +++ b/src/imports/FluentUI/Controls/FluPaneItemExpander.qml @@ -10,4 +10,7 @@ FluObject { property Component cusIcon property bool isExpand: false property var parent + property Component rightMenu + property bool editable + property var onTitleEdited:null } From a7ff28466d3f3422d73bbf35668adf65404f8d3c Mon Sep 17 00:00:00 2001 From: FeJQ Date: Fri, 18 Aug 2023 19:48:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=A1=A5=E6=8F=90=E4=BA=A4=E6=BC=8F?= =?UTF-8?q?=E6=8E=89=E7=9A=84=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FluentUI/Controls/FluEditableText.qml | 91 +++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 src/imports/FluentUI/Controls/FluEditableText.qml diff --git a/src/imports/FluentUI/Controls/FluEditableText.qml b/src/imports/FluentUI/Controls/FluEditableText.qml new file mode 100644 index 00000000..e94289f3 --- /dev/null +++ b/src/imports/FluentUI/Controls/FluEditableText.qml @@ -0,0 +1,91 @@ +import QtQuick +import FluentUI +Item { + id:root + property bool editable: false + property string text: "" + property int elide + property color color + property color editBgColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(255/255,255/255,255/255,1) + property color editTextColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) + + property alias editBgRect : editBackgroundComponent + property alias normalText :normalTextComponent + property alias editableText :editableTextComponent + + + signal fluTextEdited(var newText) + signal fluLostFocus(bool isActiveFocus) + + + height:24 + + function setEditable(value){ + editable = value; + } + + Keys.onPressed:function(event) { + if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) { + if(editableTextComponent.text !== "" && editableTextComponent.text !== root.text){ + fluTextEdited(editableTextComponent.text) + } + + fluLostFocus(false) + } + } + + + //property alias anchors:normalText.anchors + FluText{ + id:normalTextComponent + text: root.text + elide:root.elide + color:root.color + visible: !editable + anchors.fill: parent + lineHeight: height + verticalAlignment: Text.AlignVCenter + } + + Rectangle{ + id:editBackgroundComponent + width: Math.max(editableText.implicitWidth,20) + height:parent.height + radius: 5 + + + color:editable? editBgColor:"transparent" + visible: editable + TextInput{ + id:editableTextComponent + anchors.fill: parent + + text:root.text + color:editTextColor + visible: editable + renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering + font: FluTextStyle.Body + verticalAlignment: Text.AlignVCenter + //focus: editable + + onActiveFocusChanged: { + if(editableTextComponent.text !== "" && editableTextComponent.text !== root.text){ + fluTextEdited(text) + } + fluLostFocus(activeFocus); + } + } + } + onEditableChanged: { + if(editable){ + editableTextComponent.forceActiveFocus() + editableTextComponent.selectAll() + } + } + + + + + + +}