From 91be0e4da288a1be27381151aced1a855130372c Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Thu, 2 Mar 2023 12:20:16 +0800 Subject: [PATCH] update --- example/Installer.qml | 19 ++------ example/MainPage.qml | 8 ++++ example/T_Awesome.qml | 64 +++++++++++++++++++++++++++ example/T_TextBox.qml | 28 ++++++++++++ example/qml.qrc | 2 + src/FluApp.cpp | 22 ++++++++- src/FluApp.h | 6 +++ src/Fluent.cpp | 1 + src/FramelessView_win.cpp | 2 +- src/WindowHelper.cpp | 4 +- src/build-preset/plugins.qmltypes | 10 ++++- src/controls/FluMultiLineTextBox.qml | 22 +++++++++ src/controls/FluRectangle.qml | 1 - src/controls/FluTextBox.qml | 18 +++++++- src/controls/FluTextBoxBackground.qml | 43 ++++++++++++++++++ src/res.qrc | 2 + 16 files changed, 230 insertions(+), 22 deletions(-) create mode 100644 example/T_Awesome.qml create mode 100644 example/T_TextBox.qml create mode 100644 src/controls/FluMultiLineTextBox.qml create mode 100644 src/controls/FluTextBoxBackground.qml diff --git a/example/Installer.qml b/example/Installer.qml index 287f4b1..227ca83 100644 --- a/example/Installer.qml +++ b/example/Installer.qml @@ -35,22 +35,11 @@ FluWindow { Layout.leftMargin: 30 } - Rectangle{ - color: FluApp.isDark ? "#323232" : "#FFFFFF" - radius: 4 + FluTextBox{ + Layout.preferredHeight: 40 Layout.fillWidth: true - height: 40 - border.width: 1 - border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1) - - FluText{ - text:"C:\\Program Files\\RustDesk" - anchors{ - verticalCenter: parent.verticalCenter - left:parent.left - leftMargin: 14 - } - } + text:"C:\\Program Files\\RustDesk" + readOnly:true } FluButton{ diff --git a/example/MainPage.qml b/example/MainPage.qml index 9883898..6fac333 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -24,6 +24,10 @@ FluWindow { text:"Buttons" page:"qrc:/T_Buttons.qml" } + ListElement{ + text:"TextBox" + page:"qrc:/T_TextBox.qml" + } ListElement{ text:"ToggleSwitch" page:"qrc:/T_ToggleSwitch.qml" @@ -44,6 +48,10 @@ FluWindow { text:"Rectangle" page:"qrc:/T_Rectangle.qml" } + ListElement{ + text:"Awesome" + page:"qrc:/T_Awesome.qml" + } ListElement{ text:"Typography" page:"qrc:/T_Typography.qml" diff --git a/example/T_Awesome.qml b/example/T_Awesome.qml new file mode 100644 index 0000000..783bb67 --- /dev/null +++ b/example/T_Awesome.qml @@ -0,0 +1,64 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import FluentUI 1.0 + +Item { + + FluText{ + id:title + text:"Awesome" + fontStyle: FluText.TitleLarge + } + + FluTextBox{ + id:text_box + placeholderText: "搜索" + anchors{ + topMargin: 20 + top:title.bottom + } + } + + GridView{ + cellWidth: 120 + cellHeight: 60 + clip: true + model:FluApp.awesomelist() + anchors{ + topMargin: 10 + top:text_box.bottom + left: parent.left + right: parent.right + bottom: parent.bottom + } + delegate: Item { + + width: 120 + height: 60 + + FluIconButton{ + id:item_icon + icon:modelData.icon + anchors.horizontalCenter: parent.horizontalCenter + onClicked: { + var text ="FluentIcons."+modelData.name; + FluApp.clipText(text) + showSuccess("您复制了 "+text) + } + } + + FluText { + id:item_name + font.pixelSize: 10; + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: item_icon.bottom + text: modelData.name + } + + } + + + + } +} diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml new file mode 100644 index 0000000..a7b8449 --- /dev/null +++ b/example/T_TextBox.qml @@ -0,0 +1,28 @@ +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 + +Item { + + ColumnLayout{ + spacing: 5 + + FluText{ + text:"TextBox" + fontStyle: FluText.TitleLarge + } + FluTextBox{ + Layout.topMargin: 20 + placeholderText: "单行输入框" + Layout.preferredWidth: 300 + } + FluMultiLineTextBox{ + Layout.topMargin: 20 + Layout.preferredWidth: 300 + placeholderText: "多行输入框" + } + } +} diff --git a/example/qml.qrc b/example/qml.qrc index bafc44b..2cf0548 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -25,5 +25,7 @@ res/svg/avatar_11.svg res/svg/avatar_12.svg Installer.qml + T_Awesome.qml + T_TextBox.qml diff --git a/src/FluApp.cpp b/src/FluApp.cpp index 6e35c67..8b9a3d1 100644 --- a/src/FluApp.cpp +++ b/src/FluApp.cpp @@ -5,7 +5,8 @@ #include #include #include -#include "FramelessView.h" +#include +#include "Def.h" FluApp* FluApp::m_instance = nullptr; @@ -63,3 +64,22 @@ void FluApp::navigate(const QString& route){ bool FluApp::equalsWindow(FramelessView *view,QWindow *window){ return view->winId() == window->winId(); } + +QJsonArray FluApp::awesomelist() +{ + QJsonArray arr; + QMetaEnum enumType = Fluent_Awesome::staticMetaObject.enumerator(Fluent_Awesome::staticMetaObject.indexOfEnumerator("Fluent_AwesomeType")); + for(int i=0; i < enumType.keyCount(); ++i){ + QJsonObject obj; + QString name = enumType.key(i); + int icon = enumType.value(i); + obj.insert("name",name); + obj.insert("icon",icon); + arr.append(obj); + } + return arr; +} + +void FluApp::clipText(const QString& text){ + QGuiApplication::clipboard()->setText(text); +} diff --git a/src/FluApp.h b/src/FluApp.h index 177c8c6..14d420c 100644 --- a/src/FluApp.h +++ b/src/FluApp.h @@ -3,6 +3,7 @@ #include #include +#include #include #include "FramelessView.h" #include "stdafx.h" @@ -31,6 +32,11 @@ public: Q_INVOKABLE bool equalsWindow(FramelessView *view,QWindow *window); + Q_INVOKABLE QJsonArray awesomelist(); + + Q_INVOKABLE void clipText(const QString& text); + + private: static FluApp* m_instance; diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 9877987..0ee7da4 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -30,6 +30,7 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMultiLineTextBox.qml"),uri,major,minor,"FluMultiLineTextBox"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDropShadow.qml"),uri,major,minor,"FluDropShadow"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider"); diff --git a/src/FramelessView_win.cpp b/src/FramelessView_win.cpp index 4b8b62e..2104406 100644 --- a/src/FramelessView_win.cpp +++ b/src/FramelessView_win.cpp @@ -119,7 +119,7 @@ public: { borderless = enabled; //todo 有待研究这个 - ::SetWindowLongPtrW(handle, GWL_STYLE, static_cast(newStyle)); +// ::SetWindowLongPtrW(handle, GWL_STYLE, static_cast(newStyle)); // when switching between borderless and windowed, restore appropriate shadow state setShadow(handle, borderless_shadow && (newStyle != Style::windowed)); diff --git a/src/WindowHelper.cpp b/src/WindowHelper.cpp index 55ea320..039deb9 100644 --- a/src/WindowHelper.cpp +++ b/src/WindowHelper.cpp @@ -23,6 +23,6 @@ void WindowHelper::setMaximumSize(const QSize &size){ } void WindowHelper::refreshWindow(){ - this->window->setFlag(Qt::FramelessWindowHint,true); - this->window->setFlag(Qt::FramelessWindowHint,false); + this->window->setFlag(Qt::NoDropShadowWindowHint,true); + this->window->setFlag(Qt::NoDropShadowWindowHint,false); } diff --git a/src/build-preset/plugins.qmltypes b/src/build-preset/plugins.qmltypes index 0010522..ed6f484 100644 --- a/src/build-preset/plugins.qmltypes +++ b/src/build-preset/plugins.qmltypes @@ -1040,6 +1040,14 @@ Module { } Property { name: "children"; type: "QObject"; isList: true; isReadonly: true } } + Component { + prototype: "QQuickTextArea" + name: "FluentUI/FluMultiLineTextBox 1.0" + exports: ["FluentUI/FluMultiLineTextBox 1.0"] + exportMetaObjectRevisions: [0] + isComposite: true + defaultProperty: "data" + } Component { prototype: "QObject" name: "FluentUI/FluObject 1.0" @@ -1138,7 +1146,7 @@ Module { Property { name: "pixelSize"; type: "int" } } Component { - prototype: "QQuickItem" + prototype: "QQuickTextField" name: "FluentUI/FluTextBox 1.0" exports: ["FluentUI/FluTextBox 1.0"] exportMetaObjectRevisions: [0] diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml new file mode 100644 index 0000000..db43282 --- /dev/null +++ b/src/controls/FluMultiLineTextBox.qml @@ -0,0 +1,22 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import FluentUI 1.0 + +TextArea{ + id:input + width: 300 + color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A" + wrapMode: Text.WrapAnywhere + selectByMouse: true + selectionColor: { + if(FluApp.isDark){ + return Qt.rgba(76/255,160/255,224/255,1) + }else{ + return Qt.rgba(0/255,102/255,180/255,1) + } + } + background: FluTextBoxBackground{ + inputItem: input + } + +} diff --git a/src/controls/FluRectangle.qml b/src/controls/FluRectangle.qml index ea14824..5991a03 100644 --- a/src/controls/FluRectangle.qml +++ b/src/controls/FluRectangle.qml @@ -16,7 +16,6 @@ Item{ height: root.height visible: false color:root.color - } Canvas { diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index 17454a4..72690cd 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -1,6 +1,22 @@ import QtQuick 2.15 +import QtQuick.Controls 2.15 import FluentUI 1.0 -Item { +TextField{ + id:input + width: 300 + color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A" + selectionColor: { + if(FluApp.isDark){ + return Qt.rgba(76/255,160/255,224/255,1) + }else{ + return Qt.rgba(0/255,102/255,180/255,1) + } + } + selectByMouse: true + background: FluTextBoxBackground{ + inputItem: input + } } + diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml new file mode 100644 index 0000000..7517a6d --- /dev/null +++ b/src/controls/FluTextBoxBackground.qml @@ -0,0 +1,43 @@ +import QtQuick 2.15 +import QtGraphicalEffects 1.15 + +Rectangle{ + id:content + + property Item inputItem + + radius: 4 + layer.enabled: true + color: { + if(input.hovered){ + return FluApp.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) + } + return FluApp.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1) + } + layer.effect:OpacityMask { + maskSource: Rectangle { + width: content.width + height: content.height + radius: 4 + } + } + border.width: 1 + border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1) + Rectangle{ + width: parent.width + height: input.focus ? 3 : 1 + anchors.bottom: parent.bottom + color: { + if(FluApp.isDark){ + input.focus ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(166/255,166/255,166/255,1) + }else{ + return input.focus ? Qt.rgba(0/255,102/255,180/255,1) : Qt.rgba(183/255,183/255,183/255,1) + } + } + Behavior on height{ + NumberAnimation{ + duration: 200 + } + } + } +} diff --git a/src/res.qrc b/src/res.qrc index 4061d98..a77cc62 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -25,5 +25,7 @@ controls/FluTooltip.qml controls/FluDropShadow.qml controls/TFpsMonitor.qml + controls/FluTextBoxBackground.qml + controls/FluMultiLineTextBox.qml