From bdf4da81dddae120e68974b80a1d03516ce71eba Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Thu, 9 Mar 2023 15:49:37 +0800 Subject: [PATCH] update --- example/T_TextBox.qml | 27 ++++++ src/Fluent.cpp | 1 + src/FramelessView_win.cpp | 3 +- src/controls/FluAutoSuggestBox.qml | 134 +++++++++++++++++++++++++++++ src/controls/FluContentDialog.qml | 2 + src/controls/FluMenu.qml | 1 + src/res.qrc | 1 + 7 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 src/controls/FluAutoSuggestBox.qml diff --git a/example/T_TextBox.qml b/example/T_TextBox.qml index dcb2dee..4245bb1 100644 --- a/example/T_TextBox.qml +++ b/example/T_TextBox.qml @@ -31,6 +31,33 @@ Item { Layout.preferredWidth: 300 placeholderText: "多行输入框" } + FluAutoSuggestBox{ + Layout.topMargin: 20 + values:generateRandomNames(100) + placeholderText: "AutoSuggestBox" + Layout.preferredWidth: 300 + } } } + + function generateRandomNames(numNames) { + const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const names = []; + function generateRandomName() { + const nameLength = Math.floor(Math.random() * 5) + 4; + let name = ''; + for (let i = 0; i < nameLength; i++) { + const letterIndex = Math.floor(Math.random() * 26); + name += alphabet.charAt(letterIndex); + } + return name; + } + for (let i = 0; i < numNames; i++) { + const name = generateRandomName(); + names.push(name); + } + return names; + } + + } diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 2273622..17da8b0 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -33,6 +33,7 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(uri,major,minor,"WindowHelper"); qmlRegisterType(uri,major,minor,"FluColorSet"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluExpander.qml"),uri,major,minor,"FluExpander"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTreeView.qml"),uri,major,minor,"FluTreeView"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluContentDialog.qml"),uri,major,minor,"FluContentDialog"); diff --git a/src/FramelessView_win.cpp b/src/FramelessView_win.cpp index b7614e6..feaa7a3 100644 --- a/src/FramelessView_win.cpp +++ b/src/FramelessView_win.cpp @@ -16,7 +16,6 @@ public: FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate) { - setResizeMode(SizeRootObjectToView); refreshWindow(); setIsMax(windowState() == Qt::WindowMaximized); setIsFull(windowState() == Qt::WindowFullScreen); @@ -36,6 +35,8 @@ void FramelessView::refreshWindow(){ }else{ setFlags(Qt::Window); } + setResizeMode(SizeViewToRootObject); + setResizeMode(SizeRootObjectToView); } FramelessView::~FramelessView() diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml new file mode 100644 index 0000000..6fed5a6 --- /dev/null +++ b/src/controls/FluAutoSuggestBox.qml @@ -0,0 +1,134 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import FluentUI 1.0 + +TextField{ + id:input + width: 300 + property var values:[] + color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + selectionColor: { + if(FluTheme.isDark){ + return FluTheme.primaryColor.lighter + }else{ + return FluTheme.primaryColor.dark + } + } + rightPadding: 30 + selectByMouse: true + + background: FluTextBoxBackground{ + inputItem: input + + FluIconButton{ + icon:FluentIcons.FA_close + iconSize: 14 + width: 20 + height: 20 + opacity: 0.5 + visible: input.text !== "" + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 5 + } + onClicked:{ + input.text = "" + } + } + } + + Component.onCompleted: { + searchData() + } + + Popup{ + id:input_popup + visible: input.focus + y:input.height + onClosed: { + input.focus = false + } + background: Rectangle{ + width: input.width + radius: 4 + FluShadow{ + radius: 4 + } + color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) + height: 38*Math.min(Math.max(list_view.count,1),8) + ListView{ + id:list_view + signal closePopup + anchors.fill: parent + boundsBehavior: ListView.StopAtBounds + clip: true + header: Item{ + width: input.width + height: visible ? 38 : 0 + visible: list_view.count === 0 + FluText{ + text:"没有找到结果" + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 15 + } + } + } + ScrollBar.vertical: ScrollBar { } + delegate: Item{ + height: 38 + width: input.width + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(item_mouse.containsMouse){ + return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(234/255,234/255,234/255,1) + } + return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) + } + radius: 3 + MouseArea{ + id:item_mouse + anchors.fill: parent + hoverEnabled: true + onClicked: { + input_popup.close() + input.text = modelData + } + } + FluText{ + text:modelData + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 10 + } + } + } + } + } + } + } + + onTextChanged: { + searchData() + } + + function searchData(){ + var result = [] + values.map(function(item){ + if(item.indexOf(input.text)!==-1){ + result.push(item) + } + }) + list_view.model = result + } + +} + diff --git a/src/controls/FluContentDialog.qml b/src/controls/FluContentDialog.qml index 3c46977..dfbda0f 100644 --- a/src/controls/FluContentDialog.qml +++ b/src/controls/FluContentDialog.qml @@ -23,10 +23,12 @@ Popup { anchors.centerIn: Overlay.overlay closePolicy: Popup.CloseOnEscape background: Rectangle { + id:layout_content implicitWidth:minWidth implicitHeight: text_title.height + text_message.height + layout_actions.height color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1) radius:5 + FluShadow{ radius: 5 } diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml index bc46d64..18b1436 100644 --- a/src/controls/FluMenu.qml +++ b/src/controls/FluMenu.qml @@ -11,6 +11,7 @@ Popup { implicitHeight: container.height color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1) radius: 5 + FluShadow{ radius: 5 } diff --git a/src/res.qrc b/src/res.qrc index c5a458c..d530b18 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -35,5 +35,6 @@ controls/FluContentDialog.qml controls/FluTreeView.qml controls/FluExpander.qml + controls/FluAutoSuggestBox.qml