update

example/AboutPage.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluWindow {
+
+    width: 500
+    height: 500
+    title:"关于"
+
+    FluAppBar{
+        id:appbar
+    }
+
+    FluText{
+        text:"关于"
+        fontStyle: FluText.Display
+        anchors.centerIn: parent
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+
+            }
+        }
+
+    }
+
+}

example/App.qml

@@ -12,7 +12,8 @@ Window {
         FluApp.setAppWindow(app)
         FluApp.routes = {
             "/":"qrc:/MainPage.qml",
-            "/Setting":"qrc:/SettingPage.qml"
+            "/Setting":"qrc:/SettingPage.qml",
+            "/About":"qrc:/AboutPage.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.run()

example/MainPage.qml

@@ -19,8 +19,20 @@ FluWindow {
     ListModel{
         id:nav_items
         ListElement{
-            text:"Controls"
+            text:"Buttons"
-            page:"qrc:/T_Controls.qml"
+            page:"qrc:/T_Buttons.qml"
+        }
+        ListElement{
+            text:"ToggleSwitch"
+            page:"qrc:/T_ToggleSwitch.qml"
+        }
+        ListElement{
+            text:"InfoBar"
+            page:"qrc:/T_InfoBar.qml"
+        }
+        ListElement{
+            text:"Rectangle"
+            page:"qrc:/T-Rectangle.qml"
         }
         ListElement{
             text:"Typography"
@@ -108,7 +120,7 @@ FluWindow {
             bottomMargin: 20
         }
         border.width: 1
-        border.color: FluApp.isDark ? "#666666" : "#EEEEEE"
+        border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
 
         Loader{
             anchors.fill: parent

example/SettingPage.qml

@@ -12,10 +12,17 @@ FluWindow {
     }
 
     FluText{
-        text:"Display"
+        text:"设置"
         fontStyle: FluText.Display
         anchors.centerIn: parent
 
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+                FluApp.navigate("/About")
+            }
+        }
+
     }
 
 }

example/T-Rectangle.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Item {
+
+    ColumnLayout{
+        spacing: 5
+
+        FluText{
+            text:"Rectangle"
+            fontStyle: FluText.TitleLarge
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#ffeb3b"
+            radius:[15,0,0,0]
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#f7630c"
+            radius:[0,15,0,0]
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#e71123"
+            radius:[0,0,15,0]
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#b4009e"
+            radius:[0,0,0,15]
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#744da9"
+            radius:[15,15,15,15]
+        }
+
+        FluRectangle{
+            width: 50
+            height: 50
+            color:"#0078d4"
+            radius:[0,0,0,0]
+        }
+    }
+}

example/T_Buttons.qml

@@ -0,0 +1,141 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Item {
+
+    width: parent.width
+
+
+    ColumnLayout{
+        spacing: 5
+
+        width: parent.width
+
+        FluText{
+            text:"Buttons"
+            fontStyle: FluText.TitleLarge
+        }
+
+
+        RowLayout{
+            Layout.topMargin: 20
+            width: parent.width
+            FluButton{
+                disabled:button_switch.checked
+                onClicked: {
+                    showInfo("点击StandardButton")
+                }
+            }
+            Item{
+                height: 1
+                Layout.fillWidth: true
+            }
+            FluToggleSwitch{
+                id:button_switch
+                Layout.alignment: Qt.AlignRight
+            }
+            FluText{
+                text:"Disabled"
+            }
+        }
+
+        FluDivider{
+            Layout.fillWidth: true ; height:1;
+        }
+
+
+        RowLayout{
+            Layout.topMargin: 20
+            width: parent.width
+            FluFilledButton{
+                disabled:filled_button_switch.checked
+                onClicked:{
+                    showWarning("点击FilledButton")
+                }
+            }
+            Item{
+                height: 1
+                Layout.fillWidth: true
+            }
+            FluToggleSwitch{
+                id:filled_button_switch
+                Layout.alignment: Qt.AlignRight
+            }
+            FluText{
+                text:"Disabled"
+            }
+        }
+
+
+
+        FluDivider{
+            Layout.fillWidth: true ; height:1
+        }
+
+
+        RowLayout{
+            Layout.topMargin: 20
+            width: parent.width
+            FluIconButton{
+                icon:FluentIcons.FA_close
+                disabled:icon_button_switch.checked
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
+            }
+            Item{
+                height: 1
+                Layout.fillWidth: true
+            }
+            FluToggleSwitch{
+                id:icon_button_switch
+                Layout.alignment: Qt.AlignRight
+            }
+            FluText{
+                text:"Disabled"
+            }
+        }
+
+
+        FluDivider{
+            Layout.fillWidth: true ; height:1
+        }
+
+        RowLayout{
+            Layout.topMargin: 20
+            width: parent.width
+            ColumnLayout{
+                spacing: 8
+
+                Repeater{
+                    id:repeater
+                    property int selecIndex : 0
+                    model: 3
+                    delegate:  FluRadioButton{
+                        checked : repeater.selecIndex===index
+                        disabled:radio_button_switch.checked
+                        text:"RodioButton_"+index
+                        onClicked:{
+                            repeater.selecIndex = index
+                        }
+                    }
+                }
+            }
+            Item{
+                height: 1
+                Layout.fillWidth: true
+            }
+            FluToggleSwitch{
+                id:radio_button_switch
+                Layout.alignment: Qt.AlignRight
+            }
+            FluText{
+                text:"Disabled"
+            }
+        }
+    }
+
+}

example/T_Controls.qml

@@ -1,50 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
-
-Item {
-
-    ColumnLayout{
-        spacing: 5
-
-
-        FluText{
-            text:"Controls"
-            fontStyle: FluText.TitleLarge
-        }
-
-        FluButton{
-            Layout.topMargin: 20
-            onClicked: {
-
-            }
-        }
-
-        FluFilledButton{
-            onClicked:{
-                FluApp.navigate("/Setting")
-            }
-        }
-
-        FluFilledButton{
-            disabled: true
-            onClicked:{
-            }
-        }
-
-        FluIconButton{
-            Component.onCompleted: {
-
-            }
-            icon:FluentIcons.FA_close
-        }
-
-        FluToggleSwitch{
-
-        }
-
-    }
-
-
-}

example/T_InfoBar.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Item {
+
+    ColumnLayout{
+        spacing: 5
+
+
+        FluText{
+            text:"InfoBar"
+            fontStyle: FluText.TitleLarge
+        }
+
+        FluButton{
+            text:"Info"
+            Layout.topMargin: 20
+            onClicked: {
+                showInfo("这是一个Info样式的InfoBar")
+            }
+        }
+
+        FluButton{
+            text:"Warning"
+            Layout.topMargin: 20
+            onClicked: {
+                showWarning("这是一个Warning样式的InfoBar")
+            }
+        }
+
+        FluButton{
+            text:"Error"
+            Layout.topMargin: 20
+            onClicked: {
+                showError("这是一个Error样式的InfoBar")
+            }
+        }
+
+        FluButton{
+            text:"Success"
+            Layout.topMargin: 20
+            onClicked: {
+                showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+            }
+        }
+
+
+
+    }
+
+}

example/T_ToggleSwitch.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Item {
+
+    ColumnLayout{
+        spacing: 5
+
+
+        FluText{
+            text:"ToggleSwitch"
+            fontStyle: FluText.TitleLarge
+        }
+
+        FluToggleSwitch{
+            Layout.topMargin: 20
+        }
+
+
+    }
+
+
+}

example/qml.qrc

@@ -1,9 +1,13 @@
 <RCC>
     <qresource prefix="/">
-        <file>T_Controls.qml</file>
+        <file>T_ToggleSwitch.qml</file>
         <file>T_Typography.qml</file>
         <file>App.qml</file>
         <file>MainPage.qml</file>
         <file>SettingPage.qml</file>
+        <file>AboutPage.qml</file>
+        <file>T_Buttons.qml</file>
+        <file>T-Rectangle.qml</file>
+        <file>T_InfoBar.qml</file>
     </qresource>
 </RCC>

src/FluApp.cpp

@@ -39,10 +39,8 @@ void FluApp::navigate(const QString& route){
         qErrnoWarning("没有找到当前路由");
         return;
     }
-
     bool isAppWindow = route==initialRoute();
     FramelessView *view = new FramelessView();
-    view->engine()->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
     view->setColor(isDark() ? QColor(0,0,0,1) : QColor(255, 255, 255, 1));
     QObject::connect(view, &QQuickView::statusChanged, view, [&](QQuickView::Status status) {
         if (status == QQuickView::Status::Ready) {

src/Fluent.cpp

@@ -30,6 +30,12 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
 
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluShadow.qml"),uri,major,minor,"FluShadow");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluIcon.qml"),uri,major,minor,"FluIcon");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluObject.qml"),uri,major,minor,"FluObject");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluInfoBar.qml"),uri,major,minor,"FluInfoBar");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
@@ -57,10 +63,10 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
 {
     Q_UNUSED(engine)
     Q_UNUSED(uri)
-    QFont font;
+//    QFont font;
-    font.setFamily("Microsoft YaHei");
+//    font.setFamily("Microsoft YaHei");
-    QGuiApplication::setFont(font);
+//    QGuiApplication::setFont(font);
-    QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
+//    QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
     QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
     engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
 }

src/FluentUI.cpp

@@ -4,9 +4,9 @@
 
 void FluentUI::create(QQmlEngine *engine)
 {
-    Fluent::getInstance()->registerTypes(URI_STR);
-    Fluent::getInstance()->initializeEngine(engine,URI_STR);
     engine->addImportPath("/");
+    Fluent::getInstance()->initializeEngine(engine,URI_STR);
+    Fluent::getInstance()->registerTypes(URI_STR);
 }
 
 QString FluentUI::version()

src/build-preset/plugins.qmltypes

@@ -855,6 +855,7 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
+        Property { name: "text"; type: "string" }
         Property { name: "startPadding"; type: "int" }
         Property { name: "endPadding"; type: "int" }
         Property { name: "topPadding"; type: "int" }
@@ -879,6 +880,14 @@ Module {
         isComposite: true
         defaultProperty: "data"
     }
+    Component {
+        prototype: "QQuickRectangle"
+        name: "FluentUI/FluDivider 1.0"
+        exports: ["FluentUI/FluDivider 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "data"
+    }
     Component {
         prototype: "QQuickItem"
         name: "FluentUI/FluDropDownButton 1.0"
@@ -894,12 +903,12 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
+        Property { name: "text"; type: "string" }
         Property { name: "startPadding"; type: "int" }
         Property { name: "endPadding"; type: "int" }
         Property { name: "topPadding"; type: "int" }
         Property { name: "bottomPadding"; type: "int" }
         Property { name: "disabled"; type: "bool" }
-        Property { name: "primaryColor"; type: "QColor" }
         Signal { name: "clicked" }
     }
     Component {
@@ -909,12 +918,12 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
+        Property { name: "text"; type: "string" }
         Property { name: "startPadding"; type: "int" }
         Property { name: "endPadding"; type: "int" }
         Property { name: "topPadding"; type: "int" }
         Property { name: "bottomPadding"; type: "int" }
         Property { name: "disabled"; type: "bool" }
-        Property { name: "primaryColor"; type: "QColor" }
         Signal { name: "clicked" }
     }
     Component {
@@ -924,14 +933,25 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
+        Property { name: "text"; type: "string" }
         Property { name: "startPadding"; type: "int" }
         Property { name: "endPadding"; type: "int" }
         Property { name: "topPadding"; type: "int" }
         Property { name: "bottomPadding"; type: "int" }
         Property { name: "disabled"; type: "bool" }
-        Property { name: "primaryColor"; type: "QColor" }
         Signal { name: "clicked" }
     }
+    Component {
+        prototype: "QQuickText"
+        name: "FluentUI/FluIcon 1.0"
+        exports: ["FluentUI/FluIcon 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "data"
+        Property { name: "icon"; type: "int" }
+        Property { name: "iconSize"; type: "int" }
+        Property { name: "iconColor"; type: "QColor" }
+    }
     Component {
         prototype: "QQuickRectangle"
         name: "FluentUI/FluIconButton 1.0"
@@ -941,9 +961,64 @@ Module {
         defaultProperty: "data"
         Property { name: "iconSize"; type: "int" }
         Property { name: "icon"; type: "int" }
-        Property { name: "iconColor"; type: "QColor" }
+        Property { name: "disabled"; type: "bool" }
+        Property { name: "text"; type: "string" }
         Signal { name: "clicked" }
     }
+    Component {
+        prototype: "QObject"
+        name: "FluentUI/FluInfoBar 1.0"
+        exports: ["FluentUI/FluInfoBar 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "children"
+        Property { name: "root"; type: "QVariant" }
+        Property { name: "layoutY"; type: "int" }
+        Method {
+            name: "showSuccess"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showInfo"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showWarning"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showError"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showCustom"
+            type: "QVariant"
+            Parameter { name: "itemcomponent"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+        }
+        Property { name: "children"; type: "QObject"; isList: true; isReadonly: true }
+    }
+    Component {
+        prototype: "QObject"
+        name: "FluentUI/FluObject 1.0"
+        exports: ["FluentUI/FluObject 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "children"
+        Property { name: "children"; type: "QObject"; isList: true; isReadonly: true }
+    }
     Component {
         prototype: "QQuickItem"
         name: "FluentUI/FluProgressBar 1.0"
@@ -967,6 +1042,10 @@ Module {
         exportMetaObjectRevisions: [0]
         isComposite: true
         defaultProperty: "data"
+        Property { name: "checked"; type: "bool" }
+        Property { name: "text"; type: "string" }
+        Property { name: "disabled"; type: "bool" }
+        Signal { name: "clicked" }
     }
     Component {
         prototype: "QQuickItem"
@@ -974,7 +1053,23 @@ Module {
         exports: ["FluentUI/FluRectangle 1.0"]
         exportMetaObjectRevisions: [0]
         isComposite: true
+        defaultProperty: "contentItem"
+        Property { name: "radius"; type: "QVariant" }
+        Property { name: "color"; type: "QColor" }
+        Property { name: "borderColor"; type: "QColor" }
+        Property { name: "borderWidth"; type: "int" }
+        Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true }
+    }
+    Component {
+        prototype: "QQuickItem"
+        name: "FluentUI/FluShadow 1.0"
+        exports: ["FluentUI/FluShadow 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
         defaultProperty: "data"
+        Property { name: "shadowColor"; type: "QColor" }
+        Property { name: "radius"; type: "int" }
+        Property { name: "isShadow"; type: "bool" }
     }
     Component {
         prototype: "QQuickItem"
@@ -1007,11 +1102,6 @@ Module {
         Property { name: "fontStyle"; type: "int" }
         Property { name: "textColor"; type: "QColor" }
         Property { name: "pixelSize"; type: "int" }
-        Method {
-            name: "setFontStyle"
-            type: "QVariant"
-            Parameter { name: "fontStyle"; type: "QVariant" }
-        }
     }
     Component {
         prototype: "QQuickItem"
@@ -1037,7 +1127,15 @@ Module {
         isComposite: true
         defaultProperty: "data"
         Property { name: "checkedColor"; type: "QColor" }
-        Signal { name: "clicked2" }
+        Property { name: "onClickFunc"; type: "QVariant" }
+    }
+    Component {
+        prototype: "QQuickToolTip"
+        name: "FluentUI/FluTooltip 1.0"
+        exports: ["FluentUI/FluTooltip 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "contentData"
     }
     Component {
         prototype: "QQuickRectangle"
@@ -1049,5 +1147,33 @@ Module {
         Property { name: "isMax"; type: "bool" }
         Property { name: "title"; type: "string" }
         Property { name: "window"; type: "QVariant" }
+        Method {
+            name: "showSuccess"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showInfo"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showWarning"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
+        Method {
+            name: "showError"
+            type: "QVariant"
+            Parameter { name: "text"; type: "QVariant" }
+            Parameter { name: "duration"; type: "QVariant" }
+            Parameter { name: "moremsg"; type: "QVariant" }
+        }
     }
 }

src/controls/FluAppBar.qml

@@ -3,7 +3,6 @@ import QtQuick.Window 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-
 Rectangle{
 
     color: FluApp.isDark ? "#323232" : "#FFFFFF"
@@ -63,7 +62,7 @@ Rectangle{
             }
             FluToggleSwitch{
                 checked: FluApp.isDark
-                onClicked2:{
+                onClickFunc:function(){
                     FluApp.isDark = !FluApp.isDark
                 }
             }
@@ -73,7 +72,7 @@ Rectangle{
             icon : FluentIcons.FA_window_minimize
             Layout.alignment: Qt.AlignVCenter
             iconSize: 15
-            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+            text:"最小化"
             onClicked: {
                 Window.window.showMinimized()
             }
@@ -85,7 +84,7 @@ Rectangle{
                 return Window.Maximized === Window.window.visibility  ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
             }
             Layout.alignment: Qt.AlignVCenter
-            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+            text:Window.Maximized === Window.window.visibility?"向下还原":"最大化"
             iconSize: 15
             onClicked: {
                 toggleMaximized()
@@ -94,19 +93,18 @@ Rectangle{
         FluIconButton{
             icon : FluentIcons.FA_close
             Layout.alignment: Qt.AlignVCenter
+            text:"关闭"
             iconSize: 15
-            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
             onClicked: {
                 Window.window.close()
             }
         }
     }
 
-    Rectangle{
+    FluDivider{
         width: parent.width;
         height: 1;
         anchors.bottom: parent.bottom;
-        color: FluApp.isDark ? "#666666" : "#EEEEEE"
     }
 
 }

src/controls/FluButton.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 Rectangle {
     id: button
 
+    property string text: "Standard Button"
     property int startPadding : 15
     property int endPadding : 15
     property int topPadding: 8
@@ -15,12 +16,12 @@ Rectangle {
     color:{
         if(FluApp.isDark){
             if(disabled){
-                return "#C7C7C7"
+                return Qt.rgba(59/255,59/255,59/255,1)
             }
             return  button_mouse.containsMouse ? "#444444" : "#3e3e3e"
         }else{
             if(disabled){
-                return "#C7C7C7"
+                return Qt.rgba(252/255,252/255,252/255,1)
             }
             return  button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
         }
@@ -34,13 +35,26 @@ Rectangle {
 
     FluText {
         id: button_text
-        text: "Standard Button"
+        text: button.text
         font.pixelSize: 14
         leftPadding: button.startPadding
         rightPadding: button.endPadding
         topPadding: button.topPadding
         bottomPadding: button.bottomPadding
         anchors.centerIn: parent
+        color: {
+            if(FluApp.isDark){
+                if(disabled){
+                    return Qt.rgba(131/255,131/255,131/255,1)
+                }
+                return Qt.rgba(1,1,1,1)
+            }else{
+                if(disabled){
+                    return Qt.rgba(160/255,160/255,160/255,1)
+                }
+                return Qt.rgba(0,0,0,1)
+            }
+        }
     }
 
     MouseArea {

src/controls/FluCheckBox.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluComboBox.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluDivider.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+Rectangle {
+
+    color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+
+}

src/controls/FluDropDownButton.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluFilledButton.qml

@@ -1,30 +1,48 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import FluentUI 1.0
 
 Rectangle {
     id: button
 
+    property string text: "Filled Button"
     property int startPadding : 15
     property int endPadding : 15
     property int topPadding: 8
     property int bottomPadding: 8
     property bool disabled: false
-    property color primaryColor : "#0064B0"
+
     signal clicked
     radius: 4
     color:{
+        if(FluApp.isDark){
             if(disabled){
-            return "#C7C7C7"
+                return Qt.rgba(199/255,199/255,199/255,1)
+            }
+            return  button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1)
+        }else{
+            if(disabled){
+                return Qt.rgba(199/255,199/255,199/255,1)
+            }
+            return  button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1)
         }
-        return  button_mouse.containsMouse ? Qt.lighter(primaryColor,1.15) : primaryColor
     }
     width: button_text.implicitWidth
     height: button_text.implicitHeight
 
     FluText {
         id: button_text
-        text: "Filled Button"
+        text: button.text
-        color: "#FFFFFFFF"
+        color: {
+            if(FluApp.isDark){
+                if(disabled){
+                    return Qt.rgba(173/255,173/255,173/255,1)
+                }
+                return Qt.rgba(0,0,0,1)
+            }else{
+                return Qt.rgba(1,1,1,1)
+            }
+        }
         font.pixelSize: 14
         leftPadding: button.startPadding
         rightPadding: button.endPadding

src/controls/FluIcon.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.15
+
+Text {
+
+    property int icon
+    property int iconSize: 20
+    property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+
+    id:text_icon
+    font.family: "fontawesome"
+    font.pixelSize: iconSize
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+    color: iconColor
+    text: (String.fromCharCode(icon).toString(16));
+}

src/controls/FluIconButton.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import FluentUI 1.0
 
 Rectangle {
 
@@ -8,16 +9,23 @@ Rectangle {
 
     property int iconSize: 20
     property int icon
-    property color iconColor: "#000000"
+    property alias text: tool_tip.text
     signal clicked
+    property bool disabled: false
 
     radius: 4
 
     color: {
         if(FluApp.isDark){
-            return button_mouse.containsMouse ? "#000000" : "#00000000"
+            if(disabled){
+                return Qt.rgba(59/255,59/255,59/255,1)
+            }
+            return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1)
         }else{
-            return button_mouse.containsMouse ? "#F4F4F4" : "#00000000"
+            if(disabled){
+                return Qt.rgba(1,1,1,1)
+            }
+            return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1)
         }
     }
 
@@ -28,7 +36,19 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         anchors.centerIn: parent
-        color: iconColor
+        color:{
+            if(FluApp.isDark){
+                if(disabled){
+                    return Qt.rgba(130/255,130/255,130/255,1)
+                }
+                return Qt.rgba(1,1,1,1)
+            }else{
+                if(disabled){
+                    return Qt.rgba(161/255,161/255,161/255,1)
+                }
+                return Qt.rgba(0,0,0,1)
+            }
+        }
         text: (String.fromCharCode(icon).toString(16));
     }
 
@@ -36,9 +56,21 @@ Rectangle {
         id:button_mouse
         anchors.fill: parent
         hoverEnabled: true
+        enabled: !disabled
         onClicked: {
             button.clicked()
         }
     }
 
+    FluTooltip{
+        id:tool_tip
+        visible: {
+            if(button.text === ""){
+                return false
+            }
+            return button_mouse.containsMouse
+        }
+        delay: 1000
+    }
+
 }

src/controls/FluInfoBar.qml

@@ -0,0 +1,233 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluObject {
+    id:infoBar
+
+    property var root;
+    property int layoutY: 75;
+
+    function showSuccess(text,duration,moremsg){
+        mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
+    }
+
+    function showInfo(text,duration,moremsg){
+        mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
+    }
+
+    function showWarning(text,duration,moremsg){
+        mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
+    }
+
+    function showError(text,duration,moremsg){
+        mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
+    }
+
+    function showCustom(itemcomponent,duration){
+        mcontrol.createCustom(itemcomponent,duration);
+    }
+
+    FluObject{
+        id:mcontrol
+
+        property string const_success: "success";
+        property string const_info:    "info";
+        property string const_warning: "warning";
+        property string const_error:   "error";
+
+        property int maxWidth: 300;
+
+        property var screenLayout: null;
+
+        function create(type,text,duration,moremsg){
+            if(screenLayout){
+                var last = screenLayout.getLastloader();
+                if(last.type === type && last.text === text && moremsg === last.moremsg){
+                    last.restart();
+                    return;
+                }
+            }
+
+            initScreenLayout();
+            contentComponent.createObject(screenLayout,{
+                                              type:type,
+                                              text:text,
+                                              duration:duration,
+                                              moremsg:moremsg,
+                                          });
+        }
+
+        function createCustom(itemcomponent,duration){
+            initScreenLayout();
+            if(itemcomponent){
+                contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration});
+            }
+        }
+
+        function initScreenLayout(){
+            if(screenLayout == null){
+                screenLayout = screenlayoutComponent.createObject(root);
+                screenLayout.y = infoBar.layoutY;
+                screenLayout.z = 100000;
+            }
+        }
+
+        Component{
+            id:screenlayoutComponent
+            Column{
+                spacing: 20
+                width: parent.width
+                move: Transition {
+                    NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
+                }
+
+                onChildrenChanged: if(children.length === 0)  destroy();
+
+                function getLastloader(){
+                    if(children.length > 0){
+                        return children[children.length - 1];
+                    }
+                    return null;
+                }
+            }
+        }
+
+        Component{
+            id:contentComponent
+            Item{
+                id:content;
+                property int duration: 1500
+                property var itemcomponent
+                property string type
+                property string text
+                property string moremsg
+
+                width:  parent.width;
+                height: loader.height;
+
+                function close(){
+                    content.destroy();
+                }
+
+                function restart(){
+                    delayTimer.restart();
+                }
+
+                Timer {
+                    id:delayTimer
+                    interval: duration; running: true; repeat: true
+                    onTriggered: content.close();
+                }
+
+                Loader{
+                    id:loader;
+                    x:(parent.width - width) / 2;
+                    property var _super: content;
+
+                    scale: item ? 1 : 0;
+                    asynchronous: true
+
+                    Behavior on scale {
+                        NumberAnimation {
+                            easing.type: Easing.OutBack;
+                            duration: 100
+                        }
+                    }
+
+                    sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;
+                }
+
+            }
+        }
+
+        property Component fluent_sytle:  Rectangle{
+            width:  rowlayout.width  + (_super.moremsg ? 25 : 80);
+            height: rowlayout.height + 20;
+            color: {
+                if(FluApp.isDark){
+                    switch(_super.type){
+                    case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1);
+                    case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
+                    case mcontrol.const_info:    return Qt.rgba(39/255,39/255,39/255,1);
+                    case mcontrol.const_error:   return Qt.rgba(68/255,39/255,38/255,1);
+                    }
+                    return Qt.rgba(255,255,255,1)
+                }else{
+                    switch(_super.type){
+                    case mcontrol.const_success: return "#dff6dd";
+                    case mcontrol.const_warning: return "#fff4ce";
+                    case mcontrol.const_info:    return "#f4f4f4";
+                    case mcontrol.const_error:   return "#fde7e9";
+                    }
+                    return "#FFFFFF"
+                }
+            }
+            radius: 4
+            border.width: 1
+            border.color: {
+                if(FluApp.isDark){
+                    switch(_super.type){
+                    case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1);
+                    case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
+                    case mcontrol.const_info:    return Qt.rgba(38/255,39/255,39/255,1);
+                    case mcontrol.const_error:   return Qt.rgba(67/255,39/255,38/255,1);
+                    }
+                    return "#FFFFFF"
+                }else{
+                    switch(_super.type){
+                    case mcontrol.const_success: return "#d2e8d0";
+                    case mcontrol.const_warning: return "#f0e6c2";
+                    case mcontrol.const_info:    return "#e6e6e6";
+                    case mcontrol.const_error:   return "#eed9db";
+                    }
+                    return "#FFFFFF"
+                }
+            }
+            Row{
+                id:rowlayout
+                x:20;
+                y:(parent.height - height) / 2;
+                spacing: 10
+
+                FluIcon{
+                    icon:{
+                        switch(_super.type){
+                        case mcontrol.const_success: return FluentIcons.FA_check_circle;
+                        case mcontrol.const_warning: return FluentIcons.FA_info_circle;
+                        case mcontrol.const_info:    return FluentIcons.FA_info_circle;
+                        case mcontrol.const_error:   return FluentIcons.FA_times_circle;
+                        }
+                        return FluentIcons.FA_info_circle
+                    }
+                    iconSize:20
+                    color: {
+                        if(FluApp.isDark){
+                            switch(_super.type){
+                            case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
+                            case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1);
+                            case mcontrol.const_info:    return Qt.rgba(76/255,160/255,224/255,1);
+                            case mcontrol.const_error:   return Qt.rgba(255/255,153/255,164/255,1);
+                            }
+                            return "#FFFFFF"
+                        }else{
+                            switch(_super.type){
+                            case mcontrol.const_success: return "#0f7b0f";
+                            case mcontrol.const_warning: return "#9d5d00";
+                            case mcontrol.const_info:    return "#0066b4";
+                            case mcontrol.const_error:   return "#c42b1c";
+                            }
+                            return "#FFFFFF"
+                        }
+                    }
+                }
+
+                FluText{
+                    text:_super.text
+                    wrapMode: Text.WrapAnywhere
+                    width: Math.min(implicitWidth,mcontrol.maxWidth)
+                }
+            }
+        }
+    }
+
+}

src/controls/FluObject.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.15
+
+QtObject {
+    id:flu_object;
+
+    default property list<QtObject> children;
+}

src/controls/FluProgressBar.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluProgressRing.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluRadioButton.qml

@@ -1,5 +1,111 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
 
 Item {
 
+    id:root
+    width: childrenRect.width
+    height: childrenRect.height
+    property bool checked: false
+    property string text: "RodioButton"
+    signal clicked
+    property bool disabled: false
+
+    RowLayout{
+        Rectangle{
+            id:rect_check
+            width: 20
+            height: 20
+            radius: 10
+            layer.samples: 4
+            layer.enabled: true
+            layer.smooth: true
+            border.width: {
+                if(checked&&disabled){
+                    return 3
+                }
+                if(root_mouse.containsPress){
+                    if(checked){
+                        return 5
+                    }
+                    return 1
+                }
+                if(root_mouse.containsMouse){
+                    if(checked){
+                        return 3
+                    }
+                    return 1
+                }
+                return checked ? 5 : 1
+            }
+            Behavior on border.width {
+                NumberAnimation{
+                    duration: 100
+                }
+            }
+            border.color: {
+                if(disabled){
+                    if(FluApp.isDark){
+                        return Qt.rgba(82/255,82/255,82/255,1)
+                    }else{
+                        return Qt.rgba(198/255,198/255,198/255,1)
+                    }
+                }
+                if(checked){
+                    if(FluApp.isDark){
+                        return Qt.rgba(76/255,164/255,224/255,1)
+                    }else{
+
+                        return Qt.rgba(0/255,102/255,180/255,1)
+                    }
+                }else{
+                    if(FluApp.isDark){
+                        return Qt.rgba(161/255,161/255,161/255,1)
+                    }else{
+
+                        return Qt.rgba(141/255,141/255,141/255,1)
+                    }
+                }
+            }
+            color:{
+                if(disabled&&checked){
+                    return Qt.rgba(159/255,159/255,159/255,1)
+                }
+                if(FluApp.isDark){
+                    if(root_mouse.containsMouse){
+                        return Qt.rgba(43/255,43/255,43/255,1)
+                    }
+                    return Qt.rgba(50/255,50/255,50/255,1)
+                }else{
+                    if(root_mouse.containsMouse){
+                        if(checked){
+                            return Qt.rgba(1,1,1,1)
+                        }
+                        return Qt.rgba(222/255,222/255,222/255,1)
+                    }
+                    return Qt.rgba(1,1,1,1)
+                }
+            }
+        }
+
+        FluText{
+            text: root.text
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+    }
+
+    MouseArea{
+        id:root_mouse
+        hoverEnabled: true
+        anchors.fill: parent
+        enabled: !disabled
+        onClicked: {
+            root.clicked()
+        }
+    }
+
 }
+

src/controls/FluRectangle.qml

@@ -1,5 +1,54 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Shapes 1.15
+import QtGraphicalEffects 1.15
 
-Item {
+Item{
+    id:root
+    property var radius:[0,0,0,0]
+    property color color : "#FFFFFF"
+    property color borderColor:"transparent"
+    property int borderWidth: 1
+    default property alias contentItem: container.children
+
+    Rectangle{
+        id:container
+        width: root.width
+        height: root.height
+        visible: false
+        color:root.color
+
+    }
+
+    Shape {
+        id: shape
+        width: root.width
+        height: root.height
+        layer.enabled: true
+        layer.samples: 4
+        layer.smooth: true
+        visible: false
+        ShapePath {
+            startX: 0
+            startY: radius[0]
+            fillColor: color
+            strokeColor: borderColor
+            strokeWidth: borderWidth
+            PathQuad { x: radius[0]; y: 0; controlX: 0; controlY: 0 }
+            PathLine { x: shape.width - radius[1]; y: 0 }
+            PathQuad { x: shape.width; y: radius[1]; controlX: shape.width; controlY: 0 }
+            PathLine { x: shape.width; y: shape.height - radius[2] }
+            PathQuad { x: shape.width - radius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }
+            PathLine { x: radius[3]; y: shape.height }
+            PathQuad { x: 0; y: shape.height - radius[3]; controlX: 0; controlY: shape.height }
+            PathLine { x: 0; y: radius[0] }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: container
+        source: container
+        maskSource: shape
+    }
 
 }

src/controls/FluShadow.qml

@@ -0,0 +1,71 @@
+import QtQuick 2.15
+
+Item {
+
+    id:root
+
+    anchors.fill: parent
+    anchors.margins: -5
+    property color shadowColor: "#333333"
+    property int radius: 5
+    property bool isShadow: true
+
+
+    Rectangle{
+        id:react_background
+        width: root.width - 8
+        height: root.height - 8
+        anchors.centerIn: parent
+        radius: root.radius
+        color:"#00000000"
+        opacity:  0.25
+        border.width: 1
+        border.color : Qt.lighter(shadowColor,1.1)
+    }
+
+    Rectangle{
+        width: root.width - 6
+        height: root.height - 6
+        anchors.centerIn: parent
+        radius: root.radius
+        color:"#00000000"
+        border.width: 1
+        opacity:  0.2
+        border.color : Qt.lighter(shadowColor,1.2)
+    }
+
+    Rectangle{
+        width: root.width - 4
+        height: root.height - 4
+        anchors.centerIn: parent
+        radius: root.radius
+        color:"#00000000"
+        border.width: 1
+        opacity: 0.15
+        border.color : Qt.lighter(shadowColor,1.3)
+    }
+
+    Rectangle{
+        width: root.width - 2
+        height: root.height - 2
+        anchors.centerIn: parent
+        radius: root.radius
+        color:"#00000000"
+        border.width: 1
+        opacity: 0.1
+        border.color : Qt.lighter(shadowColor,1.4)
+    }
+
+    Rectangle{
+        width: root.width
+        height: root.height
+        anchors.centerIn: parent
+        radius: root.radius
+        color:"#00000000"
+        border.width: 1
+        opacity:0.05
+        border.color : Qt.lighter(shadowColor,1.5)
+    }
+
+
+}

src/controls/FluSlider.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluText.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.15
-
+import FluentUI 1.0
 
 Text {
 
@@ -18,57 +18,55 @@ Text {
 
     property int fontStyle: FluText.Body
     property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
-
     property int pixelSize : 14
 
     color: textColor
 
-    Component.onCompleted: {
+    font.bold: {
-        setFontStyle(fontStyle)
-    }
-
-    onStyleChanged: {
-        setFontStyle(fontStyle)
-    }
-
-    function setFontStyle(fontStyle) {
         switch (fontStyle) {
         case FluText.Display:
-                font.bold = true
+            return true
-                font.pixelSize = text.pixelSize * 4
-                break
         case FluText.TitleLarge:
-                font.bold = true
+            return true
-                font.pixelSize = text.pixelSize * 2
-                break
         case FluText.Title:
-                font.bold = true
+            return true
-                font.pixelSize = text.pixelSize * 1.5
-                break
         case FluText.Subtitle:
-                font.bold = true
+            return true
-                font.pixelSize = text.pixelSize * 0.9
-                break
         case FluText.BodyLarge:
-                font.bold = false
+            return false
-                font.pixelSize = text.pixelSize * 1.1
-                break
         case FluText.BodyStrong:
-                font.bold = true
+            return true
-                font.pixelSize = text.pixelSize * 1.0
-                break
         case FluText.Body:
-                font.bold = false
+            return false
-                font.pixelSize = text.pixelSize
-                break
         case FluText.Caption:
-                font.bold = false
+            return false
-                font.pixelSize = text.pixelSize * 0.8
-                break
         default:
-                font.pixelSize = text.pixelSize * 1.0
+            return false
-                break
         }
     }
 
+    font.pixelSize: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return text.pixelSize * 4
+        case FluText.TitleLarge:
+            return text.pixelSize * 2
+        case FluText.Title:
+            return text.pixelSize * 1.5
+        case FluText.Subtitle:
+            return text.pixelSize * 0.9
+        case FluText.BodyLarge:
+            return text.pixelSize * 1.1
+        case FluText.BodyStrong:
+            return text.pixelSize * 1.0
+        case FluText.Body:
+            return text.font.pixelSize = 14
+        case FluText.Caption:
+            return text.pixelSize * 0.8
+        default:
+            return text.pixelSize * 1.0
+        }
+    }
+
+
 }

src/controls/FluTextBox.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.15
+import QtQuick 2.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluTimePicker.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Shapes 1.15
+import FluentUI 1.0
 
 Item {
 

src/controls/FluToggleSwitch.qml

@@ -1,10 +1,11 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.0
+import FluentUI 1.0
 
 Switch {
     id: root
     property color checkedColor: "#0064B0"
-    signal clicked2
+    property var onClickFunc
     width: 40
     implicitWidth: 40
     height: 20
@@ -24,10 +25,13 @@ Switch {
                 }
                 return "#323232"
             }else{
+                if(root.checked){
+                    return checkedColor
+                }
                 if(switch_mouse.containsMouse){
                     return "#F4F4F4"
                 }
-                return root.checked ? checkedColor : "white"
+                return  "#FFFFFF"
             }
         }
         border.width: 1
@@ -52,7 +56,11 @@ Switch {
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
-            root.clicked2()
+            if(root.onClickFunc){
+                root.onClickFunc()
+            }else{
+                root.checked = !root.checked
+            }
         }
     }
 }

src/controls/FluTooltip.qml

@@ -0,0 +1,27 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+ToolTip {
+    id:tool_tip
+
+    contentItem: FluText {
+        text: tool_tip.text
+        font: tool_tip.font
+        padding: 4
+        wrapMode: Text.WrapAnywhere
+    }
+
+    background: Rectangle{
+        anchors.fill: parent
+        color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
+        radius: 5
+        layer.enabled: true
+        layer.effect: DropShadow {
+             radius: 5
+             samples: 4
+             color: "#80000000"
+         }
+    }
+}

src/controls/FluWindow.qml

@@ -27,7 +27,7 @@ Rectangle {
 
     onIsMaxChanged: {
         if(isMax){
-            root.anchors.margins = 8
+            root.anchors.margins = 8*(1/Screen.devicePixelRatio)
             root.anchors.fill = parent
         }else{
             root.anchors.margins = 0
@@ -55,4 +55,25 @@ Rectangle {
         id:helper
     }
 
+    FluInfoBar{
+        id:infoBar
+        root: root
+    }
+
+
+    function showSuccess(text,duration,moremsg){
+        infoBar.showSuccess(text,duration,moremsg);
+    }
+    function showInfo(text,duration,moremsg){
+        infoBar.showInfo(text,duration,moremsg);
+    }
+    function showWarning(text,duration,moremsg){
+        infoBar.showWarning(text,duration,moremsg);
+    }
+    function showError(text,duration,moremsg){
+        infoBar.showError(text,duration,moremsg);
+    }
+
+
+
 }

src/res.qrc

@@ -18,5 +18,11 @@
         <file>controls/FluAppBar.qml</file>
         <file>controls/FluRectangle.qml</file>
         <file>controls/FluWindow.qml</file>
+        <file>controls/FluInfoBar.qml</file>
+        <file>controls/FluObject.qml</file>
+        <file>controls/FluIcon.qml</file>
+        <file>controls/FluDivider.qml</file>
+        <file>controls/FluTooltip.qml</file>
+        <file>controls/FluShadow.qml</file>
     </qresource>
 </RCC>