update

example/CMakeLists.txt

@@ -8,6 +8,9 @@ if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
+#设置插件位置，不然import example有时候会爆红
+set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
+
 #判断FluentUI库类型
 if(FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
@@ -87,7 +90,7 @@ endif()
 
 #添加qml模块
 qt_add_qml_module(example
-    URI example
+    URI "example"
     VERSION 1.0
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}

example/qml/page/T_TextBox.qml

@@ -164,6 +164,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluSpinBox{
+
 }'
     }
 

src/CMakeLists.txt

@@ -58,32 +58,26 @@ else()
     set(LIB_TYPE "SHARED")
 endif()
 qt_add_library(${PROJECT_NAME} ${LIB_TYPE})
+
 if (FLUENTUI_BUILD_STATIC_LIB)
-    qt_add_qml_module(${PROJECT_NAME}
+    set(PLUGIN_TARGET_NAME "")
-        #在静态库编译中使用PLUGIN_TARGET会导致链接失败
-        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
-        VERSION 1.0
-        URI "FluentUI"
-        TYPEINFO "plugins.qmltypes"
-        SOURCES ${sources_files} fluentui.rc
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-    )
 else()
-    qt_add_qml_module(${PROJECT_NAME}
+    #如果是动态库，则使用插件目标作为其自己的支持目标来定义 QML 模块，在这种情况下，模块必须在运行时动态加载，并且不能由其他目标直接链接到
-        #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
+    set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
-        PLUGIN_TARGET fluentuiplugin
-        OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
-        VERSION 1.0
-        URI "FluentUI"
-        #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
-        TYPEINFO "plugins.qmltypes"
-        SOURCES ${sources_files} fluentui.rc
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-    )
 endif()
 
