github_mirror
/
FluentUI
mirror of https://github.com/zhuzichu520/FluentUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/zhuzichu520/FluentUI

This commit is contained in:
ZHUZICHU\zhuzi 2025-05-28 17:35:57 +08:00
parent f8b7475261 4ca0978882
commit fac4f172d8
29 changed files with 936 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
example/example_en_US.ts
View File

@ -70,17 +70,17 @@
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="50"/> <location filename="qml/window/CrashWindow.qml" line="53"/>
<source>We apologize for the inconvenience caused by an unexpected error</source> <source>We apologize for the inconvenience caused by an unexpected error</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="62"/> <location filename="qml/window/CrashWindow.qml" line="65"/>
<source>Report Logs</source> <source>Report Logs</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="72"/> <location filename="qml/window/CrashWindow.qml" line="75"/>
<source>Restart Program</source> <source>Restart Program</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2368,7 +2368,7 @@ Some contents...</source>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="176"/> <location filename="qml/page/T_TableView.qml" line="176"/>
<location filename="qml/page/T_TableView.qml" line="503"/> <location filename="qml/page/T_TableView.qml" line="504"/>
<source>Name</source> <source>Name</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2418,37 +2418,37 @@ Some contents...</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="508"/> <location filename="qml/page/T_TableView.qml" line="509"/>
<source>Avatar</source> <source>Avatar</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="522"/> <location filename="qml/page/T_TableView.qml" line="523"/>
<source>Address</source> <source>Address</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="530"/> <location filename="qml/page/T_TableView.qml" line="531"/>
<source>Nickname</source> <source>Nickname</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="537"/> <location filename="qml/page/T_TableView.qml" line="538"/>
<source>Long String</source> <source>Long String</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="545"/> <location filename="qml/page/T_TableView.qml" line="546"/>
<source>Options</source> <source>Options</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="563"/> <location filename="qml/page/T_TableView.qml" line="564"/>
<source>&lt;Previous</source> <source>&lt;Previous</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="564"/> <location filename="qml/page/T_TableView.qml" line="565"/>
<source>Next&gt;</source> <source>Next&gt;</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2487,8 +2487,8 @@ Some contents...</source>
<location filename="qml/page/T_TextBox.qml" line="33"/> <location filename="qml/page/T_TextBox.qml" line="33"/>
<location filename="qml/page/T_TextBox.qml" line="64"/> <location filename="qml/page/T_TextBox.qml" line="64"/>
<location filename="qml/page/T_TextBox.qml" line="97"/> <location filename="qml/page/T_TextBox.qml" line="97"/>
<location filename="qml/page/T_TextBox.qml" line="128"/> <location filename="qml/page/T_TextBox.qml" line="135"/>
<location filename="qml/page/T_TextBox.qml" line="157"/> <location filename="qml/page/T_TextBox.qml" line="168"/>
<source>Disabled</source> <source>Disabled</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
@ -2507,6 +2507,11 @@ Some contents...</source>
<source>AutoSuggestBox</source> <source>AutoSuggestBox</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message>
<location filename="qml/page/T_TextBox.qml" line="131"/>
<source>Show suggest when pressed</source>
<translation type="unfinished"></translation>
</message>
</context> </context>
<context> <context>
<name>T_Theme</name> <name>T_Theme</name>
@ -2727,49 +2732,60 @@ Some contents...</source>
<name>T_Tour</name> <name>T_Tour</name>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="15"/> <location filename="qml/page/T_Tour.qml" line="15"/>
<location filename="qml/page/T_Tour.qml" line="23"/>
<source>Upload File</source> <source>Upload File</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="15"/> <location filename="qml/page/T_Tour.qml" line="15"/>
<location filename="qml/page/T_Tour.qml" line="23"/>
<source>Put your files here.</source> <source>Put your files here.</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="16"/> <location filename="qml/page/T_Tour.qml" line="16"/>
<location filename="qml/page/T_Tour.qml" line="52"/> <location filename="qml/page/T_Tour.qml" line="24"/>
<location filename="qml/page/T_Tour.qml" line="54"/> <location filename="qml/page/T_Tour.qml" line="74"/>
<location filename="qml/page/T_Tour.qml" line="76"/>
<source>Save</source> <source>Save</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="16"/> <location filename="qml/page/T_Tour.qml" line="16"/>
<location filename="qml/page/T_Tour.qml" line="24"/>
<source>Save your changes.</source> <source>Save your changes.</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="17"/> <location filename="qml/page/T_Tour.qml" line="17"/>
<location filename="qml/page/T_Tour.qml" line="25"/>
<source>Other Actions</source> <source>Other Actions</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="17"/> <location filename="qml/page/T_Tour.qml" line="17"/>
<location filename="qml/page/T_Tour.qml" line="25"/>
<source>Click to see other actions.</source> <source>Click to see other actions.</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="31"/> <location filename="qml/page/T_Tour.qml" line="46"/>
<source>Begin Tour</source> <source>Begin Tour</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="45"/> <location filename="qml/page/T_Tour.qml" line="52"/>
<location filename="qml/page/T_Tour.qml" line="47"/> <source>Begin Tour with custom indicator</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_Tour.qml" line="67"/>
<location filename="qml/page/T_Tour.qml" line="69"/>
<source>Upload</source> <source>Upload</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="61"/> <location filename="qml/page/T_Tour.qml" line="83"/>
<source>More</source> <source>More</source>
<translation type="unfinished"></translation> <translation type="unfinished"></translation>
</message> </message>

60
example/example_zh_CN.ts
View File

