diff --git a/example/T_RatingControl.qml b/example/T_RatingControl.qml
new file mode 100644
index 00000000..6e75b0a8
--- /dev/null
+++ b/example/T_RatingControl.qml
@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"RatingControl"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+
+        Column{
+            spacing: 10
+            anchors.verticalCenter: parent.verticalCenter
+            FluRatingControl{
+
+            }
+            FluRatingControl{
+                number:10
+            }
+        }
+
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluRatingControl{
+
+}'
+    }
+
+
+}
diff --git a/example/component/CodeExpander.qml b/example/component/CodeExpander.qml
index 14cb7de7..770e8102 100644
--- a/example/component/CodeExpander.qml
+++ b/example/component/CodeExpander.qml
@@ -118,7 +118,8 @@ FluExpander{
           "FluTableView",
           "FluColors",
           "FluTheme",
-          "FluStatusView"
+          "FluStatusView",
+          "FluRatingControl"
       ];
       code = code.replace(/\n/g, "<br>");
       code = code.replace(/ /g, "&nbsp;");
diff --git a/example/global/ItemsOriginal.qml b/example/global/ItemsOriginal.qml
index 0d8f6c52..d0ed5542 100644
--- a/example/global/ItemsOriginal.qml
+++ b/example/global/ItemsOriginal.qml
@@ -113,6 +113,12 @@ FluObject{
                 navigationView.push("qrc:/T_Progress.qml")
             }
         }
+        FluPaneItem{
+            title:"RatingControl"
+            onTap:{
+                navigationView.push("qrc:/T_RatingControl.qml")
+            }
+        }
         FluPaneItem{
             title:"Badge"
             onTap:{
diff --git a/example/qml.qrc b/example/qml.qrc
index 8aa329de..00b00a81 100644
--- a/example/qml.qrc
+++ b/example/qml.qrc
@@ -165,5 +165,6 @@
         <file>page/StandardWindow.qml</file>
         <file>page/SingleTaskWindow.qml</file>
         <file>page/SingleInstanceWindow.qml</file>
+        <file>T_RatingControl.qml</file>
     </qresource>
 </RCC>
diff --git a/src/Fluent.cpp b/src/Fluent.cpp
index f31d56f9..fa424101 100644
--- a/src/Fluent.cpp
+++ b/src/Fluent.cpp
@@ -34,6 +34,7 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
 
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRatingControl.qml"),uri,major,minor,"FluRatingControl");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluStatusView.qml"),uri,major,minor,"FluStatusView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPagination.qml"),uri,major,minor,"FluPagination");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
diff --git a/src/controls/FluRatingControl.qml b/src/controls/FluRatingControl.qml
new file mode 100644
index 00000000..f27f6985
--- /dev/null
+++ b/src/controls/FluRatingControl.qml
@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+
+    property int number: 5
+    property int spacing: 4
+    property int size: 18
+    property int value:0
+
+    id:control
+    implicitWidth: container.width
+    implicitHeight: container.height
+
+    QtObject{
+        id:d
+        property int mouseValue: 0
+        property int itemSize: control.size+spacing*2
+    }
+
+    Row{
+        id:container
+        spacing: 0
+        Repeater{
+            model:control.number
+            Item{
+                width: d.itemSize
+                height: d.itemSize
+                FluIcon{
+                    property bool isSelected : {
+                        if(d.mouseValue!==0){
+                            return index<d.mouseValue
+                        }
+                        return index<control.value
+                    }
+                    iconSize: control.size
+                    iconSource: isSelected ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
+                    iconColor: isSelected ? FluTheme.primaryColor.dark : (FluTheme.dark ? "#FFFFFF" : "#000000")
+                    anchors.centerIn: parent
+                }
+            }
+        }
+    }
+
+    MouseArea{
+        anchors.fill: container
+        hoverEnabled: true
+        onPositionChanged: (mouse)=>{
+            d.mouseValue = Number(mouse.x / d.itemSize)+1
+        }
+        onExited: {
+            d.mouseValue = 0
+        }
+        onClicked: (mouse)=>{
+            control.value = Number(mouse.x / d.itemSize)+1
+        }
+    }
+
+}
diff --git a/src/controls/FluTextArea.qml b/src/controls/FluTextArea.qml
index bcadff0b..22a5fe91 100644
--- a/src/controls/FluTextArea.qml
+++ b/src/controls/FluTextArea.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Controls.impl
 import QtQuick.Templates as T
 
diff --git a/src/controls/FluTextFiled.qml b/src/controls/FluTextFiled.qml
index 3d6d5c1b..f81d4847 100644
--- a/src/controls/FluTextFiled.qml
+++ b/src/controls/FluTextFiled.qml
@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Controls.impl
 import QtQuick.Templates as T
 
@@ -26,7 +27,6 @@ T.TextField {
         y: control.topPadding
         width: control.width - (control.leftPadding + control.rightPadding)
         height: control.height - (control.topPadding + control.bottomPadding)
-
         text: control.placeholderText
         font: control.font
         color: control.placeholderTextColor
diff --git a/src/res.qrc b/src/res.qrc
index 11d3eb06..d4408cf9 100644
--- a/src/res.qrc
+++ b/src/res.qrc
@@ -72,5 +72,6 @@
         <file>controls/FluToggleButton.qml</file>
         <file>controls/FluStatusView.qml</file>
         <file>controls/FluPaneItemEmpty.qml</file>
+        <file>controls/FluRatingControl.qml</file>
     </qresource>
 </RCC>