From eb1744d5f80a4c73500d7c49765c32f572923f17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Sat, 11 Mar 2023 14:43:07 +0800 Subject: [PATCH] update --- src/Fluent.cpp | 7 +- src/controls/FluAutoSuggestBox.qml | 10 +- src/controls/FluButton.qml | 4 +- src/controls/FluCalendarDatePicker.qml | 5 + src/controls/FluCalenderView.qml | 5 + src/controls/FluDatePicker.qml | 5 + src/controls/FluExpander.qml | 9 +- src/controls/FluIconButton.qml | 4 +- src/controls/FluNavigationView.qml | 2 +- src/controls/FluTimePicker.qml | 352 ++++++++++++++++++++++++- src/res.qrc | 3 + 11 files changed, 391 insertions(+), 15 deletions(-) create mode 100644 src/controls/FluCalendarDatePicker.qml create mode 100644 src/controls/FluCalenderView.qml create mode 100644 src/controls/FluDatePicker.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 87288392..59c807e5 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -42,6 +42,12 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemSeparator.qml"),uri,major,minor,"FluPaneItemSeparator"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluNavigationView.qml"),uri,major,minor,"FluNavigationView"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalendarDatePicker.qml"),uri,major,minor,"FluCalendarDatePicker"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCalenderView.qml"),uri,major,minor,"FluCalenderView"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDatePicker.qml"),uri,major,minor,"FluDatePicker"); + qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker"); + + 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"); @@ -71,7 +77,6 @@ void Fluent::registerTypes(const char *uri){ qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluSlider.qml"),uri,major,minor,"FluSlider"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTextBox.qml"),uri,major,minor,"FluTextBox"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluText.qml"),uri,major,minor,"FluText"); - qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTimePicker.qml"),uri,major,minor,"FluTimePicker"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFilledButton.qml"),uri,major,minor,"FluFilledButton"); qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleSwitch.qml"),uri,major,minor,"FluToggleSwitch"); diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml index 2bf416e5..62bbb602 100644 --- a/src/controls/FluAutoSuggestBox.qml +++ b/src/controls/FluAutoSuggestBox.qml @@ -75,7 +75,7 @@ TextField{ FluIconButton{ icon:FluentIcons.ChromeClose - iconSize: 14 + iconSize: 10 width: 20 height: 20 opacity: 0.5 @@ -108,7 +108,7 @@ TextField{ FluShadow{ radius: 4 } - color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) + color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) height: 38*Math.min(Math.max(list_view.count,1),8) ListView{ id:list_view @@ -137,11 +137,13 @@ TextField{ 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(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) } - return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(243/255,241/255,240/255,1) + return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) } radius: 3 MouseArea{ diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml index 757d33c2..cd8ee4d5 100644 --- a/src/controls/FluButton.qml +++ b/src/controls/FluButton.qml @@ -61,8 +61,10 @@ Rectangle { id:button_mouse anchors.fill: parent hoverEnabled: true - enabled: !disabled onClicked: { + if(disabled){ + return + } button.clicked() } } diff --git a/src/controls/FluCalendarDatePicker.qml b/src/controls/FluCalendarDatePicker.qml new file mode 100644 index 00000000..68c21087 --- /dev/null +++ b/src/controls/FluCalendarDatePicker.qml @@ -0,0 +1,5 @@ +import QtQuick 2.15 + +Item { + +} diff --git a/src/controls/FluCalenderView.qml b/src/controls/FluCalenderView.qml new file mode 100644 index 00000000..68c21087 --- /dev/null +++ b/src/controls/FluCalenderView.qml @@ -0,0 +1,5 @@ +import QtQuick 2.15 + +Item { + +} diff --git a/src/controls/FluDatePicker.qml b/src/controls/FluDatePicker.qml new file mode 100644 index 00000000..68c21087 --- /dev/null +++ b/src/controls/FluDatePicker.qml @@ -0,0 +1,5 @@ +import QtQuick 2.15 + +Item { + +} diff --git a/src/controls/FluExpander.qml b/src/controls/FluExpander.qml index e5d93672..2bd954b9 100644 --- a/src/controls/FluExpander.qml +++ b/src/controls/FluExpander.qml @@ -22,9 +22,8 @@ Item { width: parent.width height: 45 radius: 4 - border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1) - color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) - + color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) + border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) MouseArea{ id:root_mouse @@ -72,8 +71,8 @@ Item { left: layout_header.left } radius: 4 - border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1) - color: FluTheme.isDark ? Qt.rgba(57/255,57/255,57/255,1) : Qt.rgba(249/255,249/255,249/255,1) + color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1) + border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) height: expand ? contentHeight : 0 Behavior on height { NumberAnimation{ diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml index c77cbc2e..e2734161 100644 --- a/src/controls/FluIconButton.qml +++ b/src/controls/FluIconButton.qml @@ -55,8 +55,10 @@ Rectangle { id:button_mouse anchors.fill: parent hoverEnabled: true - enabled: !disabled onClicked: { + if(disabled){ + return + } button.clicked() } } diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml index c81caff2..44b2e570 100644 --- a/src/controls/FluNavigationView.qml +++ b/src/controls/FluNavigationView.qml @@ -149,7 +149,7 @@ Item { Layout.leftMargin: 5 Layout.alignment: Qt.AlignVCenter disabled: nav_swipe.depth === 1 - iconSize: 15 + iconSize: 13 onClicked: { nav_swipe.pop() nav_list.stackIndex.pop() diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml index ad3bd10b..04e7d0af 100644 --- a/src/controls/FluTimePicker.qml +++ b/src/controls/FluTimePicker.qml @@ -1,8 +1,356 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 -import QtQuick.Shapes 1.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 import FluentUI 1.0 -Item { +Rectangle { + + id:root + + property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1) + property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) + property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1) + property var window : Window.window + + property int hourFormat: FluTimePicker.H + + property int isH: hourFormat === FluTimePicker.H + + enum HourFormat { + H, + HH + } + + color: { + if(mouse_area.containsMouse){ + return hoverColor + } + return normalColor + } + height: 30 + width: 300 + radius: 4 + border.width: 1 + border.color: dividerColor + + MouseArea{ + id:mouse_area + hoverEnabled: true + anchors.fill: parent + onClicked: { + popup.showPopup() + } + } + + Rectangle{ + id:divider_1 + width: 1 + x: isH ? parent.width/3 : parent.width/2 + height: parent.height + color: dividerColor + } + + + Rectangle{ + id:divider_2 + width: 1 + x:parent.width*2/3 + height: parent.height + color: dividerColor + visible: isH + } + + FluText{ + id:text_hour + anchors{ + left: parent.left + right: divider_1.left + top: parent.top + bottom: parent.bottom + } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + text:"时" + } + + + FluText{ + id:text_minute + anchors{ + left: divider_1.right + right: isH ? divider_2.left : parent.right + top: parent.top + bottom: parent.bottom + } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + text:"分" + } + + + FluText{ + id:text_ampm + visible: isH + anchors{ + left: divider_2.right + right: parent.right + top: parent.top + bottom: parent.bottom + } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + text:"上午" + } + + Popup{ + id:popup + background: Rectangle{ + width: 300 + radius: 4 + color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1) + height: 340 + MouseArea{ + anchors.fill: parent + } + FluShadow{ + radius: 4 + } + + RowLayout{ + id:layout_content + spacing: 0 + width: parent.width + height: 300 + + Component{ + id:list_delegate + + Item{ + height:38 + width:getListView().width + + function getListView(){ + if(type === 0) + return list_view_1 + if(type === 1) + return list_view_2 + if(type === 2) + return list_view_3 + } + + + Rectangle{ + anchors.fill: parent + anchors.topMargin: 2 + anchors.bottomMargin: 2 + anchors.leftMargin: 5 + anchors.rightMargin: 5 + color: { + if(getListView().currentIndex === position){ + if(FluTheme.isDark){ + return item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter + }else{ + return item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark + } + } + if(item_mouse.containsMouse){ + return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1) + } + return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0) + } + radius: 3 + MouseArea{ + id:item_mouse + anchors.fill: parent + hoverEnabled: true + onClicked: { + getListView().currentIndex = position + if(type === 0){ + text_hour.text = model + } + if(type === 1){ + text_minute.text = model + } + if(type === 2){ + text_ampm.text = model + } + } + } + FluText{ + text:model + color: { + if(getListView().currentIndex === position){ + if(FluTheme.isDark){ + return Qt.rgba(0,0,0,1) + }else{ + return Qt.rgba(1,1,1,1) + } + }else{ + return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + } + } + anchors.centerIn: parent + } + } + } + } + + ListView{ + id:list_view_1 + width: isH ? 100 : 150 + height: parent.height + boundsBehavior:Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar { } + model: isH ? generateArray(1,12) : generateArray(0,23) + clip: true + delegate: Loader{ + property var model: modelData + property int type:0 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + } + ListView{ + id:list_view_2 + width: isH ? 100 : 150 + height: parent.height + model: generateArray(0,59) + clip: true + ScrollBar.vertical: ScrollBar { } + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:1 + property int position:index + sourceComponent: list_delegate + } + } + Rectangle{ + width: 1 + height: parent.height + color: dividerColor + visible: isH + } + ListView{ + id:list_view_3 + width: 100 + height: 76 + model: ["上午","下午"] + clip: true + visible: isH + ScrollBar.vertical: ScrollBar { } + Layout.alignment: Qt.AlignVCenter + boundsBehavior:Flickable.StopAtBounds + delegate: Loader{ + property var model: modelData + property int type:2 + property int position:index + sourceComponent: list_delegate + } + } + } + + Rectangle{ + width: parent.width + height: 1 + anchors.top: layout_content.bottom + color: dividerColor + } + + Rectangle{ + id:layout_actions + height: 40 + radius: 5 + color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1) + anchors{ + bottom:parent.bottom + left: parent.left + right: parent.right + } + + Item { + id:divider + width: 1 + height: parent.height + anchors.centerIn: parent + } + + FluButton{ + anchors{ + left: parent.left + leftMargin: 20 + rightMargin: 10 + right: divider.left + verticalCenter: parent.verticalCenter + } + text: "取消" + onClicked: { + popup.close() + } + } + + FluFilledButton{ + anchors{ + right: parent.right + left: divider.right + rightMargin: 20 + leftMargin: 10 + verticalCenter: parent.verticalCenter + } + text: "确定" + onClicked: { + changeFlag = false + popup.close() + } + } + + } + + } + y:35 + function showPopup() { + changeFlag = true + rowData[0] = text_hour.text + rowData[1] = text_minute.text + rowData[2] = text_ampm.text + list_view_1.currentIndex = -1 + list_view_2.currentIndex = -1 + list_view_3.currentIndex = -1 + var pos = root.mapToItem(null, 0, 0) + if(window.height>pos.y+35+340){ + popup.y = 35 + }else{ + popup.y = window.height-(pos.y+340) + } + popup.open() + } + + onClosed: { + if(changeFlag){ + text_hour.text = rowData[0] + text_minute.text = rowData[1] + text_ampm.text = rowData[2] + } + } + + } + + property bool changeFlag: true + readonly property var rowData: ["","",""] + + + function generateArray(start, n) { + var arr = []; + for (var i = start; i <= n; i++) { + arr.push(i.toString().padStart(2, '0')); + } + return arr; + } } diff --git a/src/res.qrc b/src/res.qrc index 8ed400d2..8591738a 100644 --- a/src/res.qrc +++ b/src/res.qrc @@ -43,5 +43,8 @@ controls/FluContentPage.qml controls/FluArea.qml res/font/Segoe_Fluent_Icons.ttf + controls/FluDatePicker.qml + controls/FluCalenderView.qml + controls/FluCalendarDatePicker.qml