@ -70,17 +70,17 @@
<translation type="unfinished">友情提示</translation> <translation type="unfinished">友情提示</translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="50"/> <location filename="qml/window/CrashWindow.qml" line="53"/>
<source>We apologize for the inconvenience caused by an unexpected error</source> <source>We apologize for the inconvenience caused by an unexpected error</source>
<translation type="unfinished">对于意外错误给您带来的不便，我们深表歉意</translation> <translation type="unfinished">对于意外错误给您带来的不便，我们深表歉意</translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="62"/> <location filename="qml/window/CrashWindow.qml" line="65"/>
<source>Report Logs</source> <source>Report Logs</source>
<translation type="unfinished">上报日志</translation> <translation type="unfinished">上报日志</translation>
</message> </message>
<message> <message>
<location filename="qml/window/CrashWindow.qml" line="72"/> <location filename="qml/window/CrashWindow.qml" line="75"/>
<source>Restart Program</source> <source>Restart Program</source>
<translation type="unfinished">重启程序</translation> <translation type="unfinished">重启程序</translation>
</message> </message>
@ -552,7 +552,7 @@
<message> <message>
<location filename="qml/global/ItemsOriginal.qml" line="448"/> <location filename="qml/global/ItemsOriginal.qml" line="448"/>
<source>Tour</source> <source>Tour</source>
<translation type="unfinished">游览</translation> <translation type="unfinished">漫游式引导</translation>
</message> </message>
<message> <message>
<location filename="qml/global/ItemsOriginal.qml" line="454"/> <location filename="qml/global/ItemsOriginal.qml" line="454"/>
@ -2557,7 +2557,7 @@ Some contents...</source>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="176"/> <location filename="qml/page/T_TableView.qml" line="176"/>
<location filename="qml/page/T_TableView.qml" line="503"/> <location filename="qml/page/T_TableView.qml" line="504"/>
<source>Name</source> <source>Name</source>
<translation type="unfinished">名称</translation> <translation type="unfinished">名称</translation>
</message> </message>
@ -2597,37 +2597,37 @@ Some contents...</source>
<translation type="unfinished">焦点未获取：请点击表格中的任意一项，作为插入的靶点！</translation> <translation type="unfinished">焦点未获取：请点击表格中的任意一项，作为插入的靶点！</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="508"/> <location filename="qml/page/T_TableView.qml" line="509"/>
<source>Avatar</source> <source>Avatar</source>
<translation type="unfinished">头像</translation> <translation type="unfinished">头像</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="522"/> <location filename="qml/page/T_TableView.qml" line="523"/>
<source>Address</source> <source>Address</source>
<translation type="unfinished">地址</translation> <translation type="unfinished">地址</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="530"/> <location filename="qml/page/T_TableView.qml" line="531"/>
<source>Nickname</source> <source>Nickname</source>
<translation type="unfinished">昵称</translation> <translation type="unfinished">昵称</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="537"/> <location filename="qml/page/T_TableView.qml" line="538"/>
<source>Long String</source> <source>Long String</source>
<translation type="unfinished">长字符串</translation> <translation type="unfinished">长字符串</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="545"/> <location filename="qml/page/T_TableView.qml" line="546"/>
<source>Options</source> <source>Options</source>
<translation type="unfinished">操作</translation> <translation type="unfinished">操作</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="563"/> <location filename="qml/page/T_TableView.qml" line="564"/>
<source>&lt;Previous</source> <source>&lt;Previous</source>
<translation type="unfinished">&lt;上一页</translation> <translation type="unfinished">&lt;上一页</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_TableView.qml" line="564"/> <location filename="qml/page/T_TableView.qml" line="565"/>
<source>Next&gt;</source> <source>Next&gt;</source>
<translation type="unfinished">下一页&gt;</translation> <translation type="unfinished">下一页&gt;</translation>
</message> </message>
@ -2676,8 +2676,8 @@ Some contents...</source>
<location filename="qml/page/T_TextBox.qml" line="33"/> <location filename="qml/page/T_TextBox.qml" line="33"/>
<location filename="qml/page/T_TextBox.qml" line="64"/> <location filename="qml/page/T_TextBox.qml" line="64"/>
<location filename="qml/page/T_TextBox.qml" line="97"/> <location filename="qml/page/T_TextBox.qml" line="97"/>
<location filename="qml/page/T_TextBox.qml" line="128"/> <location filename="qml/page/T_TextBox.qml" line="135"/>
<location filename="qml/page/T_TextBox.qml" line="157"/> <location filename="qml/page/T_TextBox.qml" line="168"/>
<source>Disabled</source> <source>Disabled</source>
<translation type="unfinished">禁用</translation> <translation type="unfinished">禁用</translation>
</message> </message>
@ -2696,6 +2696,11 @@ Some contents...</source>
<source>AutoSuggestBox</source> <source>AutoSuggestBox</source>
<translation type="unfinished">自动建议框</translation> <translation type="unfinished">自动建议框</translation>
</message> </message>
<message>
<location filename="qml/page/T_TextBox.qml" line="131"/>
<source>Show suggest when pressed</source>
<translation>按下时显示建议</translation>
</message>
</context> </context>
<context> <context>
<name>T_Theme</name> <name>T_Theme</name>
@ -2928,56 +2933,67 @@ Some contents...</source>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="15"/> <location filename="qml/page/T_Tour.qml" line="15"/>
<location filename="qml/page/T_Tour.qml" line="23"/>
<source>Upload File</source> <source>Upload File</source>
<translation type="unfinished">上传文件</translation> <translation type="unfinished">上传文件</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="15"/> <location filename="qml/page/T_Tour.qml" line="15"/>
<location filename="qml/page/T_Tour.qml" line="23"/>
<source>Put your files here.</source> <source>Put your files here.</source>
<translation type="unfinished">把你的文件放在这里</translation> <translation type="unfinished">把你的文件放在这里</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="16"/> <location filename="qml/page/T_Tour.qml" line="16"/>
<location filename="qml/page/T_Tour.qml" line="52"/> <location filename="qml/page/T_Tour.qml" line="24"/>
<location filename="qml/page/T_Tour.qml" line="54"/> <location filename="qml/page/T_Tour.qml" line="74"/>
<location filename="qml/page/T_Tour.qml" line="76"/>
<source>Save</source> <source>Save</source>
<translation type="unfinished">保存</translation> <translation type="unfinished">保存</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="16"/> <location filename="qml/page/T_Tour.qml" line="16"/>
<location filename="qml/page/T_Tour.qml" line="24"/>
<source>Save your changes.</source> <source>Save your changes.</source>
<translation type="unfinished">保存更改</translation> <translation type="unfinished">保存更改</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="17"/> <location filename="qml/page/T_Tour.qml" line="17"/>
<location filename="qml/page/T_Tour.qml" line="25"/>
<source>Other Actions</source> <source>Other Actions</source>
<translation type="unfinished">其他操作</translation> <translation type="unfinished">其他操作</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="17"/> <location filename="qml/page/T_Tour.qml" line="17"/>
<location filename="qml/page/T_Tour.qml" line="25"/>
<source>Click to see other actions.</source> <source>Click to see other actions.</source>
<translation type="unfinished">点击查看其他操作</translation> <translation type="unfinished">点击查看其他操作</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="31"/> <location filename="qml/page/T_Tour.qml" line="46"/>
<source>Begin Tour</source> <source>Begin Tour</source>
<translation type="unfinished">开始游览</translation> <translation type="unfinished">开始导览</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="45"/> <location filename="qml/page/T_Tour.qml" line="52"/>
<location filename="qml/page/T_Tour.qml" line="47"/> <source>Begin Tour with custom indicator</source>
<translation type="unfinished">以自定义指示器开始导览</translation>
</message>
<message>
<location filename="qml/page/T_Tour.qml" line="67"/>
<location filename="qml/page/T_Tour.qml" line="69"/>
<source>Upload</source> <source>Upload</source>
<translation type="unfinished">上传</translation> <translation type="unfinished">上传</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="61"/> <location filename="qml/page/T_Tour.qml" line="83"/>
<source>More</source> <source>More</source>
<translation type="unfinished">更多</translation> <translation type="unfinished">更多</translation>
</message> </message>
<message> <message>
<location filename="qml/page/T_Tour.qml" line="10"/> <location filename="qml/page/T_Tour.qml" line="10"/>
<source>Tour</source> <source>Tour</source>
<translation type="unfinished">游览</translation> <translation type="unfinished">漫游式引导</translation>
</message> </message>
</context> </context>
<context> <context>

81
example/qml/page/T_Badge.qml
View File

