diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml
index fe6eaa6..0e99cbc 100644
--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@@ -20,7 +20,7 @@ FluScrollablePage{
         paddings: 10
 
         FluButton{
-            disabled:button_switch.checked
+            disabled:button_switch.selected
             text:"Standard Button"
             onClicked: {
                 showInfo("点击StandardButton")
@@ -53,7 +53,7 @@ FluScrollablePage{
         paddings: 10
 
         FluFilledButton{
-            disabled:filled_button_switch.checked
+            disabled:filled_button_switch.selected
             text:"Filled Button"
             onClicked: {
                 showWarning("点击FilledButton")
@@ -88,7 +88,7 @@ FluScrollablePage{
 
         FluIconButton{
             iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.checked
+            disabled:icon_button_switch.selected
             iconSize: 15
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -132,7 +132,7 @@ FluScrollablePage{
                 model: 3
                 delegate:  FluRadioButton{
                     selected : repeater.selecIndex===index
-                    disabled:radio_button_switch.checked
+                    disabled:radio_button_switch.selected
                     text:"Radio Button_"+index
                     onClicked:{
                         repeater.selecIndex = index
@@ -165,7 +165,7 @@ FluScrollablePage{
         paddings: 10
 
         FluCheckBox{
-            disabled:icon_button_check.checked
+            disabled:check_box_switch.selected
             text:"Check Box"
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -181,7 +181,7 @@ FluScrollablePage{
                 right: parent.right
             }
             FluToggleSwitch{
-                id:icon_button_check
+                id:check_box_switch
                 Layout.alignment: Qt.AlignRight
             }
             FluText{
diff --git a/example/T_Theme.qml b/example/T_Theme.qml
index ffa75a2..aff8713 100644
--- a/example/T_Theme.qml
+++ b/example/T_Theme.qml
@@ -41,9 +41,9 @@ FluScrollablePage{
         Layout.topMargin: 20
     }
     FluToggleSwitch{
-        checked: FluTheme.isDark
-        onCheckedChanged:{
-            FluTheme.isDark = checked
+        selected: FluTheme.isDark
+        clickFunc:function(){
+            FluTheme.isDark = !FluTheme.isDark
         }
     }
     FluText{
@@ -51,9 +51,9 @@ FluScrollablePage{
         Layout.topMargin: 20
     }
     FluToggleSwitch{
-        checked: FluTheme.isFrameless
-        onCheckedChanged:{
-            FluTheme.isFrameless = isFrameless
+        selected: FluTheme.isFrameless
+        clickFunc:function(){
+            FluTheme.isFrameless = !FluTheme.isFrameless
         }
     }
     FluText{
@@ -61,9 +61,9 @@ FluScrollablePage{
         Layout.topMargin: 20
     }
     FluToggleSwitch{
-        checked: FluTheme.isNativeText
-        onCheckedChanged:{
-            FluTheme.isNativeText = isNativeText
+        selected: FluTheme.isNativeText
+        clickFunc:function(){
+            FluTheme.isNativeText = !FluTheme.isNativeText
         }
     }
 }
diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml
index 53af7aa..3fa088a 100644
--- a/src/controls/FluAppBar.qml
+++ b/src/controls/FluAppBar.qml
@@ -93,9 +93,9 @@ Rectangle{
                 fontStyle: FluText.Body
             }
             FluToggleSwitch{
-                checked: FluTheme.isDark
-                onCheckedChanged:{
-                    FluTheme.isDark = checked
+                selected: FluTheme.isDark
+                clickFunc:function(){
+                    FluTheme.isDark = !FluTheme.isDark
                 }
             }
         }
diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml
index 0abcec0..a7269fb 100644
--- a/src/controls/FluButton.qml
+++ b/src/controls/FluButton.qml
@@ -3,25 +3,28 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 Button {
-    id: control
 
     property bool disabled: false
     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)
 
+    id: control
     topPadding:5
     bottomPadding:5
     leftPadding:15
     rightPadding:15
     enabled: !disabled
+    focusPolicy:Qt.TabFocus
+
+    Keys.onSpacePressed: control.visualFocus&&clicked()
 
     background: Rectangle{
         border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
         border.width: 1
         radius: 4
         FluFocusRectangle{
-            visible: control.focus
+            visible: control.visualFocus
             radius:8
         }
         color:{
@@ -31,7 +34,6 @@ Button {
             return hovered ? hoverColor :normalColor
         }
     }
-
     contentItem: FluText {
         text: control.text
         anchors.centerIn: parent
diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml
index 5def2f5..4fef59e 100644
--- a/src/controls/FluCheckBox.qml
+++ b/src/controls/FluCheckBox.qml
@@ -5,31 +5,25 @@ import FluentUI 1.0
 
 Button {
 
-    id:control
     property bool selected: false
-
     property var clickFunc
-
     property bool disabled: false
-
-    padding:0
-
     property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
     property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
     property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
-
     property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
     property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
     property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
-
     property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
 
+    id:control
     enabled: !disabled
-
-
+    focusPolicy:Qt.TabFocus
+    Keys.onSpacePressed: control.visualFocus&&clicked()
+    padding:0
     onClicked: {
         if(disabled){
             return
@@ -40,14 +34,11 @@ Button {
         }
         selected = !selected
     }
-
-
     background: Item{
         FluFocusRectangle{
-            visible: control.focus
+            visible: control.visualFocus
         }
     }
-
     contentItem: RowLayout{
         spacing: 4
         Rectangle{
@@ -82,7 +73,6 @@ Button {
                 }
                 return normalColor
             }
-
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
@@ -95,5 +85,4 @@ Button {
             text:control.text
         }
     }
-
 }
diff --git a/src/controls/FluFilledButton.qml b/src/controls/FluFilledButton.qml
index da50475..0c4f617 100644
--- a/src/controls/FluFilledButton.qml
+++ b/src/controls/FluFilledButton.qml
@@ -15,11 +15,12 @@ Button {
     bottomPadding:5
     leftPadding:15
     rightPadding:15
-
+    Keys.onSpacePressed: control.visualFocus&&clicked()
+    focusPolicy:Qt.TabFocus
     background: Rectangle{
         radius: 4
         FluFocusRectangle{
-            visible: control.focus
+            visible: control.visualFocus
             radius:8
         }
         color:{
@@ -29,7 +30,6 @@ Button {
             return hovered ? hoverColor :normalColor
         }
     }
-
     contentItem: FluText {
         text: control.text
         horizontalAlignment: Text.AlignHCenter
@@ -46,6 +46,4 @@ Button {
         }
         font.pixelSize: 14
     }
-
-
 }
diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml
index 769c197..297cd36 100644
--- a/src/controls/FluIconButton.qml
+++ b/src/controls/FluIconButton.qml
@@ -4,35 +4,18 @@ import FluentUI 1.0
 
 Button {
 
-    id:control
-
-
-    width: 30
-    height: 30
-    implicitWidth: width
-    implicitHeight: height
-
-    padding: 0
-
     property int iconSize: 20
     property int iconSource
-
-
     property bool disabled: false
-
-    enabled: !disabled
-
     property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
     property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
-
     property color color: {
         if(disabled){
             return disableColor
         }
         return hovered ? hoverColor : normalColor
     }
-
     property color textColor: {
         if(FluTheme.isDark){
             if(disabled){
@@ -47,14 +30,22 @@ Button {
         }
     }
 
+    id:control
+    width: 30
+    height: 30
+    implicitWidth: width
+    implicitHeight: height
+    padding: 0
+    enabled: !disabled
+    focusPolicy:Qt.TabFocus
+    Keys.onSpacePressed: control.visualFocus&&clicked()
     background: Rectangle{
         radius: 4
         color:control.color
         FluFocusRectangle{
-            visible: control.focus
+            visible: control.visualFocus
         }
     }
-
     contentItem: Item{
         Text {
             id:text_icon
@@ -68,7 +59,6 @@ Button {
             color:control.textColor
             text: (String.fromCharCode(iconSource).toString(16));
         }
-
         FluTooltip{
             id:tool_tip
             visible: {
@@ -81,8 +71,4 @@ Button {
             delay: 1000
         }
     }
-
-
-
-
 }
diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml
index af39518..0aca9f7 100644
--- a/src/controls/FluNavigationView.qml
+++ b/src/controls/FluNavigationView.qml
@@ -184,9 +184,9 @@ Item {
                 fontStyle: FluText.Body
             }
             FluToggleSwitch{
-                checked: FluTheme.isDark
-                onCheckedChanged:{
-                    FluTheme.isDark = checked
+                selected: FluTheme.isDark
+                clickFunc:function(){
+                    FluTheme.isDark = !FluTheme.isDark
                 }
             }
         }
diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml
index 8a0de4a..6c41b24 100644
--- a/src/controls/FluRadioButton.qml
+++ b/src/controls/FluRadioButton.qml
@@ -11,12 +11,14 @@ Button {
 
     id:control
     enabled: !disabled
+    focusPolicy:Qt.TabFocus
     padding:0
     background: Item{
         FluFocusRectangle{
-            visible: control.focus
+            visible: control.visualFocus
         }
     }
+    Keys.onSpacePressed: control.visualFocus&&clicked()
     contentItem: RowLayout{
         Rectangle{
             id:rect_check
@@ -93,14 +95,10 @@ Button {
                 }
             }
         }
-
         FluText{
             text: control.text
             Layout.alignment: Qt.AlignVCenter
         }
-
     }
-
-
 }
 
diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml
index ee52fd5..4165ca8 100644
--- a/src/controls/FluToggleSwitch.qml
+++ b/src/controls/FluToggleSwitch.qml
@@ -3,23 +3,35 @@ import QtQuick.Controls 2.0
 import FluentUI 1.0
 
 Button {
-    id: root
+
+    property bool selected: false
+    property var clickFunc
+
+    id: control
     width: 40
     implicitWidth: 40
     height: 20
     implicitHeight: 20
-    checkable: true
+    focusPolicy:Qt.TabFocus
+    Keys.onSpacePressed: control.visualFocus&&clicked()
+    onClicked: {
+        if(clickFunc){
+            clickFunc()
+            return
+        }
+        selected = !selected
+    }
     background : Rectangle {
-        width: root.width
-        height: root.height
+        width: control.width
+        height: control.height
         radius: height / 2
         FluFocusRectangle{
-            visible: root.focus
+            visible: control.visualFocus
             radius: 20
         }
         color: {
             if(FluTheme.isDark){
-                if(checked){
+                if(selected){
                     return FluTheme.primaryColor.dark
                 }
                 if(hovered){
@@ -27,7 +39,7 @@ Button {
                 }
                 return "#323232"
             }else{
-                if(checked){
+                if(selected){
                     return FluTheme.primaryColor.dark
                 }
                 if(hovered){
@@ -37,18 +49,19 @@ Button {
             }
         }
         border.width: 1
-        border.color: checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
+        border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
         Rectangle {
-            x:  checked ? root.implicitWidth  - width - 4 : 4
-            width:  root.height - 8
-            height: root.height - 8
+            x:  selected ? control.implicitWidth  - width - 4 : 4
+            width:  control.height - 8
+            height: control.height - 8
             radius: width / 2
             scale: hovered ? 1.2 : 1.0
             anchors.verticalCenter: parent.verticalCenter
-            color: checked ? "#FFFFFF" : "#666666"
+            color: selected ? "#FFFFFF" : "#666666"
             Behavior on x {
                 NumberAnimation { duration: 200 }
             }
         }
     }
+
 }