update

2024-10-31 00:07:36 +08:00 · 2023-07-26 11:02:33 +08:00 · 2023-07-26 11:02:33 +08:00 · 502044ebd2
commit 502044ebd2
parent 5d902dc66e
5 changed files with 158 additions and 163 deletions
--- a/example/CMakeLists.txt
+++ b/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}
--- a/example/qml/page/T_TextBox.qml
+++ b/example/qml/page/T_TextBox.qml
@ -164,6 +164,7 @@ FluScrollablePage{
        Layout.fillWidth: true
        Layout.topMargin: -1
        code:'FluSpinBox{
+
 }'
    }

--- a/src/CMakeLists.txt
+++ b/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}
-        #在静态库编译中使用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}
-    )
+    set(PLUGIN_TARGET_NAME "")
 else()
-    qt_add_qml_module(${PROJECT_NAME}
-        #没有下面这行代码就会生成fluentuiplugin.dll与fluentuipluginplugin.dll两个动态库
-        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}
-    )
+    #如果是动态库，则使用插件目标作为其自己的支持目标来定义 QML 模块，在这种情况下，模块必须在运行时动态加载，并且不能由其他目标直接链接到
+    set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
 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
--- a/src/imports/FluentUI/Controls/FluSpinBox.qml
+++ b/src/imports/FluentUI/Controls/FluSpinBox.qml
@ -1,160 +1,157 @@
 import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
 import FluentUI

-Rectangle{
-    readonly property string displayText : d._displayText
+T.SpinBox {
+    id: control
    property bool disabled: false
-    property int from: 0
-    property int to: 99
-    property var validator: IntValidator {
+    property color normalColor: FluTheme.dark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(232/255,232/255,232/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(64/255,64/255,64/255,1) : Qt.rgba(224/255,224/255,224/255,1)
+    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
-    implicitHeight: 34
-    radius: 4
-    color: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
-    border.width: 1
-    border.color: FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
-    QtObject{
-        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
+
+    contentItem: TextInput {
+        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)
+        property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/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)
+        z: 2
        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: {
-                edit_loader.sourceComponent = com_edit
+            color: {
+                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
-    }
-    FluIconButton{
-        id:btn_up
-        width: 20
-        height: 20
-        iconSize: 16
-        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{
+
+
+    down.indicator: FluItem {
+        x: control.mirrored ? parent.width - width : 0
+        height: control.height
+        implicitWidth: 32
+        implicitHeight: 32
+        radius: [4,0,0,4]
+        Rectangle{
            anchors.fill: parent
-            onReleased: {
-                timer.stop()
-            }
-            TapHandler{
-                onTapped: {
-                    btn_up.clicked()
-                }
-                onCanceled: {
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = true
-                    timer.start()
-                }
+            color: {
+                if(control.down.pressed){
+                    return control.pressedColor
+                }
+                if(control.down.hovered){
+                    return control.hoverColor
+                }
+                return 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
+        }
    }
-    FluIconButton{
-        id:btn_down
-        iconSource: FluentIcons.ChevronDown
-        width: 20
-        height: 20
-        disabled: {
-            if(control.disabled === true){
-                return true
+
+    background: Rectangle {
+        implicitWidth: 136
+        radius: 4
+        border.width: 1
+        border.color: {
+            if(contentItem.disabled){
+                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
-        anchors{
-            verticalCenter: parent.verticalCenter
-            right: parent.right
-            rightMargin: 5
-        }
-        onClicked: {
-            d._displayText = String(Math.max(Number(d._displayText)-1,control.from))
-        }
-        MouseArea{
-            anchors.fill: parent
-            onReleased: {
-                timer.stop()
+        color: {
+            if(contentItem.disabled){
+                return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
            }
-            TapHandler{
-                onTapped: {
-                    btn_down.clicked()
-                }
-                onCanceled: {
-                    timer.stop()
-                }
-                onLongPressed: {
-                    timer.isUp = false
-                    timer.start()
-                }
+            if(contentItem.activeFocus){
+                return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
            }
-        }
-    }
-    Timer{
-        id:timer
-        property bool isUp : true
-        interval: 50
-        repeat: true
-        onTriggered: {
-            if(isUp){
-                btn_up.clicked()
-            }else{
-                btn_down.clicked()
+            if(contentItem.hovered){
+                return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
            }
+            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
        }
    }
 }
--- a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml
+++ b/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{