wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-03-21 18:19:46 +08:00
parent b83e70ba24
commit 5fcd95611f
8 changed files with 432 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
example/T_Buttons.qml
View File

@ -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

27
example/T_Calender.qml Normal file
View File

@ -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{
}
}
}

2
example/page/AboutPage.qml
View File

@ -34,7 +34,7 @@ FluWindow {
fontStyle: FluText.Title
}
FluText{
text:"v1.1.1"
text:"v1.1.2"
fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom
}

7
example/page/MainPage.qml
View File

@ -90,6 +90,13 @@ FluWindow {
}
}
FluPaneItem{
title:"Calender"
onTap:{
nav_view.push("qrc:/T_Calender.qml")
}
}
FluPaneItem{
title:"Badge"
onTap:{

1
example/qml.qrc
View File

@ -42,5 +42,6 @@
<file>page/ChatPage.qml</file>
<file>T_Tooltip.qml</file>
<file>T_Badge.qml</file>
<file>T_Calender.qml</file>
</qresource>
</RCC>

328
src/controls/FluCalenderView.qml
View File

@ -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
}
}
}
}
}
}

50
src/controls/FluTextButton.qml
View File

@ -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
}
}
}
}

4
src/win_install.bat
View File

@ -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%