From e29cb7433e8526648720b29af9d19b9f5aa1a119 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Mon, 20 Mar 2023 18:22:32 +0800 Subject: [PATCH] update --- example/T_Buttons.qml | 12 --- example/T_Rectangle.qml | 2 + example/T_TextBox.qml | 9 +++ example/T_ToggleSwitch.qml | 4 + example/T_Tooltip.qml | 75 +++++++++++++++++++ example/page/MainPage.qml | 7 ++ example/qml.qrc | 1 + src/Fluent.cpp | 1 + src/FramelessView.h | 3 - src/controls/FluAutoSuggestBox.qml | 12 ++- src/controls/FluBadge.qml | 11 +++ src/controls/FluMultiLineTextBox.qml | 12 ++- src/controls/FluShadow.qml | 2 +- src/controls/FluTextBox.qml | 12 ++- src/controls/FluTextBoxBackground.qml | 21 ++++-- src/controls/FluToggleSwitch.qml | 103 +++++++++++++++----------- src/res.qrc | 1 + 17 files changed, 220 insertions(+), 68 deletions(-) create mode 100644 example/T_Tooltip.qml create mode 100644 src/controls/FluBadge.qml diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index 8204d11..19eb373 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -40,8 +40,6 @@ FluScrollablePage{ FluToggleSwitch{ id:button_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } @@ -73,8 +71,6 @@ FluScrollablePage{ FluToggleSwitch{ id:filled_button_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } @@ -108,8 +104,6 @@ FluScrollablePage{ FluToggleSwitch{ id:icon_button_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } @@ -151,8 +145,6 @@ FluScrollablePage{ FluToggleSwitch{ id:drop_down_button_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } @@ -194,8 +186,6 @@ FluScrollablePage{ FluToggleSwitch{ id:radio_button_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } @@ -226,8 +216,6 @@ FluScrollablePage{ FluToggleSwitch{ id:check_box_switch Layout.alignment: Qt.AlignRight - } - FluText{ text:"Disabled" } } diff --git a/example/T_Rectangle.qml b/example/T_Rectangle.qml index af9feb5..6897204 100644 --- a/example/T_Rectangle.qml +++ b/example/T_Rectangle.qml @@ -21,6 +21,8 @@ FluScrollablePage{ height: 50 color:"#744da9" radius:[15,15,15,15] + FluBadge{ + } } FluRectangle{ width: 50 diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml index 7830571..2b9cb1e 100644 --- a/example/T_TextBox.qml +++ b/example/T_TextBox.qml @@ -13,17 +13,26 @@ FluScrollablePage{ Layout.topMargin: 20 placeholderText: "单行输入框" Layout.preferredWidth: 300 + disabled:toggle_switch.selected } FluMultiLineTextBox{ Layout.topMargin: 20 Layout.preferredWidth: 300 placeholderText: "多行输入框" + disabled:toggle_switch.selected } FluAutoSuggestBox{ Layout.topMargin: 20 values:generateRandomNames(100) placeholderText: "AutoSuggestBox" Layout.preferredWidth: 300 + disabled:toggle_switch.selected + } + + FluToggleSwitch{ + id:toggle_switch + text:"Disabled" + Layout.topMargin: 20 } function generateRandomNames(numNames) { diff --git a/example/T_ToggleSwitch.qml b/example/T_ToggleSwitch.qml index 8523cde..b730336 100644 --- a/example/T_ToggleSwitch.qml +++ b/example/T_ToggleSwitch.qml @@ -12,4 +12,8 @@ FluScrollablePage{ FluToggleSwitch{ Layout.topMargin: 20 } + FluToggleSwitch{ + Layout.topMargin: 20 + text:"Disabled" + } } diff --git a/example/T_Tooltip.qml b/example/T_Tooltip.qml new file mode 100644 index 0000000..ce6da79 --- /dev/null +++ b/example/T_Tooltip.qml @@ -0,0 +1,75 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +FluScrollablePage{ + + title:"TextBox" + + FluText{ + Layout.topMargin: 20 + text:"鼠标悬停不动，弹出Tooltip" + } + + + FluArea{ + width: parent.width + Layout.topMargin: 20 + height: 68 + paddings: 10 + + Column{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + FluText{ + text:"FluIconButton的text属性自带Tooltip效果" + } + FluIconButton{ + iconSource:FluentIcons.ChromeCloseContrast + iconSize: 15 + text:"删除" + onClicked:{ + showSuccess("点击IconButton") + } + } + } + } + + FluArea{ + width: parent.width + Layout.topMargin: 20 + height: 68 + paddings: 10 + + Column{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + FluText{ + text:"给一个Button添加Tooltip效果" + } + FluButton{ + id:button_1 + text:"删除" + onClicked:{ + showSuccess("点击一个Button") + } + FluTooltip{ + visible: button_1.hovered + text:button_1.text + delay: 1000 + } + } + } + } + + +} diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml index d86aaf8..a87df03 100644 --- a/example/page/MainPage.qml +++ b/example/page/MainPage.qml @@ -123,6 +123,13 @@ FluWindow { } } + FluPaneItem{ + title:"Tooltip" + onTap:{ + nav_view.push("qrc:/T_Tooltip.qml") + } + } + FluPaneItem{ title:"Menu" onTap:{ diff --git a/example/qml.qrc b/example/qml.qrc index 136840a..6f21880 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -40,5 +40,6 @@ res/image/banner_3.jpg res/image/logo_openai.png page/ChatPage.qml + T_Tooltip.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 386bcf7..3c21506 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -35,6 +35,7 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluBadge.qml"),uri,major,minor,"FluBadge"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluContentPage.qml"),uri,major,minor,"FluContentPage"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollablePage.qml"),uri,major,minor,"FluScrollablePage"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemHeader.qml"),uri,major,minor,"FluPaneItemHeader"); diff --git a/src/FramelessView.h b/src/FramelessView.h index a120307..61d07fb 100644 --- a/src/FramelessView.h +++ b/src/FramelessView.h @@ -4,9 +4,6 @@ #include #include -//无边框窗口，主要用来实现自定义标题栏。 -//Windows平台支持拖动和改变大小，支持Aero效果 -//非Windows平台，去掉边框，不做其它处理。由Qml模拟resize和拖动。 class FramelessViewPrivate; class FramelessView : public QQuickView { diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index 8704f84..e73ce6a 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -8,11 +8,18 @@ TextField{ property int fontStyle: FluText.Body property int pixelSize : FluTheme.textSize property int iconSource: 0 + property bool disabled: false signal itemClicked(string data) id:input width: 300 - color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + enabled: !disabled + color: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } + return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) + } selectionColor: { if(FluTheme.isDark){ return FluTheme.primaryColor.lighter @@ -22,6 +29,9 @@ TextField{ } renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering placeholderTextColor: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } if(focus){ return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) } diff --git a/src/controls/FluBadge.qml b/src/controls/FluBadge.qml new file mode 100644 index 0000000..30828f2 --- /dev/null +++ b/src/controls/FluBadge.qml @@ -0,0 +1,11 @@ +import QtQuick 2.15 + +Item { + + property bool isDot: false + + Rectangle{ + + } + +} diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml index dae21ae..52708c0 100644 --- a/src/controls/FluMultiLineTextBox.qml +++ b/src/controls/FluMultiLineTextBox.qml @@ -6,10 +6,17 @@ TextArea{ property int fontStyle: FluText.Body property int pixelSize : FluTheme.textSize + property bool disabled: false id:input width: 300 - color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + color: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } + return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) + } + enabled: !disabled wrapMode: Text.WrapAnywhere renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering selectByMouse: true @@ -24,6 +31,9 @@ TextArea{ inputItem: input } placeholderTextColor: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } if(focus){ return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) } diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml index 7e8863a..490718a 100644 --- a/src/controls/FluShadow.qml +++ b/src/controls/FluShadow.qml @@ -4,7 +4,7 @@ Item { id:root anchors.fill: parent anchors.margins: -4 - property color color: FluTheme.isDark ? "#FFFFFF" : "#000000" + property color color: FluTheme.isDark ? "#FFFFFF" : "#999999" property int radius: 4 diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index 11e9005..6f4ecfd 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -6,10 +6,17 @@ TextField{ property int fontStyle: FluText.Body property int pixelSize : FluTheme.textSize + property bool disabled: false id:input width: 300 - color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + enabled: !disabled + color: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } + return FluTheme.isDark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) + } renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering selectionColor: { if(FluTheme.isDark){ @@ -19,6 +26,9 @@ TextField{ } } placeholderTextColor: { + if(disabled){ + return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) + } if(focus){ return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1) } diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml index c02f0b5..ad31bae 100644 --- a/src/controls/FluTextBoxBackground.qml +++ b/src/controls/FluTextBoxBackground.qml @@ -9,10 +9,13 @@ Rectangle{ radius: 4 layer.enabled: true color: { - if(input.focus){ + if(inputItem.disabled){ + return FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) + } + if(inputItem.focus){ return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1) } - if(input.hovered){ + if(inputItem.hovered){ return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) } return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1) @@ -25,16 +28,22 @@ Rectangle{ } } border.width: 1 - border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1) + border.color: { + if(inputItem.disabled){ + return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1) + } + return FluTheme.isDark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1) + } Rectangle{ width: parent.width - height: input.focus ? 3 : 1 + height: inputItem.focus ? 3 : 1 anchors.bottom: parent.bottom + visible: !inputItem.disabled color: { if(FluTheme.isDark){ - input.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) + inputItem.focus ? FluTheme.primaryColor.lighter : Qt.rgba(166/255,166/255,166/255,1) }else{ - return input.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) + return inputItem.focus ? FluTheme.primaryColor.dark : Qt.rgba(183/255,183/255,183/255,1) } } Behavior on height{ diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index b1bc0c7..ad627a8 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -1,6 +1,7 @@ import QtQuick 2.0 import QtQuick.Controls 2.0 import FluentUI 1.0 +import QtQuick.Layouts 1.15 Button { @@ -8,10 +9,8 @@ Button { property var clickFunc id: control - width: 40 - implicitWidth: 40 height: 20 - implicitHeight: 20 + implicitHeight: height focusPolicy:Qt.TabFocus Keys.onSpacePressed: control.visualFocus&&clicked() onClicked: { @@ -21,50 +20,68 @@ Button { } selected = !selected } - background : Rectangle { - width: control.width - height: control.height - radius: height / 2 - FluFocusRectangle{ - visible: control.visualFocus - radius: 20 - } - color: { - if(FluTheme.isDark){ - if(selected){ - return FluTheme.primaryColor.dark - } - if(hovered){ - return "#3E3E3C" - } - return "#323232" - }else{ - if(selected){ - return FluTheme.primaryColor.dark - } - if(hovered){ - return "#F4F4F4" - } - return "#FFFFFF" - } - } - border.width: 1 - border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" + + contentItem: Item{} + + background : RowLayout{ + spacing: 0 Rectangle { - x: selected ? control.implicitWidth - width - 4 : 4 - width: control.height - 8 - height: control.height - 8 - radius: width / 2 - scale: hovered ? 1.2 : 1.0 - anchors.verticalCenter: parent.verticalCenter - color: selected ? "#FFFFFF" : "#666666" - Behavior on x { - NumberAnimation { duration: 200 } + id:control_backgound + width: 40 + height: control.height + radius: height / 2 + smooth: true + antialiasing: true + FluFocusRectangle{ + visible: control.visualFocus + radius: 20 } - Behavior on scale { - NumberAnimation { duration: 150 } + color: { + if(FluTheme.isDark){ + if(selected){ + return FluTheme.primaryColor.dark + } + if(hovered){ + return "#3E3E3C" + } + return "#323232" + }else{ + if(selected){ + return FluTheme.primaryColor.dark + } + if(hovered){ + return "#F4F4F4" + } + return "#FFFFFF" + } + } + border.width: 1 + border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" + Rectangle { + x: selected ? control_backgound.width - width - 4 : 4 + width: control.height - 8 + height: control.height - 8 + radius: width / 2 + antialiasing: true + scale: hovered ? 1.2 : 1.0 + smooth: true + anchors.verticalCenter: parent.verticalCenter + color: selected ? "#FFFFFF" : "#666666" + Behavior on x { + NumberAnimation { duration: 200 } + } + Behavior on scale { + NumberAnimation { duration: 150 } + } } } + + FluText{ + text: control.text + Layout.leftMargin: 5 + visible: text !== "" + } + } } diff --git a/src/res.qrc b/src/res.qrc index da22a17..287a769 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -48,5 +48,6 @@ controls/FluCalendarDatePicker.qml controls/FluFocusRectangle.qml controls/FluCarousel.qml + controls/FluBadge.qml