diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml
index 19eb3734..8fd2093e 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 00000000..3f6a8a4f
--- /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 9a452843..f2542ca6 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 fc75fae8..6f4f7b6a 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 0b1ac4f1..48b527b1 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 68c21087..7841c477 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 334b9dde..e7d3eeb3 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 91ff9f6a..c3431f57 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%