From 5279a2c7b2c01c0b18b6c2a0c6ae45ec0aa999c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Sun, 2 Apr 2023 14:05:54 +0800 Subject: [PATCH] update --- example/T_FlipView.qml | 78 +++++++++++++++++++ example/global/ItemsOriginal.qml | 17 ++++- example/page/AboutPage.qml | 2 +- example/qml.qrc | 1 + src/Fluent.cpp | 1 + src/controls/FluAutoSuggestBox.qml | 116 +---------------------------- src/controls/FluFlipView.qml | 116 +++++++++++++++++++++++++++++ src/controls/FluPaneItem.qml | 1 + src/controls/FluTextBox.qml | 34 ++++++++- src/res.qrc | 1 + 10 files changed, 247 insertions(+), 120 deletions(-) create mode 100644 example/T_FlipView.qml create mode 100644 src/controls/FluFlipView.qml diff --git a/example/T_FlipView.qml b/example/T_FlipView.qml new file mode 100644 index 00000000..4b9fe2e3 --- /dev/null +++ b/example/T_FlipView.qml @@ -0,0 +1,78 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import QtQuick.Window +import FluentUI + +FluScrollablePage{ + + title:"FlipView" + leftPadding:10 + rightPadding:10 + bottomPadding:20 + + + FluArea{ + width: parent.width + height: 340 + paddings: 10 + Layout.topMargin: 20 + ColumnLayout{ + anchors.verticalCenter: parent.verticalCenter + FluText{ + text:"水平方向的FlipView" + } + FluFlipView{ + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + sourceSize: Qt.size(400,300) + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_2.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_3.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + } + } + } + + FluArea{ + width: parent.width + height: 340 + paddings: 10 + Layout.topMargin: 20 + ColumnLayout{ + anchors.verticalCenter: parent.verticalCenter + FluText{ + text:"垂直方向的FlipView" + } + FluFlipView{ + vertical:true + Image{ + source: "qrc:/res/image/banner_1.jpg" + asynchronous: true + sourceSize: Qt.size(400,300) + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_2.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + Image{ + source: "qrc:/res/image/banner_3.jpg" + asynchronous: true + fillMode:Image.PreserveAspectCrop + } + } + } + } + +} diff --git a/example/global/ItemsOriginal.qml b/example/global/ItemsOriginal.qml index 295b93c2..fa1fabe8 100644 --- a/example/global/ItemsOriginal.qml +++ b/example/global/ItemsOriginal.qml @@ -176,6 +176,7 @@ FluObject{ title:"TabView" image:"qrc:/res/image/control/TabView.png" recentlyAdded:true + order:1 desc:"A control that displays a collection of tabs thatcan be used to display several documents." onTap:{ navigationView.push("qrc:/T_TabView.qml") @@ -187,16 +188,24 @@ FluObject{ navigationView.push("qrc:/T_TreeView.qml") } } - FluPaneItem{ title:"MultiWindow" onTap:{ navigationView.push("qrc:/T_MultiWindow.qml") } } + FluPaneItem{ + title:"FlipView" + image:"qrc:/res/image/control/FlipView.png" + recentlyAdded:true + order:2 + desc:"Presents a collection of items that the user canflip through, one item at a time." + onTap:{ + navigationView.push("qrc:/T_FlipView.qml") + } + } } - FluPaneItemExpander{ title:"Theming" icon:FluentIcons.Brightness @@ -228,6 +237,7 @@ FluObject{ title:"MediaPlayer" image:"qrc:/res/image/control/MediaPlayerElement.png" recentlyAdded:true + order:0 desc:"A control to display video and image content." onTap:{ navigationView.push("qrc:/T_MediaPlayer.qml") @@ -251,6 +261,7 @@ FluObject{ } } } + arr.sort(function(o1,o2){ return o2.order-o1.order }) return arr } @@ -289,7 +300,7 @@ FluObject{ item.tap() navigationView.setCurrentIndex(i) if(item.parent){ - item.parent.isExpand = true + item.parent.isExpand = true } return } diff --git a/example/page/AboutPage.qml b/example/page/AboutPage.qml index a87e3ce7..2cc30fdc 100644 --- a/example/page/AboutPage.qml +++ b/example/page/AboutPage.qml @@ -36,7 +36,7 @@ FluWindow { fontStyle: FluText.Title } FluText{ - text:"v1.1.8" + text:"v1.1.9" fontStyle: FluText.Body Layout.alignment: Qt.AlignBottom } diff --git a/example/qml.qrc b/example/qml.qrc index 09cfb5a1..8c85501d 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -153,5 +153,6 @@ global/qmldir global/ItemsFooter.qml page/MediaPage.qml + T_FlipView.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index f0d8e866..69fe42d7 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/FluFlipView.qml"),uri,major,minor,"FluFlipView"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea"); diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index 40af7097..f633ef00 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -2,133 +2,20 @@ import QtQuick.Controls import FluentUI -TextField{ - +FluTextBox{ property var items:[] - property int fontStyle: FluText.Body property string emptyText: "没有找到结果" - property int pixelSize : FluTheme.textSize - property int iconSource: 0 - property bool disabled: false signal itemClicked(var data) signal handleClicked - 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) QtObject{ id:d property bool flagVisible: true } id:control width: 300 - enabled: !disabled - color: { - if(disabled){ - return disableColor - } - return normalColor - } - selectionColor: FluTheme.primaryColor.lightest - renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering - placeholderTextColor: { - if(disabled){ - return placeholderDisableColor - } - if(focus){ - return placeholderFocusColor - } - return placeholderNormalColor - } - rightPadding: icon_right.visible ? 50 : 30 - selectByMouse: true - Keys.onUpPressed: { - list_view.currentIndex = Math.max(list_view.currentIndex-1,0) - } - Keys.onDownPressed: { - list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1) - } - Keys.onEnterPressed:handleClicked() - Keys.onReturnPressed:handleClicked() - font.bold: { - switch (fontStyle) { - case FluText.Display: - return true - case FluText.TitleLarge: - return true - case FluText.Title: - return true - case FluText.SubTitle: - return true - case FluText.BodyStrong: - return true - case FluText.Body: - return false - case FluText.Caption: - return false - default: - return false - } - } - font.pixelSize: { - switch (fontStyle) { - case FluText.Display: - return text.pixelSize * 4.857 - case FluText.TitleLarge: - return text.pixelSize * 2.857 - case FluText.Title: - return text.pixelSize * 2 - case FluText.SubTitle: - return text.pixelSize * 1.428 - case FluText.Body: - return text.pixelSize * 1.0 - case FluText.BodyStrong: - return text.pixelSize * 1.0 - case FluText.Caption: - return text.pixelSize * 0.857 - default: - return text.pixelSize * 1.0 - } - } - - FluIconButton{ - iconSource:FluentIcons.ChromeClose - iconSize: 10 - width: 20 - height: 20 - opacity: 0.5 - visible: control.text !== "" - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: icon_right.visible ? 25 : 5 - } - onClicked:{ - control.text = "" - } - } - - background: FluTextBoxBackground{ - inputItem: control - FluIcon{ - id:icon_right - iconSource: control.iconSource - iconSize: 15 - opacity: 0.5 - visible: control.iconSource != 0 - anchors{ - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 5 - } - } - } - Component.onCompleted: { loadData() } - Popup{ id:control_popup y:control.height @@ -269,4 +156,3 @@ TextField{ } } - diff --git a/src/controls/FluFlipView.qml b/src/controls/FluFlipView.qml new file mode 100644 index 00000000..a08ccead --- /dev/null +++ b/src/controls/FluFlipView.qml @@ -0,0 +1,116 @@ +import QtQuick +import QtQuick.Controls +import FluentUI + +Item{ + + property bool vertical: false + default property alias content : swipe.contentData + property alias currentIndex: swipe.currentIndex + + id:control + width: 400 + height: 300 + implicitWidth: width + implicitHeight: height + + QtObject{ + id:d + property bool flag: true + } + + MouseArea{ + anchors.fill: parent + preventStealing: true + onWheel: + (wheel)=>{ + if(!d.flag) + return + if (wheel.angleDelta.y > 0){ + btn_start.clicked() + }else{ + btn_end.clicked() + } + d.flag = false + timer.restart() + } + } + + Timer{ + id:timer + interval: 250 + onTriggered: { + d.flag = true + } + } + + SwipeView { + id:swipe + clip: true + interactive: false + orientation:control.vertical ? Qt.Vertical : Qt.Horizontal + anchors.fill: parent + } + + Button{ + id:btn_start + height: vertical ? 20 : 40 + width: vertical ? 40 : 20 + anchors{ + left: vertical ? undefined : parent.left + leftMargin: vertical ? undefined : 2 + verticalCenter: vertical ? undefined : parent.verticalCenter + horizontalCenter: !vertical ? undefined : parent.horizontalCenter + top: !vertical ? undefined :parent.top + topMargin: !vertical ? undefined :2 + } + background: Rectangle{ + radius: 4 + color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) + } + contentItem:FluIcon{ + iconSource: vertical ? FluentIcons.CaretUpSolid8 : FluentIcons.CaretLeftSolid8 + width: 10 + height: 10 + iconSize: 10 + iconColor: btn_start.hovered ? FluColors.Grey220 : FluColors.Grey120 + anchors.centerIn: parent + } + visible: swipe.currentIndex !==0 + onClicked: { + swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0) + } + } + + Button{ + id:btn_end + height: vertical ? 20 : 40 + width: vertical ? 40 : 20 + anchors{ + right: vertical ? undefined : parent.right + rightMargin: vertical ? undefined : 2 + verticalCenter: vertical ? undefined : parent.verticalCenter + horizontalCenter: !vertical ? undefined : parent.horizontalCenter + bottom: !vertical ? undefined :parent.bottom + bottomMargin: !vertical ? undefined :2 + } + background: Rectangle{ + radius: 4 + color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97) + } + visible: swipe.currentIndex !== swipe.count - 1 + contentItem:FluIcon{ + iconSource: vertical ? FluentIcons.CaretDownSolid8 : FluentIcons.CaretRightSolid8 + width: 10 + height: 10 + iconSize: 10 + iconColor: btn_end.hovered ? FluColors.Grey220 : FluColors.Grey120 + anchors.centerIn: parent + } + onClicked: { + swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1) + } + } + +} + diff --git a/src/controls/FluPaneItem.qml b/src/controls/FluPaneItem.qml index 89197944..52408c06 100644 --- a/src/controls/FluPaneItem.qml +++ b/src/controls/FluPaneItem.qml @@ -5,6 +5,7 @@ QtObject { readonly property string key : FluApp.uuid() readonly property int flag : 0 property string title + property int order : 0 property int icon property bool recentlyAdded: false property bool recentlyUpdated: false diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml index d50ae233..2d4291ba 100644 --- a/src/controls/FluTextBox.qml +++ b/src/controls/FluTextBox.qml @@ -7,6 +7,7 @@ TextField{ property int fontStyle: FluText.Body property int pixelSize : FluTheme.textSize property bool disabled: false + property int iconSource: 0 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) @@ -74,7 +75,38 @@ TextField{ } } selectByMouse: true - background: FluTextBoxBackground{ inputItem: control } + rightPadding: icon_end.visible ? 50 : 30 + background: FluTextBoxBackground{ + inputItem: control + FluIcon{ + id:icon_end + iconSource: control.iconSource + iconSize: 15 + opacity: 0.5 + visible: control.iconSource != 0 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 5 + } + } + } + FluIconButton{ + iconSource:FluentIcons.ChromeClose + iconSize: 10 + width: 20 + height: 20 + opacity: 0.5 + visible: control.text !== "" + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: icon_end.visible ? 25 : 5 + } + onClicked:{ + control.text = "" + } + } TapHandler { acceptedButtons: Qt.RightButton onTapped: control.echoMode !== TextInput.Password && menu.popup() diff --git a/src/res.qrc b/src/res.qrc index 922023aa..bb02654d 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -61,5 +61,6 @@ controls/FluPaneItemExpander.qml controls/FluTextBoxMenu.qml controls/FluMultilineTextBox.qml + controls/FluFlipView.qml