From 5fcd95611facf093d25036b84715c1298f6e42e0 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Tue, 21 Mar 2023 18:19:46 +0800 Subject: [PATCH] update --- example/T_Buttons.qml | 31 +++ example/T_Calender.qml | 27 +++ example/page/AboutPage.qml | 2 +- example/page/MainPage.qml | 7 + example/qml.qrc | 1 + src/controls/FluCalenderView.qml | 328 ++++++++++++++++++++++++++++++- src/controls/FluTextButton.qml | 50 +++-- src/win_install.bat | 4 +- 8 files changed, 432 insertions(+), 18 deletions(-) create mode 100644 example/T_Calender.qml diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index 19eb373..8fd2093 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -14,6 +14,37 @@ FluScrollablePage{ text:"支持Tab键切换焦点，空格键执行点击事件" } + FluArea{ + width: parent.width + height: 68 + paddings: 10 + + FluTextButton{ + disabled:text_button_switch.selected + text:"Text Button" + onClicked: { + showInfo("点击Text Button") + } + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + } + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:text_button_switch + Layout.alignment: Qt.AlignRight + text:"Disabled" + } + } + } + FluArea{ width: parent.width height: 68 diff --git a/example/T_Calender.qml b/example/T_Calender.qml new file mode 100644 index 0000000..3f6a8a4 --- /dev/null +++ b/example/T_Calender.qml @@ -0,0 +1,27 @@ +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:"Calender" + + + FluArea{ + width: parent.width + Layout.topMargin: 20 + height: 400 + paddings: 10 + + + FluCalenderView{ + + } + + } + + +} diff --git a/example/page/AboutPage.qml b/example/page/AboutPage.qml index 9a45284..f2542ca 100644 --- a/example/page/AboutPage.qml +++ b/example/page/AboutPage.qml @@ -34,7 +34,7 @@ FluWindow { fontStyle: FluText.Title } FluText{ - text:"v1.1.1" + text:"v1.1.2" fontStyle: FluText.Body Layout.alignment: Qt.AlignBottom } diff --git a/example/page/MainPage.qml b/example/page/MainPage.qml index fc75fae..6f4f7b6 100644 --- a/example/page/MainPage.qml +++ b/example/page/MainPage.qml @@ -90,6 +90,13 @@ FluWindow { } } + FluPaneItem{ + title:"Calender" + onTap:{ + nav_view.push("qrc:/T_Calender.qml") + } + } + FluPaneItem{ title:"Badge" onTap:{ diff --git a/example/qml.qrc b/example/qml.qrc index 0b1ac4f..48b527b 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -42,5 +42,6 @@ page/ChatPage.qml T_Tooltip.qml T_Badge.qml + T_Calender.qml diff --git a/src/controls/FluCalenderView.qml b/src/controls/FluCalenderView.qml index 68c2108..7841c47 100644 --- a/src/controls/FluCalenderView.qml +++ b/src/controls/FluCalenderView.qml @@ -1,5 +1,331 @@ -import QtQuick 2.15 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import FluentUI 1.0 Item { + id:control + property int displayMode: FluCalenderView.Month + + property var date: new Date() + + property var currentDate : new Date() + + enum DisplayMode { + Month, + Year, + Decade + } + + Component.onCompleted: { + updateMouth(date) + } + + function createItemWeek(name){ + return {type:0,name:name} + } + + function createItemDay(date){ + return {type:1,date:date} + } + + function createItemMonth(name){ + return {type:2,name:name} + } + + + function updateYear(data){ + list_model.clear() + var year = date.getFullYear() + var month = date.getMonth() + var nextMonthYear = year + var nextMonth = month + 1 + if (month === 11) { + nextMonthYear = year + 1 + nextMonth = 0 + } + + for(var i = 0 ; i< 12 ;i++){ + list_model.append(createItemMonth((i+1)+"月")); + } + list_model.append(createItemMonth("1月")); + list_model.append(createItemMonth("2月")); + list_model.append(createItemMonth("3月")); + list_model.append(createItemMonth("4月")); + } + + function updateMouth(date){ + list_model.clear() + list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")]) + var year = date.getFullYear() + var month = date.getMonth() + var day = date.getDate() + var firstDayOfMonth = new Date(year, month, 1) + var dayOfWeek = firstDayOfMonth.getDay() + var headerSize = (dayOfWeek===0?7:dayOfWeek)-1 + if(headerSize!==0){ + var lastMonthYear = year; + var lastMonthMonth = month - 1 + if (month === 0) { + lastMonthYear = year - 1 + lastMonthMonth = 11 + } + var lastMonthDays = new Date(lastMonthYear, lastMonthMonth+1, 0).getDate() + for (var i = headerSize-1; i >= 0; i--) { + list_model.append(createItemDay(new Date(lastMonthYear, lastMonthMonth,lastMonthDays-i))) + } + } + const lastDayOfMonth = new Date(year, month+1, 0).getDate() + for (let day = 1; day <= lastDayOfMonth; day++) { + list_model.append(createItemDay(new Date(year, month,day))) + } + var footerSize = 49-list_model.count + var nextMonthYear = year + var nextMonth = month + 1 + if (month === 11) { + nextMonthYear = year + 1 + nextMonth = 0 + } + const nextDayOfMonth = new Date(nextMonthYear, nextMonth+1, 0).getDate() + for (let j = 1; j <= nextDayOfMonth; j++) { + list_model.append(createItemDay(new Date(nextMonthYear, nextMonth,j))) + } + title.text = year+"年"+(month+1)+"月" + } + + + Component{ + id:com_week + Item{ + height: 40 + width: 40 + FluText{ + text:name + anchors.centerIn: parent + } + } + } + + Component{ + id:com_month + Item{ +// property bool isYear: control.date.getFullYear() === date.getFullYear() +// property bool isMonth: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() + height: 70 + width: 70 + + Rectangle{ + id:backgound_selected + anchors.centerIn: parent + width: 50 + height: 50 + radius: 25 + visible: false + color: FluTheme.primaryColor.dark + } + + FluText{ + text:name + anchors.centerIn: parent + color: { +// if(isMonth){ +// return "#FFFFFF" +// } +// if(isYear){ +// return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" +// } + return Qt.rgba(150/255,150/255,150/255,1) + } + } + } + } + + + Component{ + id:com_day + Button{ + id:item_control + property bool isMonth: control.date.getMonth() === date.getMonth() + property bool isDay: control.currentDate.getFullYear() === date.getFullYear() && control.currentDate.getMonth() === date.getMonth() && control.currentDate.getDate() === date.getDate() + height: 40 + width: 40 + onClicked: { + currentDate = date + } + background: Item{ + Rectangle{ + width: 36 + height: 36 + radius: 4 + anchors.centerIn: parent + color:{ + if(FluTheme.isDark){ + if(item_control.hovered){ + return Qt.rgba(1,1,1,0.05) + } + return Qt.rgba(0,0,0,0) + }else{ + if(item_control.hovered){ + return Qt.rgba(0,0,0,0.05) + } + return Qt.rgba(0,0,0,0) + } + } + } + Rectangle{ + id:backgound_selected + anchors.centerIn: parent + width: 30 + height: 30 + radius: 15 + visible: isDay + color: FluTheme.primaryColor.dark + } + FluText{ + text:date.getDate() + anchors.centerIn: parent + color: { + if(isDay){ + return "#FFFFFF" + } + if(isMonth){ + return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A" + } + return Qt.rgba(150/255,150/255,150/255,1) + } + } + } + contentItem: Item{} + } + } + + FluArea{ + width: 280 + height: 325 + radius: 5 + + FluShadow{ + radius: 5 + } + + Rectangle{ + id:layout_divider + height: 1 + width: parent.width + color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1) + anchors{ + top: parent.top + topMargin: 45 + } + } + + Item{ + id:layout_top + anchors{ + left: parent.left + right: parent.right + top: parent.top + bottom: layout_divider.top + } + + FluTextButton{ + id:title + leftPadding: 0 + rightPadding: 0 + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: 14 + } + onClicked:{ + displayMode = FluCalenderView.Year + updateYear(data) + } + } + + FluIconButton{ + id:icon_up + iconSource: FluentIcons.CaretUpSolid8 + iconSize: 10 + anchors{ + verticalCenter: parent.verticalCenter + right: icon_down.left + rightMargin: 14 + } + onClicked: { + var year = date.getFullYear() + var month = date.getMonth() + var lastMonthYear = year; + var lastMonthMonth = month - 1 + if (month === 0) { + lastMonthYear = year - 1 + lastMonthMonth = 11 + } + date = new Date(lastMonthYear,lastMonthMonth,1) + updateMouth(date) + } + } + + FluIconButton{ + id:icon_down + iconSource: FluentIcons.CaretDownSolid8 + iconSize: 10 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 8 + } + onClicked: { + var year = date.getFullYear() + var month = date.getMonth() + var nextMonthYear = year + var nextMonth = month + 1 + if (month === 11) { + nextMonthYear = year + 1 + nextMonth = 0 + } + date = new Date(nextMonthYear,nextMonth,1) + updateMouth(date) + } + } + } + + ListModel { + id:list_model + } + + Item{ + id:layout_bottom + anchors{ + left: parent.left + right: parent.right + top: layout_divider.bottom + bottom: parent.bottom + } + + GridView{ + model: list_model + anchors.fill: parent + cellHeight: displayMode === FluCalenderView.Month ? 40 : 70 + cellWidth: displayMode === FluCalenderView.Month ? 40 : 70 + delegate: Loader{ + property var modelData : model + property var name : model.name + property var date : model.date + sourceComponent: { + if(model.type === 0){ + return com_week + } + if(model.type === 1){ + return com_day + } + if(model.type === 2){ + return com_month + } + return com_day + } + } + } + } + } } diff --git a/src/controls/FluTextButton.qml b/src/controls/FluTextButton.qml index 334b9dd..e7d3eeb 100644 --- a/src/controls/FluTextButton.qml +++ b/src/controls/FluTextButton.qml @@ -1,22 +1,44 @@ import QtQuick 2.15 +import QtQuick.Controls 2.15 import FluentUI 1.0 -FluText { - id:root - color: { - if(FluTheme.isDark){ - return mouse_area.containsMouse?Qt.darker(FluTheme.primaryColor.lighter,1.1):FluTheme.primaryColor.lighter +Button { + + property bool disabled: false + + property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark + property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3) + property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1) + property bool textBold: true + + id: control + topPadding:5 + bottomPadding:5 + leftPadding:15 + rightPadding:15 + enabled: !disabled + focusPolicy:Qt.TabFocus + + Keys.onSpacePressed: control.visualFocus&&clicked() + + background: Item{ + FluFocusRectangle{ + visible: control.visualFocus + radius:8 } - return mouse_area.containsMouse?Qt.lighter(FluTheme.primaryColor.dark,1.1):FluTheme.primaryColor.dark } - signal clicked - MouseArea{ - id:mouse_area - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - root.clicked() + contentItem: FluText { + text: control.text + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.bold: control.textBold + color: { + color:{ + if(disabled){ + return disableColor + } + return hovered ? hoverColor :normalColor + } } } } diff --git a/src/win_install.bat b/src/win_install.bat index 91ff9f6..c3431f5 100644 --- a/src/win_install.bat +++ b/src/win_install.bat @@ -21,8 +21,8 @@ if %ANDROID% == YES copy /y %LIBFILE_PATH% %BUILDER_BIN_PATH% if %1 == SHARED ( echo running install to qtqml folder del /s /q %PRESET_PATH%\plugins.qmltypes - %QT_QML_FLUENT_PATH%\..\..\bin\qmlplugindump.exe -nonrelocatable FluentUI 1.0 .\ > %PRESET_PATH%\plugins.qmltypes - rmdir /s /q %QT_QML_FLUENT_PATH% & md %QT_QML_FLUENT_PATH% + %QT_QML_FLUENT_PATH%\..\..\bin\qmlplugindump.exe -nonrelocatable FluentUI 1.0 > %PRESET_PATH%\plugins.qmltypes +rem rmdir /s /q %QT_QML_FLUENT_PATH% & md %QT_QML_FLUENT_PATH% copy /y %BUILDER_BIN_PATH% %QT_QML_FLUENT_PATH% xcopy %PRESET_PATH% %QT_QML_FLUENT_PATH% /s/e/i/y cd %QT_QML_FLUENT_PATH%