+qt_add_qml_module(${PROJECT_NAME}
+    PLUGIN_TARGET ${PLUGIN_TARGET_NAME}
+    OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
+    VERSION 1.0
+    URI "FluentUI"
+    #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
+    TYPEINFO "plugins.qmltypes"
+    SOURCES ${sources_files} fluentui.rc
+    QML_FILES ${qml_files}
+    RESOURCES ${resource_files}
+)
+
 #链接库
 target_link_libraries(${PROJECT_NAME} PUBLIC
     Qt::CorePrivate

src/imports/FluentUI/Controls/FluSpinBox.qml

@@ -1,160 +1,157 @@
 import QtQuick
-import QtQuick.Layouts
+import QtQuick.Controls.impl
-import QtQuick.Controls
+import QtQuick.Templates as T
 import FluentUI
 
-Rectangle{
+T.SpinBox {
-    readonly property string displayText : d._displayText
+    id: control
     property bool disabled: false
-    property int from: 0
+    property color normalColor: FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(232/255,232/255,232/255,1)
-    property int to: 99
+    property color hoverColor: FluTheme.dark ? Qt.rgba(64/255,64/255,64/255,1) : Qt.rgba(224/255,224/255,224/255,1)
-    property var validator: IntValidator {
+    property color pressedColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(216/255,216/255,216/255,1)
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             up.implicitIndicatorHeight, down.implicitIndicatorHeight)
+    leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
+    rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
+    enabled: !disabled
+    validator: IntValidator {
+        locale: control.locale.name
         bottom: Math.min(control.from, control.to)
         top: Math.max(control.from, control.to)
     }
-    id:control
+
-    implicitWidth: 200
+    contentItem: TextInput {
-    implicitHeight: 34
+        property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
-    radius: 4
+        property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-    color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+        property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
-    border.width: 1
+        property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
-    border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+        property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-    QtObject{
+        z: 2
-        id:d
-        property string _displayText: "0"
-    }
-    Component{
-        id:com_edit
-        FluTextBox{
-            rightPadding: 80
-            iconRightMargin: 55
-            disabled: control.disabled
-            validator: control.validator
-            text: d._displayText
-            Component.onCompleted: {
-                forceActiveFocus()
-            }
-            onCommit: {
-                var number = Number(text)
-                if(number>=control.from && number<=control.to){
-                    d._displayText = String(number)
-                }
-                edit_loader.sourceComponent = null
-            }
-            onActiveFocusChanged: {
-                if(!activeFocus){
-                    edit_loader.sourceComponent = null
-                }
-            }
-        }
-    }
-    FluTextBox{
-        id:text_number
-        anchors.fill: parent
-        readOnly: true
-        rightPadding: 80
-        disabled: control.disabled
         text: control.displayText
-        MouseArea{
+        clip: width < implicitWidth
+        padding: 6
+        font: control.font
+        color: {
+            if(!enabled){
+                return disableColor
+            }
+            return normalColor
+        }
+        selectionColor: Qt.alpha(FluTheme.primaryColor.lightest,0.6)
+        selectedTextColor: color
+        horizontalAlignment: Qt.AlignHCenter
+        verticalAlignment: Qt.AlignVCenter
+        readOnly: !control.editable
+        validator: control.validator
+        inputMethodHints: control.inputMethodHints
+        Rectangle{
+            width: parent.width
+            height: contentItem.activeFocus ? 3 : 1
+            anchors.bottom: parent.bottom
+            visible: contentItem.enabled
+            color: {
+                if(FluTheme.dark){
+                    contentItem.activeFocus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
+                }else{
+                    return contentItem.activeFocus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
+                }
+            }
+            Behavior on height{
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 83
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    up.indicator: FluItem {
+        x: control.mirrored ? 0 : control.width - width
+        height: control.height
+        implicitWidth: 32
+        implicitHeight: 32
+        radius: [0,4,4,0]
+        Rectangle{
             anchors.fill: parent
-            onClicked: {
+            color: {
-                edit_loader.sourceComponent = com_edit
+                if(control.up.pressed){
+                    return control.pressedColor
+                }
+                if(control.up.hovered){
+                    return control.hoverColor
+                }
+                return control.normalColor
             }
         }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 2
+            height: parent.width / 3
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
     }
-    Loader{
+
-        id:edit_loader
+
-        anchors.fill: parent
+    down.indicator: FluItem {
-    }
+        x: control.mirrored ? parent.width - width : 0
-    FluIconButton{
+        height: control.height
-        id:btn_up
+        implicitWidth: 32
-        width: 20
+        implicitHeight: 32
-        height: 20
+        radius: [4,0,0,4]
-        iconSize: 16
+        Rectangle{
-        disabled: {
-            if(control.disabled===true){
-                return true
-            }
-            return Number(control.displayText) === control.to
-        }
-        iconSource: FluentIcons.ChevronUp
-        anchors{
-            verticalCenter: parent.verticalCenter
-            right: parent.right
-            rightMargin: 30
-        }
-        onClicked: {
-            d._displayText = String(Math.min(Number(d._displayText)+1,control.to))
-        }
-        MouseArea{
             anchors.fill: parent
-            onReleased: {
+            color: {
-                timer.stop()
+                if(control.down.pressed){
-            }
+                    return control.pressedColor
-            TapHandler{
+                }
-                onTapped: {
+                if(control.down.hovered){
-                    btn_up.clicked()
+                    return control.hoverColor
-                }
+                }
-                onCanceled: {
+                return normalColor
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = true
-                    timer.start()
-                }
             }
         }
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width / 3
+            height: 2
+            color: enabled ? FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1) : FluColors.Grey90
+        }
     }
-    FluIconButton{
+
-        id:btn_down
+    background: Rectangle {
-        iconSource: FluentIcons.ChevronDown
+        implicitWidth: 136
-        width: 20
+        radius: 4
-        height: 20
+        border.width: 1
-        disabled: {
+        border.color: {
-            if(control.disabled === true){
+            if(contentItem.disabled){
-                return true
+                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
             }
-            return Number(control.displayText) === control.from
+            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
         }
-        iconSize: 16
+        color: {
-        anchors{
+            if(contentItem.disabled){
-            verticalCenter: parent.verticalCenter
+                return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
-            right: parent.right
-            rightMargin: 5
-        }
-        onClicked: {
-            d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
-        }
-        MouseArea{
-            anchors.fill: parent
-            onReleased: {
-                timer.stop()
             }
-            TapHandler{
+            if(contentItem.activeFocus){
-                onTapped: {
+                return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
-                    btn_down.clicked()
-                }
-                onCanceled: {
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = false
-                    timer.start()
-                }
             }
-        }
+            if(contentItem.hovered){
-    }
+                return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    Timer{
-        id:timer
-        property bool isUp : true
-        interval: 50
-        repeat: true
-        onTriggered: {
-            if(isUp){
-                btn_up.clicked()
-            }else{
-                btn_down.clicked()
             }
+            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
         }
     }
 }

src/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -12,7 +12,7 @@ Rectangle{
         if(inputItem.disabled){
             return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
-        if(inputItem.focus){
+        if(inputItem.activeFocus){
             return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
         }
         if(inputItem.hovered){
@@ -36,14 +36,14 @@ Rectangle{
     }
     Rectangle{
         width: parent.width
-        height: inputItem.focus ? 3 : 1
+        height: inputItem.activeFocus ? 3 : 1
         anchors.bottom: parent.bottom
         visible: !inputItem.disabled
         color: {
             if(FluTheme.dark){
-                inputItem.focus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
+                inputItem.activeFocus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
             }else{
-                return inputItem.focus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
+                return inputItem.activeFocus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
             }
         }
         Behavior on height{