@ -26,7 +26,8 @@ FluScrollablePage{
width: parent.width width: parent.width
text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed") text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
} }
Row{ Flow{
width: parent.width
spacing: 20 spacing: 20
Rectangle{ Rectangle{
width: 40 width: 40
@ -34,7 +35,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:0 count:0
} }
@ -46,7 +47,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:5 count:5
} }
@ -57,7 +58,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:50 count:50
} }
@ -68,9 +69,10 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:100 count:1000
max: 999
} }
} }
Rectangle{ Rectangle{
@ -79,7 +81,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
isDot:true isDot:true
} }
@ -90,7 +92,7 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:99 count:99
color: Qt.rgba(250/255,173/255,20/255,1) color: Qt.rgba(250/255,173/255,20/255,1)
@ -102,12 +104,71 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
topRight: true position: "topRight"
showZero: true showZero: true
count:99 count:99
color: Qt.rgba(82/255,196/255,26/255,1) color: Qt.rgba(82/255,196/255,26/255,1)
} }
} }
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
position: "topRight"
showZero: true
count:100
color: Qt.rgba(84/255,169/255,1,1)
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
position: "bottomLeft"
showZero: true
count:100
color: Qt.rgba(84/255,169/255,1,1)
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
position: "topLeft"
showZero: true
count:100
color: Qt.rgba(84/255,169/255,1,1)
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
position: "bottomRight"
showZero: true
count:100
color: Qt.rgba(84/255,169/255,1,1)
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
position: "topRight"
count: "NEW"
color: Qt.rgba(84/255,169/255,1,1)
}
}
} }
} }
} }
@ -120,7 +181,9 @@ FluScrollablePage{
radius: 8 radius: 8
color: Qt.rgba(191/255,191/255,191/255,1) color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{ FluBadge{
position: "topRight"
count: 100 count: 100
max: 99
isDot: false isDot: false
color: Qt.rgba(82/255,196/255,26/255,1) color: Qt.rgba(82/255,196/255,26/255,1)
} }

108
example/qml/page/T_Rectangle.qml
View File

@ -11,53 +11,71 @@ FluScrollablePage{
FluFrame{ FluFrame{
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 80
padding: 10 padding: 10
Column{ Flow{
width: parent.width
spacing: 15 spacing: 15
anchors{ FluRectangle{
left: parent.left width: 50
verticalCenter: parent.verticalCenter height: 50
color:"#0078d4"
radius:[0,0,0,0]
} }
RowLayout{ FluRectangle{
Layout.topMargin: 20 width: 50
FluRectangle{ height: 50
width: 50 color:"#744da9"
height: 50 radius:[15,15,15,15]
color:"#0078d4" }
radius:[0,0,0,0] FluRectangle{
} width: 50
FluRectangle{ height: 50
width: 50 color:"#ffeb3b"
height: 50 radius:[15,0,0,0]
color:"#744da9" }
radius:[15,15,15,15] FluRectangle{
} width: 50
FluRectangle{ height: 50
width: 50 color:"#f7630c"
height: 50 radius:[0,15,0,0]
color:"#ffeb3b" }
radius:[15,0,0,0] FluRectangle{
} width: 50
FluRectangle{ height: 50
width: 50 color:"#e71123"
height: 50 radius:[0,0,15,0]
color:"#f7630c" }
radius:[0,15,0,0] FluRectangle{
} width: 50
FluRectangle{ height: 50
width: 50 color:"#b4009e"
height: 50 radius:[0,0,0,15]
color:"#e71123" }
radius:[0,0,15,0] FluRectangle{
} width: 50
FluRectangle{ height: 50
width: 50 color:"#a8d5ba"
height: 50 radius:[15,15,15,15]
color:"#b4009e" borderWidth: 3
radius:[0,0,0,15] borderColor: "#5b8a72"
} }
FluRectangle{
width: 50
height: 50
color:"#dbe2ef"
radius:[15,0,0,0]
borderWidth: 2
borderColor: "#3f72af"
}
FluRectangle{
width: 50
height: 50
color:"#dbe2ef"
borderWidth: 2
borderColor: "#3f72af"
borderStyle: Qt.DashLine
dashPattern: [4,2]
} }
} }
} }
@ -66,6 +84,10 @@ FluScrollablePage{
Layout.topMargin: -6 Layout.topMargin: -6
code:'FluRectangle{ code:'FluRectangle{
radius: [25,25,25,25] radius: [25,25,25,25]
borderWidth: 2
borderColor: "#000000"
borderStyle: Qt.DashLine
dashPattern: [4,2]
width: 50 width: 50
height: 50 height: 50
}' }'

1
example/qml/page/T_TableView.qml
View File

@ -493,6 +493,7 @@ FluContentPage{
onRowsChanged: { onRowsChanged: {
root.checkBoxChanged() root.checkBoxChanged()
} }
startRowIndex: (gagination.pageCurrent - 1) * gagination.__itemPerPage + 1
columnSource:[ columnSource:[
{ {
title: table_view.customItem(com_column_checbox,{checked:true}), title: table_view.customItem(com_column_checbox,{checked:true}),

17
example/qml/page/T_TextBox.qml
View File

@ -114,18 +114,26 @@ FluScrollablePage{
placeholderText: qsTr("AutoSuggestBox") placeholderText: qsTr("AutoSuggestBox")
items: generateRandomNames(100) items: generateRandomNames(100)
disabled: text_box_suggest_switch.checked disabled: text_box_suggest_switch.checked
itemRows: 12
showSuggestWhenPressed: text_box_show_suggest_switch.checked
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left left: parent.left
} }
} }
FluToggleSwitch{ RowLayout{
id:text_box_suggest_switch
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right
} }
text: qsTr("Disabled") FluToggleSwitch{
id:text_box_show_suggest_switch
text: qsTr("Show suggest when pressed")
}
FluToggleSwitch{
id:text_box_suggest_switch
text: qsTr("Disabled")
}
} }
} }
CodeExpander{ CodeExpander{
@ -133,6 +141,9 @@ FluScrollablePage{
Layout.topMargin: -6 Layout.topMargin: -6
code:'FluAutoSuggestBox{ code:'FluAutoSuggestBox{
placeholderText: qsTr("AutoSuggestBox") placeholderText: qsTr("AutoSuggestBox")
itemRows: 12
itemHeight: 38
showSuggestWhenPressed: false
}' }'
} }

30
example/qml/page/T_Tour.qml
View File

@ -17,20 +17,42 @@ FluScrollablePage{
{title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more} {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
] ]
} }
FluTour{
id:tour_custom_indicator
steps:[
{title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
{title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
{title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
]
indicator: Component{
FluText {
text: "%1 / %2".arg(current + 1).arg(total)
}
}
}
FluFrame{ FluFrame{
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 130 Layout.preferredHeight: 130
padding: 10 padding: 10
FluFilledButton{ Row{
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 14 topMargin: 14
} }
text: qsTr("Begin Tour") spacing: 20
onClicked: { FluFilledButton{
tour.open() text: qsTr("Begin Tour")
onClicked: {
tour.open()
}
}
FluFilledButton{
text: qsTr("Begin Tour with custom indicator")
onClicked: {
tour_custom_indicator.open()
}
} }
} }

3
example/qml/window/CrashWindow.qml
View File

@ -19,6 +19,9 @@ FluWindow {
Component.onCompleted: { Component.onCompleted: {
window.stayTop = true window.stayTop = true
} }
Component.onDestruction: {
FluRouter.exit()
}
onInitArgument: onInitArgument:
(argument)=>{ (argument)=>{

70
src/FluRectangle.cpp
View File

@ -2,33 +2,69 @@
#include <QPainterPath> #include <QPainterPath>
FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) { FluRectangle::FluRectangle(QQuickItem *parent) : QQuickPaintedItem(parent) {
color(QColor(255, 255, 255, 255)); color(Qt::white);
radius({0, 0, 0, 0}); radius({0, 0, 0, 0});
borderWidth(0);
borderColor(Qt::black);
borderStyle(Qt::SolidLine);
dashPattern({});
connect(this, &FluRectangle::colorChanged, this, [=] { update(); }); connect(this, &FluRectangle::colorChanged, this, [=] { update(); });
connect(this, &FluRectangle::radiusChanged, this, [=] { update(); }); connect(this, &FluRectangle::radiusChanged, this, [=] { update(); });
connect(this, &FluRectangle::borderWidthChanged, this, [=] { update(); });
connect(this, &FluRectangle::borderColorChanged, this, [=] { update(); });
connect(this, &FluRectangle::borderStyleChanged, this, [=] { update(); });
connect(this, &FluRectangle::dashPatternChanged, this, [=] { update(); });
} }
bool FluRectangle::borderValid() const {
return qRound(_borderWidth) >= 1 && _color.isValid() && _color.alpha() > 0;
}
void FluRectangle::paint(QPainter *painter) { void FluRectangle::paint(QPainter *painter) {
painter->save(); painter->save();
painter->setRenderHint(QPainter::Antialiasing); painter->setRenderHint(QPainter::Antialiasing);
QPainterPath path;
QRectF rect = boundingRect(); QRectF rect = boundingRect();
path.moveTo(rect.bottomRight() - QPointF(0, _radius[2])); bool drawBorder = borderValid();
path.lineTo(rect.topRight() + QPointF(0, _radius[1])); if (drawBorder) {
path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(_radius[1] * 2, 0)), // 绘制边框时画笔的宽度从路径向两侧扩充
QSize(_radius[1] * 2, _radius[1] * 2)), // 因此实际绘制的矩形应向内侧收缩边框宽度的一半，避免边框裁剪导致不完整
0, 90); qreal halfBorderWidth = _borderWidth / 2.0;
path.lineTo(rect.topLeft() + QPointF(_radius[0], 0)); rect.adjust(halfBorderWidth, halfBorderWidth, -halfBorderWidth, -halfBorderWidth);
path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(_radius[0] * 2, _radius[0] * 2)), 90, 90); }
path.lineTo(rect.bottomLeft() - QPointF(0, _radius[3]));
path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, _radius[3] * 2)), QPainterPath path;
QSize(_radius[3] * 2, _radius[3] * 2)), QList<int> r = _radius;
180, 90);
path.lineTo(rect.bottomRight() - QPointF(_radius[2], 0)); while (r.size() < 4) {
path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(_radius[2] * 2, _radius[2] * 2)), r.append(0);
QSize(_radius[2] * 2, _radius[2] * 2)), }
270, 90);
// 从右下角开始逆时针绘制圆角矩形路径
path.moveTo(rect.bottomRight() - QPointF(0, r[2]));
path.lineTo(rect.topRight() + QPointF(0, r[1]));
path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(r[1] * 2, 0)), QSize(r[1] * 2, r[1] * 2)), 0, 90);
path.lineTo(rect.topLeft() + QPointF(r[0], 0));
path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(r[0] * 2, r[0] * 2)), 90, 90);
path.lineTo(rect.bottomLeft() - QPointF(0, r[3]));
path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, r[3] * 2)), QSize(r[3] * 2, r[3] * 2)), 180, 90);
path.lineTo(rect.bottomRight() - QPointF(r[2], 0));
path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(r[2] * 2, r[2] * 2)), QSize(r[2] * 2, r[2] * 2)), 270, 90);
// 填充背景
painter->fillPath(path, _color); painter->fillPath(path, _color);
// 绘制边框
if (drawBorder) {
QPen pen(_borderColor, _borderWidth, _borderStyle);
if (_borderStyle == Qt::DashLine || _borderStyle == Qt::CustomDashLine) {
pen.setDashPattern(_dashPattern);
}
painter->strokePath(path, pen);
}
painter->restore(); painter->restore();
} }

