From bcc47c149613f4ccc33602842f29041b43fee843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?=
 <zhuzichu520@outlook.com>
Date: Sat, 2 Dec 2023 23:04:02 +0800
Subject: [PATCH] update

---
 example/qml/page/T_ShortcutPicker.qml         | 30 ++++++++
 .../FluentUI/Controls/FluShortcutPicker.qml   | 70 +++++++++++++++++++
 .../FluentUI/Controls/FluShortcutPicker.qml   |  5 +-
 3 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 example/qml/page/T_ShortcutPicker.qml
 create mode 100644 src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml

diff --git a/example/qml/page/T_ShortcutPicker.qml b/example/qml/page/T_ShortcutPicker.qml
new file mode 100644
index 00000000..796b7c32
--- /dev/null
+++ b/example/qml/page/T_ShortcutPicker.qml
@@ -0,0 +1,30 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"ShortcutPicker"
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 100
+        paddings: 10
+        FluShortcutPicker{
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluShortcutPicker{
+
+}'
+    }
+
+}
+
diff --git a/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml
new file mode 100644
index 00000000..26bb6885
--- /dev/null
+++ b/src/Qt5/imports/FluentUI/Controls/FluShortcutPicker.qml
@@ -0,0 +1,70 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluIconButton {
+
+    id:control
+
+    background: Rectangle{
+        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+        border.width: 1
+        implicitHeight: 42
+        implicitWidth: layout_row.width+28
+        radius: control.radius
+        color:control.color
+        FluFocusRectangle{
+            visible: control.activeFocus
+        }
+    }
+
+    component ItemKey:Rectangle{
+        id:item_key_control
+        property string text : ""
+        color:FluTheme.primaryColor
+        width: Math.max(item_text.implicitWidth+12,28)
+        height: Math.max(item_text.implicitHeight,28)
+        radius: 4
+        Text{
+            id:item_text
+            color: FluTheme.dark ? Qt.rgba(0,0,0,1)  : Qt.rgba(1,1,1,1)
+            font.pixelSize: 13
+            text: item_key_control.text
+            anchors.centerIn: parent
+        }
+    }
+
+    Row{
+        id:layout_row
+        spacing: 5
+        anchors.centerIn: parent
+        ItemKey{
+            text:"Ctrl"
+        }
+        ItemKey{
+            text:"A"
+        }
+        Item{
+            width: 3
+            height: 1
+        }
+        FluIcon{
+            iconSource: FluentIcons.EditMirrored
+            iconSize: 13
+            anchors{
+                verticalCenter: parent.verticalCenter
+            }
+        }
+
+    }
+
+    FluContentDialog{
+        id:content_dialog
+
+    }
+
+    onClicked: {
+        content_dialog.open()
+    }
+
+}
diff --git a/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml
index 06fd55df..c88af3e3 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluShortcutPicker.qml
@@ -22,8 +22,8 @@ FluIconButton {
         id:item_key_control
         property string text : ""
         color:FluTheme.primaryColor
-        width: Math.max(item_text.implicitWidth + 12,28)
-        height: Math.max(item_text.implicitHeight + 12,28)
+        width: Math.max(item_text.implicitWidth+12,28)
+        height: Math.max(item_text.implicitHeight,28)
         radius: 4
         Text{
             id:item_text
@@ -68,3 +68,4 @@ FluIconButton {
     }
 
 }
+