update

example/qml/page/T_Home.qml

@@ -41,7 +41,7 @@ FluScrollablePage{
         }
         FluText{
             text:"FluentUI Gallery"
-            fontStyle: FluText.TitleLarge
+            font: FluTextStyle.TitleLarge
             anchors{
                 top: parent.top
                 left: parent.left
@@ -101,7 +101,7 @@ FluScrollablePage{
                         }
                         FluText{
                             text: model.title
-                            fontStyle: FluText.Body
+                            font: FluTextStyle.Body
                             Layout.topMargin: 20
                             Layout.leftMargin: 20
                         }
@@ -184,7 +184,7 @@ FluScrollablePage{
                 FluText{
                     id:item_title
                     text:modelData.title
-                    fontStyle: FluText.BodyStrong
+                    font: FluTextStyle.BodyStrong
                     anchors{
                         left: item_icon.right
                         leftMargin: 20
@@ -198,7 +198,7 @@ FluScrollablePage{
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
-                    fontStyle: FluText.Caption
+                    font: FluTextStyle.Caption
                     maximumLineCount: 2
                     anchors{
                         left: item_title.left
@@ -236,7 +236,7 @@ FluScrollablePage{
 
     FluText{
         text: "Recently added samples"
-        fontStyle: FluText.Title
+        font: FluTextStyle.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
@@ -253,7 +253,7 @@ FluScrollablePage{
 
     FluText{
         text: "Recently updated samples"
-        fontStyle: FluText.Title
+        font: FluTextStyle.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }

example/qml/page/T_Rectangle.qml

@@ -67,7 +67,7 @@ FluScrollablePage{
             }
             FluText{
                 text:"配合图片使用"
-                fontStyle: FluText.SubTitle
+                font: FluTextStyle.SubTitle
                 Layout.topMargin: 20
             }
             RowLayout{

example/qml/page/T_Settings.qml

@@ -28,7 +28,7 @@ FluScrollablePage{
             }
             FluText{
                 text:lang.dark_mode
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
@@ -62,7 +62,7 @@ FluScrollablePage{
 
             FluText{
                 text:lang.navigation_view_display_mode
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
@@ -93,7 +93,7 @@ FluScrollablePage{
 
             FluText{
                 text:lang.locale
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
 

example/qml/page/T_Typography.qml

@@ -6,7 +6,7 @@ import FluentUI
 FluContentPage {
 
     title: "Typography"
-    property int textSize: FluTheme.textSize
+    property real textScale: 1
     leftPadding:10
     rightPadding:10
     bottomPadding:20
@@ -26,47 +26,49 @@ FluContentPage {
         paddings: 10
         ColumnLayout{
             spacing: 0
+            scale: textScale
+            transformOrigin: Item.TopLeft
             FluText{
+                id:text_Display
                 text:"Display"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Display
-                fontStyle: FluText.Display
             }
             FluText{
+                id:text_TitleLarge
                 text:"Title Large"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.TitleLarge
-                fontStyle: FluText.TitleLarge
             }
             FluText{
+                id:text_Title
                 text:"Title"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Title
-                fontStyle: FluText.Title
             }
             FluText{
+                id:text_Subtitle
                 text:"Subtitle"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Subtitle
-                fontStyle: FluText.SubTitle
             }
             FluText{
+                id:text_BodyStrong
                 text:"Body Strong"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.BodyStrong
-                fontStyle: FluText.BodyStrong
             }
             FluText{
+                id:text_Body
                 text:"Body"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Body
-                fontStyle: FluText.Body
             }
             FluText{
+                id:text_Caption
                 text:"Caption"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Caption
-                fontStyle: FluText.Caption
             }
         }
 
@@ -80,7 +82,7 @@ FluContentPage {
                 topMargin: 30
             }
             onValueChanged:{
-                textSize = value/100*6+FluTheme.textSize
+                textScale = 1+value/100
             }
         }
     }

example/qml/window/AboutWindow.qml

@@ -34,11 +34,11 @@ FluWindow {
             spacing: 14
             FluText{
                 text:"FluentUI"
-                fontStyle: FluText.Title
+                font: FluTextStyle.Title
             }
             FluText{
                 text:"v%1".arg(appInfo.version)
-                fontStyle: FluText.Body
+                font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }
         }

src/FluTextStyle.cpp

@@ -0,0 +1,38 @@
+#include "FluTextStyle.h"
+
+FluTextStyle::FluTextStyle(QObject *parent)
+    : QObject{parent}
+{
+    QFont caption;
+    caption.setPixelSize(12);
+    Caption(caption);
+
+    QFont body;
+    body.setPixelSize(14);
+    Body(body);
+
+    QFont bodyStrong;
+    bodyStrong.setPixelSize(14);
+    bodyStrong.setBold(true);
+    BodyStrong(bodyStrong);
+
+    QFont subtitle;
+    subtitle.setPixelSize(20);
+    subtitle.setBold(true);
+    Subtitle(subtitle);
+
+    QFont title;
+    title.setPixelSize(28);
+    title.setBold(true);
+    Title(title);
+
+    QFont titleLarge;
+    titleLarge.setPixelSize(40);
+    titleLarge.setBold(true);
+    TitleLarge(titleLarge);
+
+    QFont display;
+    display.setPixelSize(68);
+    display.setBold(true);
+    Display(display);
+}

src/FluTextStyle.h

@@ -0,0 +1,27 @@
+#ifndef FLUTEXTSTYLE_H
+#define FLUTEXTSTYLE_H
+
+#include <QObject>
+#include <QtQml/qqml.h>
+#include <QFont>
+#include "stdafx.h"
+
+class FluTextStyle : public QObject
+{
+    Q_OBJECT
+public:
+    explicit FluTextStyle(QObject *parent = nullptr);
+    Q_PROPERTY_AUTO(QFont,Caption);
+    Q_PROPERTY_AUTO(QFont,Body);
+    Q_PROPERTY_AUTO(QFont,BodyStrong);
+    Q_PROPERTY_AUTO(QFont,Subtitle);
+    Q_PROPERTY_AUTO(QFont,Title);
+    Q_PROPERTY_AUTO(QFont,TitleLarge);
+    Q_PROPERTY_AUTO(QFont,Display);
+    QML_NAMED_ELEMENT(FluTextStyle)
+    QML_SINGLETON
+signals:
+
+};
+
+#endif // FLUTEXTSTYLE_H

src/FluTheme.cpp

@@ -12,7 +12,6 @@ FluTheme::FluTheme(QObject *parent)
         Q_EMIT darkChanged();
     });
     primaryColor(FluApp::fluColors->Blue());
-    textSize(13);
     nativeText(false);
     frameless(true);
     darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);

src/FluTheme.h

@@ -37,11 +37,6 @@ class FluTheme : public QObject
      */
     Q_PROPERTY_AUTO(bool,nativeText);
 
-    /**
-     * @brief textSize 文字大小
-     */
-    Q_PROPERTY_AUTO(int,textSize);
-
     QML_NAMED_ELEMENT(FluTheme)
     QML_SINGLETON
 public:

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -55,9 +55,6 @@ Rectangle{
             leftMargin: 10
         }
         color:root.textColor
-        fontStyle: FluText.Title
-        font.pixelSize: 14
-        font.bold: true
     }
 
     RowLayout{

src/imports/FluentUI/Controls/FluButton.qml

@@ -18,6 +18,7 @@ Button {
     enabled: !disabled
     focusPolicy:Qt.TabFocus
     Keys.onSpacePressed: control.visualFocus&&clicked()
+    font:FluTextStyle.Body
 
     background: Rectangle{
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
@@ -38,6 +39,7 @@ Button {
         text: control.text
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        font: control.font
         color: {
             if(FluTheme.dark){
                 if(disabled){

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -65,7 +65,7 @@ Popup {
 
         FluText{
             id:text_title
-            fontStyle: FluText.TitleLarge
+            font: FluTextStyle.TitleLarge
             text:title
             topPadding: 20
             leftPadding: 20
@@ -80,7 +80,7 @@ Popup {
 
         FluText{
             id:text_message
-            fontStyle: FluText.Body
+            font: FluTextStyle.Body
             wrapMode: Text.WrapAnywhere
             text:message
             topPadding: 14

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -17,7 +17,7 @@ Item {
 
     FluText{
         id:text_title
-        fontStyle: FluText.TitleLarge
+        font: FluTextStyle.TitleLarge
         anchors{
             top: parent.top
             topMargin: control.topPadding

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -4,9 +4,7 @@ import FluentUI
 
 TextField {
 
-    property int fontStyle: FluText.Body
     property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
-    property int pixelSize : FluTheme.textSize
 
     id:control
     color: textColor
@@ -27,46 +25,7 @@ TextField {
         implicitWidth: text_metrics.width+10
         implicitHeight: text_metrics.height
     }
-    font.bold: {
+    font:FluTextStyle.Body
-        switch (fontStyle) {
-        case FluText.Display:
-            return true
-        case FluText.TitleLarge:
-            return true
-        case FluText.Title:
-            return true
-        case FluText.SubTitle:
-            return true
-        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 text.pixelSize * 4.857
-        case FluText.TitleLarge:
-            return text.pixelSize * 2.857
-        case FluText.Title:
-            return text.pixelSize * 2
-        case FluText.SubTitle:
-            return text.pixelSize * 1.428
-        case FluText.Body:
-            return text.pixelSize * 1.0
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
-        case FluText.Caption:
-            return text.pixelSize * 0.857
-        default:
-            return text.pixelSize * 1.0
-        }
-    }
     TapHandler {
         acceptedButtons: Qt.RightButton
         onTapped: control.echoMode !== TextInput.Password && menu.popup()

src/imports/FluentUI/Controls/FluFilledButton.qml

@@ -19,6 +19,7 @@ Button {
     rightPadding:15
     Keys.onSpacePressed: control.visualFocus&&clicked()
     focusPolicy:Qt.TabFocus
+    font:FluTextStyle.Body
     background: Rectangle{
         radius: 4
         FluFocusRectangle{
@@ -37,6 +38,7 @@ Button {
     }
     contentItem: FluText {
         text: control.text
+        font: control.font
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: {

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -5,8 +5,6 @@ import FluentUI
 
 TextArea{
 
-    property int fontStyle: FluText.Body
-    property int pixelSize : FluTheme.textSize
     property bool disabled: false
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
@@ -23,6 +21,7 @@ TextArea{
         }
         return normalColor
     }
+    font:FluTextStyle.Body
     wrapMode: Text.WrapAnywhere
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
@@ -35,46 +34,6 @@ TextArea{
         }
         return placeholderNormalColor
     }
-    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.BodyStrong:
-            return true
-        case FluText.Body:
-            return false
-        case FluText.Caption:
-            return false
-        default:
-            return false
-        }
-    }
-    font.pixelSize: {
-        switch (fontStyle) {
-        case FluText.Display:
-            return text.pixelSize * 4.857
-        case FluText.TitleLarge:
-            return text.pixelSize * 2.857
-        case FluText.Title:
-            return text.pixelSize * 2
-        case FluText.SubTitle:
-            return text.pixelSize * 1.428
-        case FluText.Body:
-            return text.pixelSize * 1.0
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
-        case FluText.Caption:
-            return text.pixelSize * 0.857
-        default:
-            return text.pixelSize * 1.0
-        }
-    }
     selectByMouse: true
     background: FluTextBoxBackground{ inputItem: control }
     TapHandler {

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -148,7 +148,7 @@ Item {
             width: layout_list.width
             FluText{
                 text:model.title
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 anchors{
                     bottom: parent.bottom
                     left:parent.left
@@ -535,7 +535,7 @@ Item {
                 Layout.alignment: Qt.AlignVCenter
                 text:control.title
                 Layout.leftMargin: 12
-                fontStyle: FluText.Body
+                font: FluTextStyle.Body
             }
         }
     }

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -5,8 +5,6 @@ import FluentUI
 
 TextField{
 
-    property int fontStyle: FluText.Body
-    property int pixelSize : FluTheme.textSize
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -24,6 +22,7 @@ TextField{
         }
         return normalColor
     }
+    font:FluTextStyle.Body
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
@@ -36,46 +35,6 @@ TextField{
         }
         return placeholderNormalColor
     }
-    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.BodyStrong:
-            return true
-        case FluText.Body:
-            return false
-        case FluText.Caption:
-            return false
-        default:
-            return false
-        }
-    }
-    font.pixelSize: {
-        switch (fontStyle) {
-        case FluText.Display:
-            return text.pixelSize * 4.857
-        case FluText.TitleLarge:
-            return text.pixelSize * 2.857
-        case FluText.Title:
-            return text.pixelSize * 2
-        case FluText.SubTitle:
-            return text.pixelSize * 1.428
-        case FluText.Body:
-            return text.pixelSize * 1.0
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
-        case FluText.Caption:
-            return text.pixelSize * 0.857
-        default:
-            return text.pixelSize * 1.0
-        }
-    }
     selectByMouse: true
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{

src/imports/FluentUI/Controls/FluPivot.qml

@@ -57,8 +57,7 @@ Item {
             contentItem: Item{
                 FluText {
                     id:item_title
-                    fontStyle: FluText.Title
+                    font: FluTextStyle.Title
-                    font.bold: false
                     text: modelData.title
                     anchors.centerIn: parent
                     color: {

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -18,6 +18,7 @@ Button {
             visible: control.visualFocus
         }
     }
+    font:FluTextStyle.Body
     Keys.onSpacePressed: control.visualFocus&&clicked()
     contentItem: RowLayout{
         Rectangle{
@@ -97,6 +98,7 @@ Button {
         FluText{
             text: control.text
             Layout.alignment: Qt.AlignVCenter
+            font: control.font
         }
     }
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -18,7 +18,7 @@ Item {
 
     FluText{
         id:text_title
-        fontStyle: FluText.TitleLarge
+        font: FluTextStyle.TitleLarge
         visible: text !== ""
         height: visible?implicitHeight:0
         anchors{

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -58,7 +58,7 @@ Item{
             visible: statusMode === FluStatusView.Empty
             FluText{
                 text:"空空如也"
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.alignment: Qt.AlignHCenter
             }
         }
@@ -77,7 +77,7 @@ Item{
             anchors.centerIn: parent
             FluText{
                 text:"页面出错了..."
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.alignment: Qt.AlignHCenter
             }
             FluFilledButton{

src/imports/FluentUI/Controls/FluTableView.qml

@@ -99,7 +99,7 @@ Item {
                                     left: parent.left
                                     leftMargin: 14
                                 }
-                                fontStyle: FluText.BodyStrong
+                                font: FluTextStyle.BodyStrong
                             }
                             FluDivider{
                                 width: 1

src/imports/FluentUI/Controls/FluText.qml

@@ -4,62 +4,11 @@ import FluentUI
 
 Text {
 
-    enum FontStyle {
-        Display,
-        TitleLarge,
-        Title,
-        SubTitle,
-        BodyStrong,
-        Body,
-        Caption
-    }
-
-    property int fontStyle: FluText.Body
     property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
-    property int pixelSize : FluTheme.textSize
 
     id:text
     color: textColor
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    font.bold: {
+    font: FluTextStyle.Body
-        switch (fontStyle) {
-        case FluText.Display:
-            return true
-        case FluText.TitleLarge:
-            return true
-        case FluText.Title:
-            return true
-        case FluText.SubTitle:
-            return true
-        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 text.pixelSize * 4.857
-        case FluText.TitleLarge:
-            return text.pixelSize * 2.857
-        case FluText.Title:
-            return text.pixelSize * 2
-        case FluText.SubTitle:
-            return text.pixelSize * 1.428
-        case FluText.Body:
-            return text.pixelSize * 1.0
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
-        case FluText.Caption:
-            return text.pixelSize * 0.857
-        default:
-            return text.pixelSize * 1.0
-        }
-    }
 
 }

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -5,8 +5,6 @@ import FluentUI
 
 TextField{
 
-    property int fontStyle: FluText.Body
-    property int pixelSize : FluTheme.textSize
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -24,6 +22,7 @@ TextField{
         }
         return normalColor
     }
+    font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: FluTheme.primaryColor.lightest
     placeholderTextColor: {
@@ -35,46 +34,6 @@ TextField{
         }
         return placeholderNormalColor
     }
-    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.BodyStrong:
-            return true
-        case FluText.Body:
-            return false
-        case FluText.Caption:
-            return false
-        default:
-            return false
-        }
-    }
-    font.pixelSize: {
-        switch (fontStyle) {
-        case FluText.Display:
-            return text.pixelSize * 4.857
-        case FluText.TitleLarge:
-            return text.pixelSize * 2.857
-        case FluText.Title:
-            return text.pixelSize * 2
-        case FluText.SubTitle:
-            return text.pixelSize * 1.428
-        case FluText.Body:
-            return text.pixelSize * 1.0
-        case FluText.BodyStrong:
-            return text.pixelSize * 1.0
-        case FluText.Caption:
-            return text.pixelSize * 0.857
-        default:
-            return text.pixelSize * 1.0
-        }
-    }
     selectByMouse: true
     rightPadding: icon_end.visible ? 50 : 30
     background: FluTextBoxBackground{

src/imports/FluentUI/Controls/FluTooltip.qml

@@ -6,10 +6,11 @@ ToolTip {
 
     id:tool_tip
 
+//    property var font: FluTextStyle.Body
+
     contentItem: FluText {
         text: tool_tip.text
-        font: tool_tip.font
+//        font: tool_tip.font
-        fontStyle: FluText.Body
         padding: 4
         wrapMode: Text.WrapAnywhere
     }