6
src/FluRectangle.h
View File

@ -12,9 +12,15 @@ class FluRectangle : public QQuickPaintedItem {
Q_OBJECT Q_OBJECT
Q_PROPERTY_AUTO(QColor, color) Q_PROPERTY_AUTO(QColor, color)
Q_PROPERTY_AUTO(QList<int>, radius) Q_PROPERTY_AUTO(QList<int>, radius)
Q_PROPERTY_AUTO(qreal, borderWidth)
Q_PROPERTY_AUTO(QColor, borderColor)
Q_PROPERTY_AUTO(Qt::PenStyle, borderStyle)
Q_PROPERTY_AUTO(QVector<qreal>, dashPattern)
QML_NAMED_ELEMENT(FluRectangle) QML_NAMED_ELEMENT(FluRectangle)
public: public:
explicit FluRectangle(QQuickItem *parent = nullptr); explicit FluRectangle(QQuickItem *parent = nullptr);
bool borderValid() const;
void paint(QPainter *painter) override; void paint(QPainter *painter) override;
}; };

29
src/Qt5/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -7,9 +7,12 @@ FluTextBox{
property var items:[] property var items:[]
property string emptyText: qsTr("No results found") property string emptyText: qsTr("No results found")
property int autoSuggestBoxReplacement: FluentIcons.Search property int autoSuggestBoxReplacement: FluentIcons.Search
property int itemHeight: 38
property int itemRows: 8
property bool showSuggestWhenPressed: false
property string textRole: "title" property string textRole: "title"
property var filter: function(item){ property var filter: function(item){
if(item.title.indexOf(control.text)!==-1){ if(item[textRole].indexOf(control.text)!==-1){
return true return true
} }
return false return false
@ -29,17 +32,11 @@ FluTextBox{
control.updateText(modelData[textRole]) control.updateText(modelData[textRole])
} }
function loadData(){ function loadData(){
var result = []
if(items==null){ if(items==null){
list_view.model = result list_view.model = []
return return
} }
items.map(function(item){ list_view.model = items.filter(item => control.filter(item))
if(control.filter(item)){
result.push(item)
}
})
list_view.model = result
} }
} }
onActiveFocusChanged: { onActiveFocusChanged: {
@ -69,7 +66,7 @@ FluTextBox{
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
header: Item{ header: Item{
width: control.width width: control.width
height: visible ? 38 : 0 height: visible ? control.itemHeight : 0
visible: list_view.count === 0 visible: list_view.count === 0
FluText{ FluText{
text: emptyText text: emptyText
@ -82,7 +79,7 @@ FluTextBox{
} }
delegate:FluControl{ delegate:FluControl{
id: item_control id: item_control
height: 38 height: control.itemHeight
width: control.width width: control.width
onClicked: { onClicked: {
d.handleClick(modelData) d.handleClick(modelData)
@ -114,7 +111,7 @@ FluTextBox{
background:Rectangle{ background:Rectangle{
id: rect_background id: rect_background
implicitWidth: control.width implicitWidth: control.width
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8) implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
radius: 5 radius: 5
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@ -124,6 +121,14 @@ FluTextBox{
} }
} }
onTextChanged: { onTextChanged: {
control.showSuggest()
}
onPressed: {
if(control.showSuggestWhenPressed){
control.showSuggest()
}
}
function showSuggest(){
d.loadData() d.loadData()
if(d.flagVisible){ if(d.flagVisible){
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)

85
src/Qt5/imports/FluentUI/Controls/FluBadge.qml
View File

@ -5,19 +5,15 @@ import FluentUI 1.0
Rectangle{ Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: false property bool showZero: false
property int count: 0 property var count: 0
property bool topRight: false property int max: 99
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
id:control id:control
color:Qt.rgba(255/255,77/255,79/255,1) color:Qt.rgba(255/255,77/255,79/255,1)
width: { width: {
if(isDot) if(isDot)
return 10 return 10
if(count<10){ return content_text.implicitWidth + 12
return 20
}else if(count<100){
return 30
}
return 40
} }
height: { height: {
if(isDot) if(isDot)
@ -31,49 +27,74 @@ Rectangle{
} }
border.width: 1 border.width: 1
border.color: Qt.rgba(1,1,1,1) border.color: Qt.rgba(1,1,1,1)
anchors{ anchors {
left: {
if(!parent){
return undefined
}
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
}
right: { right: {
if(parent && topRight) if(!parent){
return parent.right return undefined
return undefined }
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
} }
top: { top: {
if(parent && topRight) if(!parent){
return parent.top return undefined
return undefined }
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
}
bottom: {
if(!parent){
return undefined
}
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
}
leftMargin: {
if(!parent){
return 0
}
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
} }
rightMargin: { rightMargin: {
if(parent && topRight){ if(!parent){
if(isDot){ return 0
return -2.5
}
return -(control.width/2)
} }
return 0 return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
} }
topMargin: { topMargin: {
if(parent && topRight){ if(!parent){
if(isDot){ return 0
return -2.5
}
return -10
} }
return 0 return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
}
bottomMargin: {
if(!parent){
return 0
}
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
} }
} }
visible: { visible: {
if(showZero) if(typeof(count) === "number"){
return true return showZero ? true : count !== 0
return count!==0 }
return true
} }
FluText{ FluText{
id: content_text
anchors.centerIn: parent anchors.centerIn: parent
color: Qt.rgba(1,1,1,1) color: Qt.rgba(1,1,1,1)
visible: !isDot visible: !isDot
text:{ text:{
if(count<100) if(typeof(count) === "string"){
return count return count
return "100+" }else if(typeof(count) === "number"){
return count <= max ? count.toString() : "%1+".arg(max.toString())
}
return ""
} }
} }
} }

4
src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -55,7 +55,7 @@ T.ComboBox {
font:control.font font:control.font
readOnly: control.down readOnly: control.down
color: { color: {
if(control.disabled) { if(!control.enabled) {
return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -97,7 +97,7 @@ T.ComboBox {
anchors.margins: -2 anchors.margins: -2
} }
color:{ color:{
if(disabled){ if(!enabled){
return disableColor return disableColor
} }
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor

5
src/Qt5/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -178,7 +178,12 @@ FluButton {
} }
if(type === 1){ if(type === 1){
text_month.text = model text_month.text = model
let day = list_view_3.model[list_view_3.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
if(list_view_3.model.indexOf(day) === -1){
day = list_view_3.model[list_view_3.model.length - 1]
}
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = list_view_3.model[list_view_3.currentIndex] text_day.text = list_view_3.model[list_view_3.currentIndex]
} }

4
src/Qt5/imports/FluentUI/Controls/FluMenuBarItem.qml
View File

@ -6,7 +6,7 @@ T.MenuBarItem {
property bool disabled: false property bool disabled: false
property color textColor: { property color textColor: {
if(FluTheme.dark){ if(FluTheme.dark){
if(disabled){ if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1) return Qt.rgba(131/255,131/255,131/255,1)
} }
if(pressed){ if(pressed){
@ -14,7 +14,7 @@ T.MenuBarItem {
} }
return Qt.rgba(1,1,1,1) return Qt.rgba(1,1,1,1)
}else{ }else{
if(disabled){ if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1) return Qt.rgba(160/255,160/255,160/255,1)
} }
if(pressed){ if(pressed){

4
src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -139,13 +139,13 @@ T.SpinBox {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: { border.color: {
if(contentItem.disabled){ if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
} }
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1) return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
} }
color: { color: {
if(contentItem.disabled){ if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
if(contentItem.activeFocus){ if(contentItem.activeFocus){

58
src/Qt5/imports/FluentUI/Controls/FluTableView.qml
View File

@ -17,6 +17,7 @@ Rectangle {
property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1) property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
property bool horizonalHeaderVisible: true property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true property bool verticalHeaderVisible: true
property int startRowIndex: 1
property color selectedBorderColor: FluTheme.primaryColor property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3) property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
property alias view: table_view property alias view: table_view
@ -266,30 +267,18 @@ Rectangle {
d.rowHoverIndex = row d.rowHoverIndex = row
} }
onWidthChanged: { onWidthChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onHeightChanged: { onHeightChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onXChanged: { onXChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onYChanged: { onYChanged: {
updatePosition()
}
function updatePosition(){
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
@ -310,9 +299,11 @@ Rectangle {
} }
function updateTableItem(){ function updateTableItem(){
var columnModel = control.columnSource[column] var columnModel = control.columnSource[column]
columnModel.x = item_table_mouse.x if(columnModel.x !== item_table_mouse.x || columnModel.y !== item_table_mouse.y){
columnModel.y = item_table_mouse.y columnModel.x = item_table_mouse.x
d.tableItemLayout(column) columnModel.y = item_table_mouse.y
d.tableItemLayout(column)
}
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
@ -352,6 +343,7 @@ Rectangle {
} }
FluLoader{ FluLoader{
id: item_table_loader id: item_table_loader
property var tableView: control
property var model: item_table_mouse._model property var model: item_table_mouse._model
property var display: rowModel[columnModel.dataIndex] property var display: rowModel[columnModel.dataIndex]
property var rowModel : model.rowModel property var rowModel : model.rowModel
@ -445,10 +437,6 @@ Rectangle {
} }
} }
onWidthChanged:{
table_view.forceLayout()
}
MouseArea{ MouseArea{
id:layout_mouse_table id:layout_mouse_table
hoverEnabled: true hoverEnabled: true
@ -479,6 +467,9 @@ Rectangle {
table_view.flick(0,1) table_view.flick(0,1)
} }
delegate: com_table_delegate delegate: com_table_delegate
onWidthChanged: {
Qt.callLater(forceLayout)
}
} }
} }
@ -851,7 +842,13 @@ Rectangle {
Connections{ Connections{
target: table_view target: table_view
function onRowsChanged(){ function onRowsChanged(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1})) header_vertical.updateRowIndex()
}
}
Connections {
target: control
function onStartRowIndexChanged(){
header_vertical.updateRowIndex()
} }
} }
Timer{ Timer{
@ -861,6 +858,9 @@ Rectangle {
header_vertical.forceLayout() header_vertical.forceLayout()
} }
} }
function updateRowIndex(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
}
} }
Item{ Item{
anchors{ anchors{
@ -955,18 +955,18 @@ Rectangle {
target: d target: d
function onTableItemLayout(column){ function onTableItemLayout(column){
if(item_layout_frozen._index === column){ if(item_layout_frozen._index === column){
updateLayout() Qt.callLater(updateLayout)
} }
} }
} }
Connections{ Connections{
target: table_view target: table_view
function onContentXChanged(){ function onContentXChanged(){
updateLayout() Qt.callLater(updateLayout)
} }
} }
function updateLayout(){ function updateLayout(){
width = table_view.columnWidthProvider(_index) width = Qt.binding(() => table_view.columnWidthProvider(_index))
x = Qt.binding(function(){ x = Qt.binding(function(){
var minX = 0 var minX = 0
var maxX = table_view.width-width var maxX = table_view.width-width

2
src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -6,7 +6,7 @@ FluControlBackground{
property Item inputItem property Item inputItem
id:control id:control
color: { color: {
if(inputItem && inputItem.disabled){ if(inputItem && !inputItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
if(inputItem && inputItem.activeFocus){ if(inputItem && inputItem.activeFocus){

229
src/Qt5/imports/FluentUI/Controls/FluTour.qml
View File

@ -7,8 +7,10 @@ import FluentUI 1.0
Popup{ Popup{
property var steps : [] property var steps : []
property int targetMargins: 5 property int targetMargins: 5
property int targetRadius: 2
property Component nextButton: com_next_button property Component nextButton: com_next_button
property Component prevButton: com_prev_button property Component prevButton: com_prev_button
property Component indicator: com_indicator
property int index : 0 property int index : 0
property string finishText: qsTr("Finish") property string finishText: qsTr("Finish")
property string nextText: qsTr("Next") property string nextText: qsTr("Next")
@ -22,12 +24,12 @@ Popup{
contentItem: Item{} contentItem: Item{}
onVisibleChanged: { onVisibleChanged: {
if(visible){ if(visible){
d.animationEnabled = false
control.index = 0 control.index = 0
d.updatePos()
d.animationEnabled = true
} }
} }
onIndexChanged: {
canvas.requestPaint()
}
Component{ Component{
id: com_next_button id: com_next_button
FluFilledButton{ FluFilledButton{
@ -50,10 +52,32 @@ Popup{
} }
} }
} }
Component{
id: com_indicator
Row{
spacing: 10
Repeater{
model: total
delegate: Rectangle{
width: 8
height: 8
radius: 4
scale: current === index ? 1.2 : 1
color:{
if(current === index){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
}
}
}
}
}
Item{ Item{
id:d id:d
property var window: Window.window property var window: Window.window
property point pos: Qt.point(0,0) property point pos: Qt.point(0,0)
property bool animationEnabled: true
property var step: steps[index] property var step: steps[index]
property var target: { property var target: {
if(steps[index]){ if(steps[index]){
@ -73,15 +97,22 @@ Popup{
} }
return control.width return control.width
} }
function updatePos(){
if(d.target && d.window){
d.pos = d.target.mapToGlobal(0,0)
d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
}
}
onTargetChanged: {
updatePos()
}
} }
Connections{ Connections{
target: d.window target: d.window
function onWidthChanged(){ function onWidthChanged(){
canvas.requestPaint()
timer_delay.restart() timer_delay.restart()
} }
function onHeightChanged(){ function onHeightChanged(){
canvas.requestPaint()
timer_delay.restart() timer_delay.restart()
} }
} }
@ -89,39 +120,128 @@ Popup{
id: timer_delay id: timer_delay
interval: 200 interval: 200
onTriggered: { onTriggered: {
canvas.requestPaint() d.updatePos()
} }
} }
Canvas{ Item{
id: canvas id: targetRect
anchors.fill: parent x: d.pos.x - control.targetMargins
onPaint: { y: d.pos.y - control.targetMargins
d.pos = d.target.mapToGlobal(0,0) width: d.target ? d.target.width + control.targetMargins * 2 : 0
d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y) height: d.target ? d.target.height + control.targetMargins * 2 : 0
var ctx = canvas.getContext("2d") Behavior on x {
ctx.clearRect(0, 0, canvasSize.width, canvasSize.height) enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.save() NumberAnimation {
ctx.fillStyle = "#88000000" duration: 167
ctx.fillRect(0, 0, canvasSize.width, canvasSize.height) }
ctx.globalCompositeOperation = 'destination-out'
ctx.fillStyle = 'black'
var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
drawRoundedRect(rect,2,ctx)
ctx.restore()
} }
function drawRoundedRect(rect, r, ctx) { Behavior on y {
ctx.beginPath(); enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.moveTo(rect.x + r, rect.y); NumberAnimation {
ctx.lineTo(rect.x + rect.width - r, rect.y); duration: 167
ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r); }
ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r); }
ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r); Behavior on width {
ctx.lineTo(rect.x + r, rect.y + rect.height); enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r); NumberAnimation {
ctx.lineTo(rect.x, rect.y + r); duration: 167
ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r); }
ctx.closePath(); }
ctx.fill() Behavior on height {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
}
Shape {
anchors.fill: parent
layer.enabled: true
layer.samples: 4
layer.smooth: true
ShapePath {
fillColor: "#88000000"
strokeWidth: 0
strokeColor: "transparent"
// draw background
PathMove {
x: 0
y: 0
}
PathLine {
x: control.width
y: 0
}
PathLine {
x: control.width
y: control.height
}
PathLine {
x: 0
y: control.height
}
PathLine {
x: 0
y: 0
}
// draw highlight
PathMove {
x: targetRect.x + control.targetRadius
y: targetRect.y
}
PathLine {
x: targetRect.x + targetRect.width - control.targetRadius
y: targetRect.y
}
PathArc {
x: targetRect.x + targetRect.width
y: targetRect.y + control.targetRadius
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x + targetRect.width
y: targetRect.y + targetRect.height - control.targetRadius
}
PathArc {
x: targetRect.x + targetRect.width - control.targetRadius
y: targetRect.y + targetRect.height
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x + control.targetRadius
y: targetRect.y + targetRect.height
}
PathArc {
x: targetRect.x
y: targetRect.y + targetRect.height - control.targetRadius
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x
y: targetRect.y + control.targetRadius
}
PathArc {
x: targetRect.x + control.targetRadius
y: targetRect.y
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
} }
} }
FluFrame{ FluFrame{
@ -151,6 +271,18 @@ Popup{
return 0 return 0
} }
border.width: 0 border.width: 0
Behavior on x {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
Behavior on y {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
FluShadow{ FluShadow{
radius: 5 radius: 5
} }
@ -193,10 +325,21 @@ Popup{
leftMargin: 15 leftMargin: 15
} }
} }
FluLoader{
readonly property int total: steps.length
readonly property int current: control.index
sourceComponent: control.indicator
anchors{
bottom: parent.bottom
left: parent.left
bottomMargin: 15
leftMargin: 15
}
}
FluLoader{ FluLoader{
id: loader_next id: loader_next
property bool isEnd: control.index === steps.length-1 property bool isEnd: control.index === steps.length-1
sourceComponent: com_next_button sourceComponent: control.nextButton
anchors{ anchors{
top: text_desc.bottom top: text_desc.bottom
topMargin: 10 topMargin: 10
@ -207,7 +350,7 @@ Popup{
FluLoader{ FluLoader{
id: loader_prev id: loader_prev
visible: control.index !== 0 visible: control.index !== 0
sourceComponent: com_prev_button sourceComponent: control.prevButton
anchors{ anchors{
right: loader_next.left right: loader_next.left
top: loader_next.top top: loader_next.top
@ -246,5 +389,17 @@ Popup{
} }
return 0 return 0
} }
Behavior on x {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
Behavior on y {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
} }
} }

22
src/Qt5/imports/FluentUI/plugins.qmltypes
View File

@ -231,6 +231,10 @@ Module {
exportMetaObjectRevisions: [0] exportMetaObjectRevisions: [0]
Property { name: "color"; type: "QColor" } Property { name: "color"; type: "QColor" }
Property { name: "radius"; type: "QList<int>" } Property { name: "radius"; type: "QList<int>" }
Property { name: "borderWidth"; type: "double" }
Property { name: "borderColor"; type: "QColor" }
Property { name: "borderStyle"; type: "Qt::PenStyle" }
Property { name: "dashPattern"; type: "QVector<qreal>" }
} }
Component { Component {
name: "FluSheetType" name: "FluSheetType"
@ -2776,7 +2780,7 @@ Module {
} }
Property { Property {
name: "layoutMacosButtons" name: "layoutMacosButtons"
type: "FluLoader_QMLTYPE_14" type: "FluLoader_QMLTYPE_12"
isReadonly: true isReadonly: true
isPointer: true isPointer: true
} }
@ -2797,12 +2801,16 @@ Module {
Property { name: "items"; type: "QVariant" } Property { name: "items"; type: "QVariant" }
Property { name: "emptyText"; type: "string" } Property { name: "emptyText"; type: "string" }
Property { name: "autoSuggestBoxReplacement"; type: "int" } Property { name: "autoSuggestBoxReplacement"; type: "int" }
Property { name: "itemHeight"; type: "int" }
Property { name: "itemRows"; type: "int" }
Property { name: "showSuggestWhenPressed"; type: "bool" }
Property { name: "textRole"; type: "string" } Property { name: "textRole"; type: "string" }
Property { name: "filter"; type: "QVariant" } Property { name: "filter"; type: "QVariant" }
Signal { Signal {
name: "itemClicked" name: "itemClicked"
Parameter { name: "data"; type: "QVariant" } Parameter { name: "data"; type: "QVariant" }
} }
Method { name: "showSuggest"; type: "QVariant" }
Method { Method {
name: "updateText" name: "updateText"
type: "QVariant" type: "QVariant"
@ -2830,8 +2838,9 @@ Module {
defaultProperty: "data" defaultProperty: "data"
Property { name: "isDot"; type: "bool" } Property { name: "isDot"; type: "bool" }
Property { name: "showZero"; type: "bool" } Property { name: "showZero"; type: "bool" }
Property { name: "count"; type: "int" } Property { name: "count"; type: "QVariant" }
Property { name: "topRight"; type: "bool" } Property { name: "max"; type: "int" }
Property { name: "position"; type: "string" }
} }
Component { Component {
prototype: "QQuickItem" prototype: "QQuickItem"
@ -3479,8 +3488,8 @@ Module {
Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true } Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
Property { name: "topPadding"; type: "int" } Property { name: "topPadding"; type: "int" }
Property { name: "pageMode"; type: "int" } Property { name: "pageMode"; type: "int" }
Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_47"; isPointer: true } Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_47"; isPointer: true } Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_49"; isPointer: true }
Property { name: "navCompactWidth"; type: "int" } Property { name: "navCompactWidth"; type: "int" }
Property { name: "navTopMargin"; type: "int" } Property { name: "navTopMargin"; type: "int" }
Property { name: "cellHeight"; type: "int" } Property { name: "cellHeight"; type: "int" }
@ -4085,6 +4094,7 @@ Module {
Property { name: "borderColor"; type: "QColor" } Property { name: "borderColor"; type: "QColor" }
Property { name: "horizonalHeaderVisible"; type: "bool" } Property { name: "horizonalHeaderVisible"; type: "bool" }
Property { name: "verticalHeaderVisible"; type: "bool" } Property { name: "verticalHeaderVisible"; type: "bool" }
Property { name: "startRowIndex"; type: "int" }
Property { name: "selectedBorderColor"; type: "QColor" } Property { name: "selectedBorderColor"; type: "QColor" }
Property { name: "selectedColor"; type: "QColor" } Property { name: "selectedColor"; type: "QColor" }
Property { name: "columnWidthProvider"; type: "QVariant" } Property { name: "columnWidthProvider"; type: "QVariant" }
@ -4320,8 +4330,10 @@ Module {
defaultProperty: "contentData" defaultProperty: "contentData"
Property { name: "steps"; type: "QVariant" } Property { name: "steps"; type: "QVariant" }
Property { name: "targetMargins"; type: "int" } Property { name: "targetMargins"; type: "int" }
Property { name: "targetRadius"; type: "int" }
Property { name: "nextButton"; type: "QQmlComponent"; isPointer: true } Property { name: "nextButton"; type: "QQmlComponent"; isPointer: true }
Property { name: "prevButton"; type: "QQmlComponent"; isPointer: true } Property { name: "prevButton"; type: "QQmlComponent"; isPointer: true }
Property { name: "indicator"; type: "QQmlComponent"; isPointer: true }
Property { name: "index"; type: "int" } Property { name: "index"; type: "int" }
Property { name: "finishText"; type: "string" } Property { name: "finishText"; type: "string" }
Property { name: "nextText"; type: "string" } Property { name: "nextText"; type: "string" }

29
src/Qt6/imports/FluentUI/Controls/FluAutoSuggestBox.qml
View File

@ -6,9 +6,12 @@ FluTextBox{
property var items:[] property var items:[]
property string emptyText: qsTr("No results found") property string emptyText: qsTr("No results found")
property int autoSuggestBoxReplacement: FluentIcons.Search property int autoSuggestBoxReplacement: FluentIcons.Search
property int itemHeight: 38
property int itemRows: 8
property bool showSuggestWhenPressed: false
property string textRole: "title" property string textRole: "title"
property var filter: function(item){ property var filter: function(item){
if(item.title.indexOf(control.text)!==-1){ if(item[textRole].indexOf(control.text)!==-1){
return true return true
} }
return false return false
@ -28,17 +31,11 @@ FluTextBox{
control.updateText(modelData[textRole]) control.updateText(modelData[textRole])
} }
function loadData(){ function loadData(){
var result = []
if(items==null){ if(items==null){
list_view.model = result list_view.model = []
return return
} }
items.map(function(item){ list_view.model = items.filter(item => control.filter(item))
if(control.filter(item)){
result.push(item)
}
})
list_view.model = result
} }
} }
onActiveFocusChanged: { onActiveFocusChanged: {
@ -68,7 +65,7 @@ FluTextBox{
ScrollBar.vertical: FluScrollBar {} ScrollBar.vertical: FluScrollBar {}
header: Item{ header: Item{
width: control.width width: control.width
height: visible ? 38 : 0 height: visible ? control.itemHeight : 0
visible: list_view.count === 0 visible: list_view.count === 0
FluText{ FluText{
text: emptyText text: emptyText
@ -81,7 +78,7 @@ FluTextBox{
} }
delegate:FluControl{ delegate:FluControl{
id: item_control id: item_control
height: 38 height: control.itemHeight
width: control.width width: control.width
onClicked: { onClicked: {
d.handleClick(modelData) d.handleClick(modelData)
@ -113,7 +110,7 @@ FluTextBox{
background:Rectangle{ background:Rectangle{
id: rect_background id: rect_background
implicitWidth: control.width implicitWidth: control.width
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8) implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
radius: 5 radius: 5
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1) color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1) border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
@ -123,6 +120,14 @@ FluTextBox{
} }
} }
onTextChanged: { onTextChanged: {
control.showSuggest()
}
onPressed: {
if(control.showSuggestWhenPressed){
control.showSuggest()
}
}
function showSuggest(){
d.loadData() d.loadData()
if(d.flagVisible){ if(d.flagVisible){
var pos = control.mapToItem(null, 0, 0) var pos = control.mapToItem(null, 0, 0)

85
src/Qt6/imports/FluentUI/Controls/FluBadge.qml
View File

@ -5,19 +5,15 @@ import FluentUI
Rectangle{ Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: false property bool showZero: false
property int count: 0 property var count: 0
property bool topRight: false property int max: 99
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
id:control id:control
color:Qt.rgba(255/255,77/255,79/255,1) color:Qt.rgba(255/255,77/255,79/255,1)
width: { width: {
if(isDot) if(isDot)
return 10 return 10
if(count<10){ return content_text.implicitWidth + 12
return 20
}else if(count<100){
return 30
}
return 40
} }
height: { height: {
if(isDot) if(isDot)
@ -31,49 +27,74 @@ Rectangle{
} }
border.width: 1 border.width: 1
border.color: Qt.rgba(1,1,1,1) border.color: Qt.rgba(1,1,1,1)
anchors{ anchors {
left: {
if(!parent){
return undefined
}
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
}
right: { right: {
if(parent && topRight) if(!parent){
return parent.right return undefined
return undefined }
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
} }
top: { top: {
if(parent && topRight) if(!parent){
return parent.top return undefined
return undefined }
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
}
bottom: {
if(!parent){
return undefined
}
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
}
leftMargin: {
if(!parent){
return 0
}
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
} }
rightMargin: { rightMargin: {
if(parent && topRight){ if(!parent){
if(isDot){ return 0
return -2.5
}
return -(control.width/2)
} }
return 0 return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
} }
topMargin: { topMargin: {
if(parent && topRight){ if(!parent){
if(isDot){ return 0
return -2.5
}
return -10
} }
return 0 return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
}
bottomMargin: {
if(!parent){
return 0
}
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
} }
} }
visible: { visible: {
if(showZero) if(typeof(count) === "number"){
return true return showZero ? true : count !== 0
return count!==0 }
return true
} }
FluText{ FluText{
id: content_text
anchors.centerIn: parent anchors.centerIn: parent
color: Qt.rgba(1,1,1,1) color: Qt.rgba(1,1,1,1)
visible: !isDot visible: !isDot
text:{ text:{
if(count<100) if(typeof(count) === "string"){
return count return count
return "100+" }else if(typeof(count) === "number"){
return count <= max ? count.toString() : "%1+".arg(max.toString())
}
return ""
} }
} }
} }

4
src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -55,7 +55,7 @@ T.ComboBox {
font:control.font font:control.font
readOnly: control.down readOnly: control.down
color: { color: {
if(control.disabled) { if(!control.enabled) {
return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1) return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
} }
return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1) return FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@ -97,7 +97,7 @@ T.ComboBox {
anchors.margins: -2 anchors.margins: -2
} }
color:{ color:{
if(disabled){ if(!enabled){
return disableColor return disableColor
} }
return hovered ? hoverColor :normalColor return hovered ? hoverColor :normalColor

5
src/Qt6/imports/FluentUI/Controls/FluDatePicker.qml
View File

@ -178,7 +178,12 @@ FluButton {
} }
if(type === 1){ if(type === 1){
text_month.text = model text_month.text = model
let day = list_view_3.model[list_view_3.currentIndex]
list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex]) list_view_3.model = generateMonthDaysArray(list_view_1.model[list_view_1.currentIndex],list_view_2.model[list_view_2.currentIndex])
if(list_view_3.model.indexOf(day) === -1){
day = list_view_3.model[list_view_3.model.length - 1]
}
list_view_3.currentIndex = list_view_3.model.indexOf(day)
text_day.text = list_view_3.model[list_view_3.currentIndex] text_day.text = list_view_3.model[list_view_3.currentIndex]
} }

4
src/Qt6/imports/FluentUI/Controls/FluMenuBarItem.qml
View File

@ -7,7 +7,7 @@ T.MenuBarItem {
property bool disabled: false property bool disabled: false
property color textColor: { property color textColor: {
if(FluTheme.dark){ if(FluTheme.dark){
if(disabled){ if(!enabled){
return Qt.rgba(131/255,131/255,131/255,1) return Qt.rgba(131/255,131/255,131/255,1)
} }
if(pressed){ if(pressed){
@ -15,7 +15,7 @@ T.MenuBarItem {
} }
return Qt.rgba(1,1,1,1) return Qt.rgba(1,1,1,1)
}else{ }else{
if(disabled){ if(!enabled){
return Qt.rgba(160/255,160/255,160/255,1) return Qt.rgba(160/255,160/255,160/255,1)
} }
if(pressed){ if(pressed){

4
src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
View File

@ -140,13 +140,13 @@ T.SpinBox {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: { border.color: {
if(contentItem.disabled){ if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1) return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
} }
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1) return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
} }
color: { color: {
if(contentItem.disabled){ if(!contentItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
if(contentItem.activeFocus){ if(contentItem.activeFocus){

58
src/Qt6/imports/FluentUI/Controls/FluTableView.qml
View File

@ -17,6 +17,7 @@ Rectangle {
property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1) property color borderColor: FluTheme.dark ? Qt.rgba(37/255,37/255,37/255,1) : Qt.rgba(228/255,228/255,228/255,1)
property bool horizonalHeaderVisible: true property bool horizonalHeaderVisible: true
property bool verticalHeaderVisible: true property bool verticalHeaderVisible: true
property int startRowIndex: 1
property color selectedBorderColor: FluTheme.primaryColor property color selectedBorderColor: FluTheme.primaryColor
property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3) property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
property alias view: table_view property alias view: table_view
@ -266,30 +267,18 @@ Rectangle {
d.rowHoverIndex = row d.rowHoverIndex = row
} }
onWidthChanged: { onWidthChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onHeightChanged: { onHeightChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onXChanged: { onXChanged: {
if(editVisible){ updatePosition()
updateEditPosition()
}
if(isMainTable){
updateTableItem()
}
} }
onYChanged: { onYChanged: {
updatePosition()
}
function updatePosition(){
if(editVisible){ if(editVisible){
updateEditPosition() updateEditPosition()
} }
@ -310,9 +299,11 @@ Rectangle {
} }
function updateTableItem(){ function updateTableItem(){
var columnModel = control.columnSource[column] var columnModel = control.columnSource[column]
columnModel.x = item_table_mouse.x if(columnModel.x !== item_table_mouse.x || columnModel.y !== item_table_mouse.y){
columnModel.y = item_table_mouse.y columnModel.x = item_table_mouse.x
d.tableItemLayout(column) columnModel.y = item_table_mouse.y
d.tableItemLayout(column)
}
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
@ -352,6 +343,7 @@ Rectangle {
} }
FluLoader{ FluLoader{
id: item_table_loader id: item_table_loader
property var tableView: control
property var model: item_table_mouse._model property var model: item_table_mouse._model
property var display: rowModel[columnModel.dataIndex] property var display: rowModel[columnModel.dataIndex]
property var rowModel : model.rowModel property var rowModel : model.rowModel
@ -445,10 +437,6 @@ Rectangle {
} }
} }
onWidthChanged:{
table_view.forceLayout()
}
MouseArea{ MouseArea{
id:layout_mouse_table id:layout_mouse_table
hoverEnabled: true hoverEnabled: true
@ -479,6 +467,9 @@ Rectangle {
table_view.flick(0,1) table_view.flick(0,1)
} }
delegate: com_table_delegate delegate: com_table_delegate
onWidthChanged: {
Qt.callLater(forceLayout)
}
} }
} }
@ -851,7 +842,13 @@ Rectangle {
Connections{ Connections{
target: table_view target: table_view
function onRowsChanged(){ function onRowsChanged(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+1})) header_vertical.updateRowIndex()
}
}
Connections {
target: control
function onStartRowIndexChanged(){
header_vertical.updateRowIndex()
} }
} }
Timer{ Timer{
@ -861,6 +858,9 @@ Rectangle {
header_vertical.forceLayout() header_vertical.forceLayout()
} }
} }
function updateRowIndex(){
header_row_model.rows = Array.from({length: table_view.rows}, (_, i) => ({rowIndex:i+control.startRowIndex}))
}
} }
Item{ Item{
anchors{ anchors{
@ -955,18 +955,18 @@ Rectangle {
target: d target: d
function onTableItemLayout(column){ function onTableItemLayout(column){
if(item_layout_frozen._index === column){ if(item_layout_frozen._index === column){
updateLayout() Qt.callLater(updateLayout)
} }
} }
} }
Connections{ Connections{
target: table_view target: table_view
function onContentXChanged(){ function onContentXChanged(){
updateLayout() Qt.callLater(updateLayout)
} }
} }
function updateLayout(){ function updateLayout(){
width = table_view.columnWidthProvider(_index) width = Qt.binding(() => table_view.columnWidthProvider(_index))
x = Qt.binding(function(){ x = Qt.binding(function(){
var minX = 0 var minX = 0
var maxX = table_view.width-width var maxX = table_view.width-width

2
src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
View File

@ -6,7 +6,7 @@ FluControlBackground{
property Item inputItem property Item inputItem
id:control id:control
color: { color: {
if(inputItem && inputItem.disabled){ if(inputItem && !inputItem.enabled){
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
} }
if(inputItem && inputItem.activeFocus){ if(inputItem && inputItem.activeFocus){

229
src/Qt6/imports/FluentUI/Controls/FluTour.qml
View File

@ -7,8 +7,10 @@ import FluentUI
Popup{ Popup{
property var steps : [] property var steps : []
property int targetMargins: 5 property int targetMargins: 5
property int targetRadius: 2
property Component nextButton: com_next_button property Component nextButton: com_next_button
property Component prevButton: com_prev_button property Component prevButton: com_prev_button
property Component indicator: com_indicator
property int index : 0 property int index : 0
property string finishText: qsTr("Finish") property string finishText: qsTr("Finish")
property string nextText: qsTr("Next") property string nextText: qsTr("Next")
@ -22,12 +24,12 @@ Popup{
contentItem: Item{} contentItem: Item{}
onVisibleChanged: { onVisibleChanged: {
if(visible){ if(visible){
d.animationEnabled = false
control.index = 0 control.index = 0
d.updatePos()
d.animationEnabled = true
} }
} }
onIndexChanged: {
canvas.requestPaint()
}
Component{ Component{
id: com_next_button id: com_next_button
FluFilledButton{ FluFilledButton{
@ -50,10 +52,32 @@ Popup{
} }
} }
} }
Component{
id: com_indicator
Row{
spacing: 10
Repeater{
model: total
delegate: Rectangle{
width: 8
height: 8
radius: 4
scale: current === index ? 1.2 : 1
color:{
if(current === index){
return FluTheme.primaryColor
}
return FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
}
}
}
}
}
Item{ Item{
id:d id:d
property var window: Window.window property var window: Window.window
property point pos: Qt.point(0,0) property point pos: Qt.point(0,0)
property bool animationEnabled: true
property var step: steps[index] property var step: steps[index]
property var target: { property var target: {
if(steps[index]){ if(steps[index]){
@ -73,15 +97,22 @@ Popup{
} }
return control.width return control.width
} }
function updatePos(){
if(d.target && d.window){
d.pos = d.target.mapToGlobal(0,0)
d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y)
}
}
onTargetChanged: {
updatePos()
}
} }
Connections{ Connections{
target: d.window target: d.window
function onWidthChanged(){ function onWidthChanged(){
canvas.requestPaint()
timer_delay.restart() timer_delay.restart()
} }
function onHeightChanged(){ function onHeightChanged(){
canvas.requestPaint()
timer_delay.restart() timer_delay.restart()
} }
} }
@ -89,39 +120,128 @@ Popup{
id: timer_delay id: timer_delay
interval: 200 interval: 200
onTriggered: { onTriggered: {
canvas.requestPaint() d.updatePos()
} }
} }
Canvas{ Item{
id: canvas id: targetRect
anchors.fill: parent x: d.pos.x - control.targetMargins
onPaint: { y: d.pos.y - control.targetMargins
d.pos = d.target.mapToGlobal(0,0) width: d.target ? d.target.width + control.targetMargins * 2 : 0
d.pos = Qt.point(d.pos.x-d.window.x,d.pos.y-d.window.y) height: d.target ? d.target.height + control.targetMargins * 2 : 0
var ctx = canvas.getContext("2d") Behavior on x {
ctx.clearRect(0, 0, canvasSize.width, canvasSize.height) enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.save() NumberAnimation {
ctx.fillStyle = "#88000000" duration: 167
ctx.fillRect(0, 0, canvasSize.width, canvasSize.height) }
ctx.globalCompositeOperation = 'destination-out'
ctx.fillStyle = 'black'
var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
drawRoundedRect(rect,2,ctx)
ctx.restore()
} }
function drawRoundedRect(rect, r, ctx) { Behavior on y {
ctx.beginPath(); enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.moveTo(rect.x + r, rect.y); NumberAnimation {
ctx.lineTo(rect.x + rect.width - r, rect.y); duration: 167
ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r); }
ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r); }
ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r); Behavior on width {
ctx.lineTo(rect.x + r, rect.y + rect.height); enabled: d.animationEnabled && FluTheme.animationEnabled
ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r); NumberAnimation {
ctx.lineTo(rect.x, rect.y + r); duration: 167
ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r); }
ctx.closePath(); }
ctx.fill() Behavior on height {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
}
Shape {
anchors.fill: parent
layer.enabled: true
layer.samples: 4
layer.smooth: true
ShapePath {
fillColor: "#88000000"
strokeWidth: 0
strokeColor: "transparent"
// draw background
PathMove {
x: 0
y: 0
}
PathLine {
x: control.width
y: 0
}
PathLine {
x: control.width
y: control.height
}
PathLine {
x: 0
y: control.height
}
PathLine {
x: 0
y: 0
}
// draw highlight
PathMove {
x: targetRect.x + control.targetRadius
y: targetRect.y
}
PathLine {
x: targetRect.x + targetRect.width - control.targetRadius
y: targetRect.y
}
PathArc {
x: targetRect.x + targetRect.width
y: targetRect.y + control.targetRadius
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x + targetRect.width
y: targetRect.y + targetRect.height - control.targetRadius
}
PathArc {
x: targetRect.x + targetRect.width - control.targetRadius
y: targetRect.y + targetRect.height
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x + control.targetRadius
y: targetRect.y + targetRect.height
}
PathArc {
x: targetRect.x
y: targetRect.y + targetRect.height - control.targetRadius
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: targetRect.x
y: targetRect.y + control.targetRadius
}
PathArc {
x: targetRect.x + control.targetRadius
y: targetRect.y
radiusX: control.targetRadius
radiusY: control.targetRadius
useLargeArc: false
direction: PathArc.Clockwise
}
} }
} }
FluFrame{ FluFrame{
@ -151,6 +271,18 @@ Popup{
return 0 return 0
} }
border.width: 0 border.width: 0
Behavior on x {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
Behavior on y {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
FluShadow{ FluShadow{
radius: 5 radius: 5
} }
@ -193,10 +325,21 @@ Popup{
leftMargin: 15 leftMargin: 15
} }
} }
FluLoader{
readonly property int total: steps.length
readonly property int current: control.index
sourceComponent: control.indicator
anchors{
bottom: parent.bottom
left: parent.left
bottomMargin: 15
leftMargin: 15
}
}
FluLoader{ FluLoader{
id: loader_next id: loader_next
property bool isEnd: control.index === steps.length-1 property bool isEnd: control.index === steps.length-1
sourceComponent: com_next_button sourceComponent: control.nextButton
anchors{ anchors{
top: text_desc.bottom top: text_desc.bottom
topMargin: 10 topMargin: 10
@ -207,7 +350,7 @@ Popup{
FluLoader{ FluLoader{
id: loader_prev id: loader_prev
visible: control.index !== 0 visible: control.index !== 0
sourceComponent: com_prev_button sourceComponent: control.prevButton
anchors{ anchors{
right: loader_next.left right: loader_next.left
top: loader_next.top top: loader_next.top
@ -246,5 +389,17 @@ Popup{
} }
return 0 return 0
} }
Behavior on x {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
Behavior on y {
enabled: d.animationEnabled && FluTheme.animationEnabled
NumberAnimation {
duration: 167
}
}
} }
} }