update

example/MainPage.qml

@@ -11,7 +11,7 @@ FluWindow {
     width: 800
     height: 600
     title: "FluentUI"
-    minimumWidth: 600
+    minimumWidth: 500
     minimumHeight: 400
 
     FluAppBar{
@@ -123,7 +123,6 @@ FluWindow {
             height: 38
             width: nav_list.width
 
-
             Rectangle{
                 radius: 4
                 anchors{
@@ -167,7 +166,6 @@ FluWindow {
                 FluText{
                     text:model.text
                     anchors.centerIn: parent
-                    fontStyle: FluText.Caption
                 }
 
             }

example/T_Buttons.qml

@@ -108,7 +108,7 @@ Item {
                         delegate:  FluRadioButton{
                             checked : repeater.selecIndex===index
                             disabled:radio_button_switch.checked
-                            text:"RodioButton_"+index
+                            text:"Radio Button_"+index
                             onClicked:{
                                 repeater.selecIndex = index
                             }

example/T_Expander.qml

@@ -43,7 +43,7 @@ Item {
                             model: 3
                             delegate:  FluRadioButton{
                                 checked : repeater.selecIndex===index
-                                text:"RodioButton_"+index
+                                text:"Radio Button_"+index
                                 onClicked:{
                                     repeater.selecIndex = index
                                 }

example/T_Typography.qml

@@ -4,11 +4,15 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 Item {
+
+    property int textSize: 13
+
     FluText{
         id:title
         text:"Typography"
         fontStyle: FluText.TitleLarge
     }
+
     ScrollView{
         clip: true
         width: parent.width
@@ -18,40 +22,72 @@ Item {
             bottom: parent.bottom
         }
         ColumnLayout{
-            spacing: 5
+            spacing: 0
             FluText{
                 text:"Display"
                 Layout.topMargin: 20
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.Display
             }
             FluText{
                 text:"Title Large"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.TitleLarge
             }
             FluText{
                 text:"Title"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.Title
             }
             FluText{
                 text:"Subtitle"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.Subtitle
             }
             FluText{
                 text:"Body Large"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.BodyLarge
             }
             FluText{
                 text:"Body Strong"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.BodyStrong
             }
             FluText{
                 text:"Body"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.Body
             }
             FluText{
                 text:"Caption"
+                padding: 0
+                pixelSize: textSize
                 fontStyle: FluText.Caption
             }
         }
     }
+
+
+    FluSlider{
+        orientation:FluSlider.Vertical
+        anchors{
+            right: parent.right
+            rightMargin: 30
+            top: parent.top
+            topMargin: 30
+        }
+        onValueChanged:{
+           textSize = value/100*16+8
+        }
+        value: 31
+    }
+
 }

src/FluTheme.cpp

@@ -16,6 +16,7 @@ FluTheme::FluTheme(QObject *parent)
     : QObject{parent}
 {
     primaryColor(FluColors::getInstance()->Blue());
+    textSize(13);
     isFrameless(true);
     isDark(false);
 }

src/FluTheme.h

@@ -11,6 +11,7 @@ class FluTheme : public QObject
     Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
     Q_PROPERTY_AUTO(bool,isFrameless);
     Q_PROPERTY_AUTO(bool,isDark);
+    Q_PROPERTY_AUTO(int,textSize);
 public:
     explicit FluTheme(QObject *parent = nullptr);
     static FluTheme *getInstance();

src/Fluent.cpp

@@ -73,9 +73,12 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
 {
     Q_UNUSED(engine)
     Q_UNUSED(uri)
+#ifdef Q_OS_WIN
     QFont font;
     font.setFamily("Microsoft YaHei");
     QGuiApplication::setFont(font);
+    QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
+#endif
     QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
     FluApp* app = FluApp::getInstance();
     engine->rootContext()->setContextProperty("FluApp",app);

src/controls/FluAutoSuggestBox.qml

@@ -3,9 +3,13 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 TextField{
+
+    property var values:[]
+    property int fontStyle: FluText.Body
+    property int pixelSize : FluTheme.textSize
+
     id:input
     width: 300
-    property var values:[]
     color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
     selectionColor: {
         if(FluTheme.isDark){
@@ -14,9 +18,58 @@ TextField{
             return FluTheme.primaryColor.dark
         }
     }
+    placeholderTextColor: {
+        if(focus){
+            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+        }
+        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+    }
     rightPadding: 30
     selectByMouse: true
-
+    font.bold: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return true
+        case FluText.TitleLarge:
+            return true
+        case FluText.Title:
+            return true
+        case FluText.Subtitle:
+            return true
+        case FluText.BodyLarge:
+            return false
+        case FluText.BodyStrong:
+            return true
+        case FluText.Body:
+            return false
+        case FluText.Caption:
+            return false
+        default:
+            return false
+        }
+    }
+    font.pixelSize: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return input.pixelSize * 4
+        case FluText.TitleLarge:
+            return input.pixelSize * 2
+        case FluText.Title:
+            return input.pixelSize * 1.5
+        case FluText.Subtitle:
+            return input.pixelSize * 0.9
+        case FluText.BodyLarge:
+            return input.pixelSize * 1.1
+        case FluText.BodyStrong:
+            return input.pixelSize * 1.0
+        case FluText.Body:
+            return input.pixelSize * 1.0
+        case FluText.Caption:
+            return input.pixelSize * 0.8
+        default:
+            return input.pixelSize * 1.0
+        }
+    }
     background: FluTextBoxBackground{
         inputItem: input
 
@@ -72,7 +125,7 @@ TextField{
                         anchors{
                             verticalCenter: parent.verticalCenter
                             left: parent.left
-                            leftMargin: 15
+                            leftMargin: 10
                         }
                     }
                 }
@@ -84,8 +137,6 @@ TextField{
                         anchors.fill: parent
                         anchors.topMargin: 2
                         anchors.bottomMargin: 2
-                        anchors.leftMargin: 5
-                        anchors.rightMargin: 5
                         color:  {
                             if(item_mouse.containsMouse){
                                 return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1)

src/controls/FluButton.qml

@@ -37,7 +37,6 @@ Rectangle {
     FluText {
         id: button_text
         text: button.text
-        font.pixelSize: 14
         leftPadding: button.startPadding
         rightPadding: button.endPadding
         topPadding: button.topPadding

src/controls/FluCheckBox.qml

@@ -32,8 +32,8 @@ Item {
     RowLayout{
         spacing: 4
         Rectangle{
-            width: 22
+            width: 20
-            height: 22
+            height: 20
             radius: 4
             border.color: {
                 if(disabled){

src/controls/FluExpander.qml

@@ -18,7 +18,7 @@ Item {
     Rectangle{
         id:layout_header
         width: parent.width
-        height: 50
+        height: 45
         radius: 4
         border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
         color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)

src/controls/FluMultiLineTextBox.qml

@@ -3,6 +3,10 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 TextArea{
+
+    property int fontStyle: FluText.Body
+    property int pixelSize : FluTheme.textSize
+
     id:input
     width: 300
     color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
@@ -18,5 +22,57 @@ TextArea{
     background: FluTextBoxBackground{
         inputItem: input
     }
+    placeholderTextColor: {
+        if(focus){
+            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+        }
+        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+    }
+    font.bold: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return true
+        case FluText.TitleLarge:
+            return true
+        case FluText.Title:
+            return true
+        case FluText.Subtitle:
+            return true
+        case FluText.BodyLarge:
+            return false
+        case FluText.BodyStrong:
+            return true
+        case FluText.Body:
+            return false
+        case FluText.Caption:
+            return false
+        default:
+            return false
+        }
+    }
+
+    font.pixelSize: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return input.pixelSize * 4
+        case FluText.TitleLarge:
+            return input.pixelSize * 2
+        case FluText.Title:
+            return input.pixelSize * 1.5
+        case FluText.Subtitle:
+            return input.pixelSize * 0.9
+        case FluText.BodyLarge:
+            return input.pixelSize * 1.1
+        case FluText.BodyStrong:
+            return input.pixelSize * 1.0
+        case FluText.Body:
+            return input.pixelSize * 1.0
+        case FluText.Caption:
+            return input.pixelSize * 0.8
+        default:
+            return input.pixelSize * 1.0
+        }
+    }
+
 
 }

src/controls/FluSlider.qml

@@ -6,8 +6,10 @@ Item{
 
     id:root
 
-    property int lineWidth: 5
+    property int lineSize: 5
+    property int size: 180
     property int dotSize: 26
+
     property int value: 50
 
     enum Orientation  {
@@ -22,6 +24,8 @@ Item{
 
     property bool isHorizontal: orientation === FluSlider.Horizontal
 
+    rotation: isHorizontal ? 0 : 180
+
     Component.onCompleted: {
         if(isHorizontal){
             dot.x =value/100*control.width - dotSize/2
@@ -38,8 +42,8 @@ Item{
 
     FluRectangle {
         id: control
-        width: isHorizontal ? 200 : root.lineWidth
+        width: isHorizontal ? size : root.lineSize
-        height:  isHorizontal ? root.lineWidth : 200
+        height:  isHorizontal ? root.lineSize : size
         radius: [3,3,3,3]
         clip: true
         anchors.verticalCenter: parent.verticalCenter
@@ -101,6 +105,7 @@ Item{
         FluTooltip{
             id:tool_tip
             text:String(root.value)
+            y: isHorizontal ? -40 : 32
         }
     }
 

src/controls/FluText.qml

@@ -3,7 +3,9 @@ import FluentUI 1.0
 
 Text {
 
-    id:text
+    property int fontStyle: FluText.Body
+    property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+    property int pixelSize : FluTheme.textSize
 
     enum FontStyle {
         Display,
@@ -16,12 +18,8 @@ Text {
         Caption
     }
 
-    property int fontStyle: FluText.Body
+    id:text
-    property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
-    property int pixelSize : 14
-
     color: textColor
-
     font.bold: {
         switch (fontStyle) {
         case FluText.Display:
@@ -44,7 +42,6 @@ Text {
             return false
         }
     }
-
     font.pixelSize: {
         switch (fontStyle) {
         case FluText.Display:
@@ -68,5 +65,4 @@ Text {
         }
     }
 
-
 }

src/controls/FluTextBox.qml

@@ -3,6 +3,10 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 TextField{
+
+    property int fontStyle: FluText.Body
+    property int pixelSize : FluTheme.textSize
+
     id:input
     width: 300
     color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
@@ -13,6 +17,56 @@ TextField{
             return FluTheme.primaryColor.dark
         }
     }
+    placeholderTextColor: {
+        if(focus){
+            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+        }
+        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+    }
+    font.bold: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return true
+        case FluText.TitleLarge:
+            return true
+        case FluText.Title:
+            return true
+        case FluText.Subtitle:
+            return true
+        case FluText.BodyLarge:
+            return false
+        case FluText.BodyStrong:
+            return true
+        case FluText.Body:
+            return false
+        case FluText.Caption:
+            return false
+        default:
+            return false
+        }
+    }
+    font.pixelSize: {
+        switch (fontStyle) {
+        case FluText.Display:
+            return input.pixelSize * 4
+        case FluText.TitleLarge:
+            return input.pixelSize * 2
+        case FluText.Title:
+            return input.pixelSize * 1.5
+        case FluText.Subtitle:
+            return input.pixelSize * 0.9
+        case FluText.BodyLarge:
+            return input.pixelSize * 1.1
+        case FluText.BodyStrong:
+            return input.pixelSize * 1.0
+        case FluText.Body:
+            return input.pixelSize * 1.0
+        case FluText.Caption:
+            return input.pixelSize * 0.8
+        default:
+            return input.pixelSize * 1.0
+        }
+    }
     selectByMouse: true
     background: FluTextBoxBackground{
         inputItem: input

src/controls/FluTextBoxBackground.qml

@@ -9,6 +9,9 @@ Rectangle{
     radius: 4
     layer.enabled: true
     color: {
+        if(input.focus){
+            return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
+        }
         if(input.hovered){
             return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }

src/controls/FluTreeView.qml

@@ -198,8 +198,6 @@ Rectangle {
                                     }
                                 }
                             }
-
-
                         }
 
                         checkClicked:function(){
@@ -239,8 +237,8 @@ Rectangle {
                     FluText {
                         text:  item_layout.text
                         Layout.alignment: Qt.AlignVCenter
-                        topPadding: 10
+                        topPadding: 7
-                        bottomPadding: 10
+                        bottomPadding: 7
                     }
                 }
             }