Merge pull request #248 from FeJQ/FluNavigationView-pr

补交漏掉的FluEditableText.qml

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

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()
+        }
+    }
+
+
+
+
+
+
+}

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

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
 }

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
 }