update

src/controls/FluButton.qml

@@ -1,47 +1,62 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import FluentUI 1.0
 
-Rectangle {
-    id: button
+Control {
+    id: control
 
     property string text: "Standard Button"
-    property int startPadding : 15
-    property int endPadding : 15
-    property int topPadding: 5
-    property int bottomPadding: 5
     property bool disabled: false
-    property color primaryColor : "#0064B0"
-    signal clicked
-    radius: 4
 
-    color:{
-        if(FluTheme.isDark){
+
+    property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+
+    signal clicked
+
+    topPadding:5
+    bottomPadding:5
+    leftPadding:15
+    rightPadding:15
+
+    focusPolicy:Qt.TabFocus
+    Keys.onEnterPressed:(visualFocus&&handleClick())
+    Keys.onReturnPressed:(visualFocus&&handleClick())
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: handleClick()
+    }
+
+    function handleClick(){
+        if(disabled){
+            return
+        }
+        control.clicked()
+    }
+
+    background: Rectangle{
+        border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
+        border.width: 1
+        radius: 4
+        FluFocusRectangle{
+            visible: control.visualFocus
+            radius:8
+        }
+        color:{
             if(disabled){
-                return Qt.rgba(59/255,59/255,59/255,1)
+                return disableColor
             }
-            return  button_mouse.containsMouse ? "#444444" : "#3e3e3e"
-        }else{
-            if(disabled){
-                return Qt.rgba(252/255,252/255,252/255,1)
-            }
-            return  button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
+            return hovered ? hoverColor :normalColor
         }
     }
-    width: button_text.implicitWidth
-    height: button_text.implicitHeight
 
-    border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
-    border.width: 1
-
-
-    FluText {
-        id: button_text
-        text: button.text
-        leftPadding: button.startPadding
-        rightPadding: button.endPadding
-        topPadding: button.topPadding
-        bottomPadding: button.bottomPadding
+    contentItem: FluText {
+        text: control.text
         anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
         color: {
             if(FluTheme.isDark){
                 if(disabled){
@@ -57,15 +72,4 @@ Rectangle {
         }
     }
 
-    MouseArea {
-        id:button_mouse
-        anchors.fill: parent
-        hoverEnabled: true
-        onClicked: {
-            if(disabled){
-                return
-            }
-            button.clicked()
-        }
-    }
 }