From 502044ebd2d058f3658e9eb1630e56bb772b7302 Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Wed, 26 Jul 2023 11:02:33 +0800 Subject: [PATCH] update --- example/CMakeLists.txt | 5 +- example/qml/page/T_TextBox.qml | 1 + src/CMakeLists.txt | 38 ++- src/imports/FluentUI/Controls/FluSpinBox.qml | 269 +++++++++--------- .../Controls/FluTextBoxBackground.qml | 8 +- 5 files changed, 158 insertions(+), 163 deletions(-) diff --git a/example/CMakeLists.txt b/example/CMakeLists.txt index 3b1ef573..10734dbf 100644 --- 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} diff --git a/example/qml/page/T_TextBox.qml b/example/qml/page/T_TextBox.qml index 8b3159ca..768fb481 100644 --- 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{ + }' } diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt index e9381a07..7a957cf4 100644 --- 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 diff --git a/src/imports/FluentUI/Controls/FluSpinBox.qml b/src/imports/FluentUI/Controls/FluSpinBox.qml index 0e9c64cf..2ebf5cd7 100644 --- 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) } } } diff --git a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/imports/FluentUI/Controls/FluTextBoxBackground.qml index 202cd75d..835e9ad8 100644 --- 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{