mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-27 21:58:42 +08:00
324 lines
10 KiB
QML
324 lines
10 KiB
QML
import QtQuick
|
||
import QtQuick.Window
|
||
import QtQuick.Controls
|
||
import QtQuick.Layouts
|
||
import Qt.labs.platform
|
||
import FluentUI
|
||
import example
|
||
import "qrc:///example/qml/component"
|
||
import "qrc:///example/qml/global"
|
||
|
||
CustomWindow {
|
||
|
||
id:window
|
||
title: "FluentUI"
|
||
width: 1000
|
||
height: 640
|
||
closeDestory:false
|
||
minimumWidth: 520
|
||
minimumHeight: 200
|
||
appBarVisible: false
|
||
launchMode: FluWindowType.SingleTask
|
||
|
||
closeFunc:function(event){
|
||
dialog_close.open()
|
||
event.accepted = false
|
||
}
|
||
|
||
Component.onCompleted: {
|
||
FluTools.setQuitOnLastWindowClosed(false)
|
||
tour.open()
|
||
checkUpdate()
|
||
}
|
||
|
||
SystemTrayIcon {
|
||
id:system_tray
|
||
visible: true
|
||
icon.source: "qrc:/example/res/image/favicon.ico"
|
||
tooltip: "FluentUI"
|
||
menu: Menu {
|
||
MenuItem {
|
||
text: "退出"
|
||
onTriggered: {
|
||
window.deleteWindow()
|
||
FluApp.closeApp()
|
||
}
|
||
}
|
||
}
|
||
onActivated:
|
||
(reason)=>{
|
||
if(reason === SystemTrayIcon.Trigger){
|
||
window.show()
|
||
window.raise()
|
||
window.requestActivate()
|
||
}
|
||
}
|
||
}
|
||
|
||
FluContentDialog{
|
||
id:dialog_close
|
||
title:"退出"
|
||
message:"确定要退出程序吗？"
|
||
negativeText:"最小化"
|
||
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
|
||
onNegativeClicked:{
|
||
window.hide()
|
||
system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
|
||
}
|
||
positiveText:"退出"
|
||
neutralText:"取消"
|
||
onPositiveClicked:{
|
||
window.deleteWindow()
|
||
FluApp.closeApp()
|
||
}
|
||
}
|
||
|
||
Flipable{
|
||
id:flipable
|
||
anchors.fill: parent
|
||
property bool flipped: false
|
||
property real flipAngle: 0
|
||
transform: Rotation {
|
||
id: rotation
|
||
origin.x: flipable.width/2
|
||
origin.y: flipable.height/2
|
||
axis { x: 0; y: 1; z: 0 }
|
||
angle: flipable.flipAngle
|
||
|
||
}
|
||
states: State {
|
||
PropertyChanges { target: flipable; flipAngle: 180 }
|
||
when: flipable.flipped
|
||
}
|
||
transitions: Transition {
|
||
NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
|
||
}
|
||
back: Item{
|
||
anchors.fill: flipable
|
||
visible: flipable.flipAngle !== 0
|
||
FluAppBar {
|
||
anchors {
|
||
top: parent.top
|
||
left: parent.left
|
||
right: parent.right
|
||
}
|
||
darkText: lang.dark_mode
|
||
showDark: true
|
||
z:7
|
||
darkClickListener:(button)=>handleDarkChanged(button)
|
||
}
|
||
Row{
|
||
z:8
|
||
anchors{
|
||
top: parent.top
|
||
left: parent.left
|
||
topMargin: FluTools.isMacos() ? 20 : 5
|
||
leftMargin: 5
|
||
}
|
||
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()
|
||
}
|
||
}
|
||
}
|
||
|
||
FluRemoteLoader{
|
||
id:loader
|
||
lazy: true
|
||
anchors.fill: parent
|
||
// source: "http://localhost:9000/RemoteComponent.qml"
|
||
source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
|
||
}
|
||
}
|
||
front: Item{
|
||
id:page_front
|
||
visible: flipable.flipAngle !== 180
|
||
anchors.fill: flipable
|
||
FluAppBar {
|
||
id:app_bar_front
|
||
anchors {
|
||
top: parent.top
|
||
left: parent.left
|
||
right: parent.right
|
||
}
|
||
darkText: lang.dark_mode
|
||
showDark: true
|
||
darkClickListener:(button)=>handleDarkChanged(button)
|
||
z:7
|
||
}
|
||
FluNavigationView{
|
||
property int clickCount: 0
|
||
id:nav_view
|
||
width: parent.width
|
||
height: parent.height
|
||
z:999
|
||
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
|
||
pageMode: FluNavigationViewType.Stack
|
||
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
|
||
// pageMode: FluNavigationViewType.NoStack
|
||
items: ItemsOriginal
|
||
footerItems:ItemsFooter
|
||
topPadding:FluTools.isMacos() ? 20 : 0
|
||
displayMode:MainEvent.displayMode
|
||
logo: "qrc:/example/res/image/favicon.ico"
|
||
title:"FluentUI"
|
||
onLogoClicked:{
|
||
clickCount += 1
|
||
showSuccess("点击%1次".arg(clickCount))
|
||
if(clickCount === 5){
|
||
loader.reload()
|
||
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)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Component{
|
||
id:com_reveal
|
||
CircularReveal{
|
||
id:reveal
|
||
target:window.contentItem
|
||
anchors.fill: parent
|
||
onAnimationFinished:{
|
||
//动画结束后释放资源
|
||
loader_reveal.sourceComponent = undefined
|
||
}
|
||
onImageChanged: {
|
||
changeDark()
|
||
}
|
||
}
|
||
}
|
||
|
||
Loader{
|
||
id:loader_reveal
|
||
anchors.fill: parent
|
||
}
|
||
|
||
function distance(x1,y1,x2,y2){
|
||
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
|
||
}
|
||
|
||
function handleDarkChanged(button){
|
||
if(FluTools.isMacos() || !FluTheme.enableAnimation){
|
||
changeDark()
|
||
}else{
|
||
loader_reveal.sourceComponent = com_reveal
|
||
var target = window.contentItem
|
||
var pos = button.mapToItem(target,0,0)
|
||
var mouseX = pos.x
|
||
var mouseY = pos.y
|
||
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))
|
||
var reveal = loader_reveal.item
|
||
reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
|
||
}
|
||
}
|
||
|
||
function changeDark(){
|
||
if(FluTheme.dark){
|
||
FluTheme.darkMode = FluThemeType.Light
|
||
}else{
|
||
FluTheme.darkMode = FluThemeType.Dark
|
||
}
|
||
}
|
||
|
||
Shortcut {
|
||
sequence: "F5"
|
||
context: Qt.WindowShortcut
|
||
onActivated: {
|
||
if(flipable.flipped){
|
||
loader.reload()
|
||
}
|
||
}
|
||
}
|
||
|
||
Shortcut {
|
||
sequence: "F6"
|
||
context: Qt.WindowShortcut
|
||
onActivated: {
|
||
tour.open()
|
||
}
|
||
}
|
||
|
||
FluTour{
|
||
id:tour
|
||
steps:[
|
||
{title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
|
||
{title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
|
||
]
|
||
}
|
||
|
||
FluHttp{
|
||
id:http
|
||
}
|
||
|
||
FluContentDialog{
|
||
property string newVerson
|
||
property string body
|
||
id:dialog_update
|
||
title:"升级提示"
|
||
message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
|
||
buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
|
||
negativeText: "取消"
|
||
positiveText:"确定"
|
||
onPositiveClicked:{
|
||
Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
|
||
}
|
||
}
|
||
|
||
function checkUpdate(){
|
||
var callable = {}
|
||
callable.onStart = function(){
|
||
console.debug("satrt check update...")
|
||
}
|
||
callable.onFinish = function(){
|
||
console.debug("check update finish")
|
||
}
|
||
callable.onSuccess = function(result){
|
||
var data = JSON.parse(result)
|
||
console.debug("current version "+appInfo.version)
|
||
console.debug("new version "+data.tag_name)
|
||
if(data.tag_name !== appInfo.version){
|
||
dialog_update.newVerson = data.tag_name
|
||
dialog_update.body = data.body
|
||
dialog_update.open()
|
||
}
|
||
}
|
||
callable.onError = function(status,errorString){
|
||
console.debug(status+";"+errorString)
|
||
}
|
||
http.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest",callable)
|
||
}
|
||
|
||
}
|