FluentUI/example/qml/window/MainWindow.qml

275 lines
8.3 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-03-30 21:52:55 +08:00
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
2023-04-16 02:28:58 +08:00
import Qt.labs.platform
2023-03-30 21:52:55 +08:00
import FluentUI
2023-05-19 07:57:23 +08:00
import "../component"
2023-04-27 09:38:57 +08:00
import "qrc:///example/qml/global/"
2023-02-26 23:47:07 +08:00
2023-05-19 07:57:23 +08:00
CustomWindow {
2023-04-22 18:08:11 +08:00
2023-04-16 02:28:58 +08:00
id:window
2023-04-22 18:08:11 +08:00
title: "FluentUI"
2023-03-29 15:43:23 +08:00
width: 1000
2023-03-28 17:53:46 +08:00
height: 640
2023-04-16 02:28:58 +08:00
closeDestory:false
2023-03-24 18:25:13 +08:00
minimumWidth: 520
2023-03-29 22:42:08 +08:00
minimumHeight: 460
2023-05-17 18:15:15 +08:00
appBarVisible: false
2023-05-10 10:32:37 +08:00
launchMode: FluWindow.SingleTask
2023-02-27 18:46:39 +08:00
2023-04-20 20:13:31 +08:00
closeFunc:function(event){
close_app.open()
event.accepted = false
}
2023-04-22 00:29:47 +08:00
Connections{
target: appInfo
function onActiveWindow(){
window.show()
window.raise()
window.requestActivate()
}
}
2023-04-16 02:28:58 +08:00
SystemTrayIcon {
2023-04-20 19:15:38 +08:00
id:system_tray
2023-04-16 02:28:58 +08:00
visible: true
2023-04-27 09:38:57 +08:00
icon.source: "qrc:/example/res/image/favicon.ico"
2023-04-19 09:41:08 +08:00
tooltip: "FluentUI"
menu: Menu {
MenuItem {
text: "退出"
onTriggered: {
2023-05-11 18:24:58 +08:00
window.deleteWindow()
2023-04-19 09:41:08 +08:00
FluApp.closeApp()
}
}
2023-04-16 02:28:58 +08:00
}
2023-04-19 09:41:08 +08:00
onActivated:
(reason)=>{
if(reason === SystemTrayIcon.Trigger){
window.show()
window.raise()
window.requestActivate()
}
}
2023-04-16 02:28:58 +08:00
}
FluContentDialog{
id:close_app
title:"退出"
message:"确定要退出程序吗?"
negativeText:"最小化"
buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
onNegativeClicked:{
window.hide()
2023-06-08 14:23:00 +08:00
system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
}
positiveText:"退出"
neutralText:"取消"
blurSource: nav_view
onPositiveClicked:{
2023-05-11 18:24:58 +08:00
window.deleteWindow()
FluApp.closeApp()
}
2023-05-17 18:15:15 +08:00
}
2023-06-09 18:15:09 +08:00
Flipable{
id:flipable
anchors.fill: parent
property bool flipped: false
2023-06-10 11:01:36 +08:00
property real flipAngle: 0
2023-06-09 18:15:09 +08:00
transform: Rotation {
id: rotation
origin.x: flipable.width/2
origin.y: flipable.height/2
axis { x: 0; y: 1; z: 0 }
2023-06-10 11:01:36 +08:00
angle: flipable.flipAngle
2023-06-09 18:15:09 +08:00
}
states: State {
2023-06-10 11:01:36 +08:00
PropertyChanges { target: flipable; flipAngle: 180 }
2023-06-09 18:15:09 +08:00
when: flipable.flipped
}
transitions: Transition {
2023-06-10 11:01:36 +08:00
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
2023-06-09 18:15:09 +08:00
}
back: Item{
anchors.fill: flipable
2023-06-10 11:01:36 +08:00
visible: flipable.flipAngle !== 0
2023-06-09 18:15:09 +08:00
FluAppBar {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
darkText: lang.dark_mode
showDark: true
z:7
2023-06-10 11:01:36 +08:00
darkClickListener:(button)=>handleDarkChanged(button)
2023-06-09 18:15:09 +08:00
}
FluIconButton{
iconSource: FluentIcons.ChromeBack
width: 30
height: 30
iconSize: 13
z:8
onClicked: {
flipable.flipped = false
2023-03-30 17:16:57 +08:00
}
2023-06-09 18:15:09 +08:00
}
FluText{
font: FluTextStyle.Title
text:"建设中..."
anchors.centerIn: parent
}
2023-03-30 17:16:57 +08:00
}
2023-06-09 18:15:09 +08:00
front: Item{
2023-06-10 11:01:36 +08:00
id:page_front
visible: flipable.flipAngle !== 180
2023-06-09 18:15:09 +08:00
anchors.fill: flipable
FluAppBar {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
darkText: lang.dark_mode
showDark: true
2023-06-10 11:01:36 +08:00
darkClickListener:(button)=>handleDarkChanged(button)
2023-06-09 18:15:09 +08:00
z:7
}
FluNavigationView{
property int clickCount: 0
id:nav_view
width: parent.width
height: parent.height
z:999
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 5
displayMode:MainEvent.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
Behavior on rotation {
NumberAnimation{
duration: 167
}
}
transformOrigin: Item.Center
onLoginClicked:{
clickCount += 1
2023-06-10 11:11:28 +08:00
if(clickCount === 1){
2023-06-09 18:15:09 +08:00
flipable.flipped = true
clickCount = 0
}
}
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
}
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
ItemsFooter.navigationView = nav_view
setCurrentIndex(0)
}
}
2023-02-26 23:47:07 +08:00
}
}
2023-06-10 11:01:36 +08:00
Image{
id:img_cache
visible: false
2023-06-12 10:53:35 +08:00
anchors.fill: parent
2023-06-10 11:01:36 +08:00
}
Canvas{
id:canvas
2023-06-12 10:53:35 +08:00
anchors.fill: parent
2023-06-10 11:01:36 +08:00
property int centerX: canvas.width / 2
property int centerY: canvas.height / 2
property real radius: 0
property int maxRadius: 0
property url imageUrl
Behavior on radius{
id:anim_radius
NumberAnimation {
target: canvas
property: "radius"
duration: 666
2023-06-11 21:48:43 +08:00
easing.type: Easing.OutCubic
2023-06-10 11:01:36 +08:00
}
}
onRadiusChanged: {
canvas.requestPaint()
}
onPaint: {
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
2023-06-12 10:53:35 +08:00
ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
2023-06-10 11:01:36 +08:00
ctx.save()
if(img_cache.source.toString().length!==0){
try{
2023-06-12 10:53:35 +08:00
ctx.drawImage(img_cache, 0, 0, canvasSize.width, canvasSize.height, 0, 0, canvasSize.width, canvasSize.height)
2023-06-10 11:01:36 +08:00
}catch(e){
img_cache.source = ""
}
}
clearArc(ctx, centerX, centerY, radius)
ctx.restore()
}
function clearArc(ctx,x, y, radius, startAngle, endAngle) {
ctx.beginPath()
ctx.globalCompositeOperation = 'destination-out'
ctx.fillStyle = 'black'
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
function distance(x1,y1,x2,y2){
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
}
function handleDarkChanged(button){
2023-06-11 21:44:54 +08:00
var changeDark = function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
2023-06-12 10:53:35 +08:00
if(FluTools.isWin()){
var target = window.contentItem
var pos = button.mapToItem(target,0,0)
2023-06-10 22:46:17 +08:00
var mouseX = pos.x
var mouseY = pos.y
2023-06-12 10:53:35 +08:00
canvas.maxRadius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
target.grabToImage(function(result) {
2023-06-10 22:46:17 +08:00
img_cache.source = result.url
canvas.requestPaint()
2023-06-11 21:44:54 +08:00
changeDark()
2023-06-10 22:46:17 +08:00
canvas.centerX = mouseX
canvas.centerY = mouseY
anim_radius.enabled = false
canvas.radius = 0
anim_radius.enabled = true
canvas.radius = canvas.maxRadius
2023-06-12 10:53:35 +08:00
},canvas.canvasSize)
2023-06-10 22:46:17 +08:00
}else{
2023-06-11 21:44:54 +08:00
changeDark()
2023-06-10 22:46:17 +08:00
}
2023-06-10 11:01:36 +08:00
}
2023-02-26 23:47:07 +08:00
}