FluentUI/example/qml/window/MainWindow.qml

259 lines
8.0 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-06-29 23:36:36 +08:00
import example
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
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-07-03 18:08:25 +08:00
minimumHeight: 200
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){
2023-07-07 17:58:00 +08:00
dialog_close.open()
2023-04-20 20:13:31 +08:00
event.accepted = false
}
2023-07-11 10:46:57 +08:00
Component.onCompleted: {
FluTools.setQuitOnLastWindowClosed(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{
2023-07-07 17:58:00 +08:00
id:dialog_close
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-07-03 18:08:25 +08:00
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
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
}
2023-06-12 16:46:02 +08:00
Row{
2023-06-09 18:15:09 +08:00
z:8
2023-06-27 00:17:01 +08:00
anchors{
top: parent.top
left: parent.left
topMargin: FluTools.isMacos() ? 20 : 5
leftMargin: 5
}
2023-06-12 16:46:02 +08:00
FluIconButton{
iconSource: FluentIcons.ChromeBack
width: 30
height: 30
iconSize: 13
onClicked: {
flipable.flipped = false
}
}
FluIconButton{
iconSource: FluentIcons.Sync
width: 30
height: 30
iconSize: 13
onClicked: {
loader.reload()
}
2023-03-30 17:16:57 +08:00
}
2023-06-09 18:15:09 +08:00
}
2023-06-12 16:46:02 +08:00
FluRemoteLoader{
id:loader
2023-06-25 19:01:22 +08:00
lazy: true
2023-06-12 16:46:02 +08:00
anchors.fill: parent
2023-06-18 13:56:30 +08:00
// source: "http://localhost:9000/RemoteComponent.qml"
2023-06-12 16:46:02 +08:00
source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
2023-06-09 18:15:09 +08:00
}
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
2023-07-06 18:17:52 +08:00
//Stack模式每次切换都会将页面压入栈中随着栈的页面增多消耗的内存也越多内存消耗多就会卡顿这时候就需要按返回将页面pop掉释放内存。该模式可以配合FluPage中的launchMode属性设置页面的启动模式
2023-07-07 11:47:03 +08:00
// pageMode: FluNavigationView.Stack
//NoStack模式每次切换都会销毁之前的页面然后创建一个新的页面只需消耗少量内存推荐
2023-07-06 18:17:52 +08:00
pageMode: FluNavigationView.NoStack
2023-06-09 18:15:09 +08:00
items: ItemsOriginal
footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 5
displayMode:MainEvent.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
2023-07-01 07:54:43 +08:00
onLogoClicked:{
2023-06-09 18:15:09 +08:00
clickCount += 1
2023-06-10 11:11:28 +08:00
if(clickCount === 1){
2023-06-12 16:46:02 +08:00
loader.reload()
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
2023-06-29 23:36:36 +08:00
CircularReveal{
2023-06-30 12:08:57 +08:00
id:reveal
target:window.contentItem
2023-06-29 23:36:36 +08:00
anchors.fill: parent
2023-06-30 12:08:57 +08:00
onImageChanged: {
changeDark()
2023-06-10 11:01:36 +08:00
}
}
function distance(x1,y1,x2,y2){
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
}
function handleDarkChanged(button){
2023-07-07 16:04:17 +08:00
if(FluTools.isMacos() || !FluTheme.enableAnimation){
2023-06-29 17:48:48 +08:00
changeDark()
}else{
2023-06-12 10:53:35 +08:00
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-30 12:08:57 +08:00
var radius = 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))
reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
}
}
function changeDark(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
2023-06-10 22:46:17 +08:00
}
2023-06-10 11:01:36 +08:00
}
2023-06-12 17:04:35 +08:00
Shortcut {
sequence: "F5"
context: Qt.WindowShortcut
onActivated: {
if(flipable.flipped){
loader.reload()
}
}
}
2023-02-26 23:47:07 +08:00
}