diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml index f96c8915..4a86a5a1 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/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() + } + } + + + + + + +} diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 4c1ee655..db32930b 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 Item{ @@ -161,6 +163,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) @@ -289,9 +314,10 @@ Item { } } } - FluText{ + FluEditableText{ id:item_title text:model.title + editable: model.editable visible: { if(d.isCompactAndNotPanel){ return false @@ -310,6 +336,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) + } + } } } } @@ -350,6 +387,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){ @@ -440,9 +499,10 @@ Item { } } } - FluText{ + FluEditableText{ id:item_title text:model.title + editable: model.editable visible: { if(d.isCompactAndNotPanel){ return false @@ -461,6 +521,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 }