From b981ecca7d47734bc22a14fc77782eba78cf9cce Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Tue, 21 Nov 2023 14:28:37 +0800 Subject: [PATCH] update FluWindow --- example/qml-Qt6/window/MainWindow.qml | 52 ++++----- example/qml/window/MainWindow.qml | 50 ++++----- framelesshelper | 2 +- .../FluentUI/Controls/FluNavigationView.qml | 5 + .../imports/FluentUI/Controls/FluWindow.qml | 100 +++++++++++------ .../FluentUI/Controls/FluNavigationView.qml | 5 + .../imports/FluentUI/Controls/FluWindow.qml | 106 ++++++++++++------ 7 files changed, 188 insertions(+), 132 deletions(-) diff --git a/example/qml-Qt6/window/MainWindow.qml b/example/qml-Qt6/window/MainWindow.qml index 5f97bf4d..41c35548 100644 --- a/example/qml-Qt6/window/MainWindow.qml +++ b/example/qml-Qt6/window/MainWindow.qml @@ -18,7 +18,16 @@ FluWindow { minimumWidth: 520 minimumHeight: 200 launchMode: FluWindowType.SingleTask - appBar: undefined + fitsAppBarWindows: true + appBar: FluAppBar { + width: window.width + height: 30 + darkText: Lang.dark_mode + showDark: true + darkClickListener:(button)=>handleDarkChanged(button) + closeClickListener: ()=>{dialog_close.open()} + z:7 + } SettingsViewModel{ id:viewmodel_settings @@ -36,6 +45,7 @@ FluWindow { tour.open() checkUpdate(true) FluEventBus.registerEvent(event_checkupdate) + setHitTestVisible(layout_back_buttons) } Component.onDestruction: { @@ -120,19 +130,8 @@ FluWindow { 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) - closeClickListener: ()=>{dialog_close.open()} - } Row{ + id:layout_back_buttons z:8 anchors{ top: parent.top @@ -163,26 +162,13 @@ FluWindow { id:loader lazy: true anchors.fill: parent - source: "https://zhu-zichu.gitee.io/Qt5_156_LieflatPage.qml" + source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.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) - closeClickListener: ()=>{dialog_close.open()} - z:7 - } FluNavigationView{ property int clickCount: 0 id:nav_view @@ -296,10 +282,14 @@ FluWindow { FluTour{ id:tour - steps:[ - {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()}, - {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()} - ] + steps:{ + var data = [] + if(!window.useSystemAppBar){ + data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()}) + } + data.push({title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}) + return data + } } FluHttp{ diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 7d100a04..29bca9a1 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -21,7 +21,16 @@ FluWindow { minimumWidth: 520 minimumHeight: 200 launchMode: FluWindowType.SingleTask - appBar: undefined + fitsAppBarWindows: true + appBar: FluAppBar { + width: window.width + height: 30 + darkText: Lang.dark_mode + showDark: true + darkClickListener:(button)=>handleDarkChanged(button) + closeClickListener: ()=>{dialog_close.open()} + z:7 + } SettingsViewModel{ id:viewmodel_settings @@ -39,6 +48,7 @@ FluWindow { tour.open() checkUpdate(true) FluEventBus.registerEvent(event_checkupdate) + setHitTestVisible(layout_back_buttons) } Component.onDestruction: { @@ -123,19 +133,8 @@ FluWindow { 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) - closeClickListener: ()=>{dialog_close.open()} - } Row{ + id:layout_back_buttons z:8 anchors{ top: parent.top @@ -173,19 +172,6 @@ FluWindow { 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) - closeClickListener: ()=>{dialog_close.open()} - z:7 - } FluNavigationView{ property int clickCount: 0 id:nav_view @@ -299,10 +285,14 @@ FluWindow { FluTour{ id:tour - steps:[ - {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()}, - {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()} - ] + steps:{ + var data = [] + if(!window.useSystemAppBar){ + data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()}) + } + data.push({title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}) + return data + } } FluHttp{ diff --git a/framelesshelper b/framelesshelper index e01c6518..2613dd72 160000 --- a/framelesshelper +++ b/framelesshelper @@ -1 +1 @@ -Subproject commit e01c6518dba327dc2ba5f8bacac4f4a22cb4ba8a +Subproject commit 2613dd72fd9bf37758caaafb43531e858a337639 diff --git a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml index a532fd5f..5c1e2145 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml @@ -86,6 +86,11 @@ Item { return FluNavigationViewType.Open } }) + if(Window.window instanceof FluWindow){ + Window.window.setHitTestVisible(backButton()) + Window.window.setHitTestVisible(navButton()) + Window.window.setHitTestVisible(logoButton()) + } timer_anim_delay.restart() } Timer{ diff --git a/src/Qt5/imports/FluentUI/Controls/FluWindow.qml b/src/Qt5/imports/FluentUI/Controls/FluWindow.qml index 924b7286..442a1540 100644 --- a/src/Qt5/imports/FluentUI/Controls/FluWindow.qml +++ b/src/Qt5/imports/FluentUI/Controls/FluWindow.qml @@ -13,7 +13,17 @@ Window { property var background : com_background property bool fixSize: false property Component loadingItem: com_loading - property var appBar: com_app_bar + property bool fitsAppBarWindows: false + property Item appBar: FluAppBar { + title: window.title + width: window.width + height: 30 + showDark: window.showDark + showClose: window.showClose + showMinimize: window.showMinimize + showMaximize: window.showMaximize + showStayTop: window.showStayTop + } property color backgroundColor: { if(active){ return FluTheme.windowActiveBackgroundColor @@ -28,6 +38,7 @@ Window { property bool showMinimize: true property bool showMaximize: true property bool showStayTop: true + readonly property bool useSystemAppBar: false property var closeListener: function(event){ if(closeDestory){ destoryOnClose() @@ -46,6 +57,10 @@ Window { lifecycle.onCompleted(window) initArgument(argument) d.changedStayTop() + if(useSystemAppBar){ + window.moveWindowToDesktopCenter() + window.visible = true + } } Component.onDestruction: { lifecycle.onDestruction() @@ -82,34 +97,30 @@ Window { color: window.backgroundColor } } - Component{ - id:com_app_bar - FluAppBar { - title: window.title - showDark: window.showDark - showClose: window.showClose - showMinimize: window.showMinimize - showMaximize: window.showMaximize - showStayTop: window.showStayTop - } - } FluLoader{ anchors.fill: parent sourceComponent: background } FluLoader{ - id: loader_title_bar + id:loader_app_bar anchors { top: parent.top left: parent.left right: parent.right } - sourceComponent: window.appBar + sourceComponent: window.useSystemAppBar ? undefined : com_app_bar + } + Component{ + id:com_app_bar + Item{ + data: window.appBar + height: window.fitsAppBarWindows ? 0 : childrenRect.height + } } Item{ id:container anchors{ - top: loader_title_bar.bottom + top: loader_app_bar.bottom left: parent.left right: parent.right bottom: parent.bottom @@ -202,15 +213,16 @@ Window { onReady: { flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint if(appBar){ - var title_bar = loader_title_bar.item - setTitleBarItem(title_bar) - moveWindowToDesktopCenter() - setHitTestVisible(title_bar.minimizeButton()) - setHitTestVisible(title_bar.maximizeButton()) - setHitTestVisible(title_bar.closeButton()) - setHitTestVisible(title_bar.stayTopButton()) + var appbar = window.appBar + setTitleBarItem(appbar) + window.moveWindowToDesktopCenter() + setHitTestVisible(appbar.minimizeButton()) + setHitTestVisible(appbar.maximizeButton()) + setHitTestVisible(appbar.closeButton()) + setHitTestVisible(appbar.stayTopButton()) + setHitTestVisible(appbar.darkButton()) setWindowFixedSize(fixSize) - title_bar.maximizeButton.visible = !fixSize + appbar.maximizeButton.visible = !fixSize if (blurBehindWindowEnabled) window.background = undefined } @@ -220,22 +232,36 @@ Window { WindowLifecycle{ id:lifecycle } - WindowBorder{ - z:999 - visible: !FluTools.isLinux() - } - Rectangle{ + FluLoader{ + id:loader_window_border anchors.fill: parent - color: "#00000000" - border.width: 1 - visible: FluTools.isLinux() - border.color: { - if(window.active){ - return "#333333" + z:999 + sourceComponent: window.useSystemAppBar ? undefined : com_window_border + } + Component{ + id:com_window_border + Item{ + WindowBorder{ + anchors.fill: parent + visible: !FluTools.isLinux() + } + Rectangle{ + anchors.fill: parent + color: Qt.rgba(0,0,0,0) + border.width: 1 + visible: FluTools.isLinux() + border.color: { + if(window.active){ + return Qt.rgba(51/255,51/255,51/255,1) + } + return Qt.rgba(153/255,153/255,153/255,1) + } } - return "#999999" } } + function setHitTestVisible(item){ + framless_helper.setHitTestVisible(item) + } function destoryOnClose(){ lifecycle.onDestoryOnClose() } @@ -262,6 +288,10 @@ Window { function registerForWindowResult(path){ return lifecycle.createRegister(window,path) } + function moveWindowToDesktopCenter(){ + window.x = (Screen.desktopAvailableWidth - window.width)/2 + window.y = (Screen.desktopAvailableHeight - window.height)/2 + } function onResult(data){ if(_pageRegister){ _pageRegister.onResult(data) diff --git a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml index 7c284e08..b3f7f7fc 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml @@ -87,6 +87,11 @@ Item { return FluNavigationViewType.Open } }) + if(Window.window instanceof FluWindow){ + Window.window.setHitTestVisible(backButton()) + Window.window.setHitTestVisible(navButton()) + Window.window.setHitTestVisible(logoButton()) + } timer_anim_delay.restart() } Timer{ diff --git a/src/Qt6/imports/FluentUI/Controls/FluWindow.qml b/src/Qt6/imports/FluentUI/Controls/FluWindow.qml index f7b6e148..0cc70c59 100644 --- a/src/Qt6/imports/FluentUI/Controls/FluWindow.qml +++ b/src/Qt6/imports/FluentUI/Controls/FluWindow.qml @@ -12,7 +12,17 @@ Window { property var background : com_background property bool fixSize: false property Component loadingItem: com_loading - property var appBar: com_app_bar + property bool fitsAppBarWindows: false + property Item appBar: FluAppBar { + title: window.title + width: window.width + height: 30 + showDark: window.showDark + showClose: window.showClose + showMinimize: window.showMinimize + showMaximize: window.showMaximize + showStayTop: window.showStayTop + } property color backgroundColor: { if(active){ return FluTheme.windowActiveBackgroundColor @@ -27,6 +37,7 @@ Window { property bool showMinimize: true property bool showMaximize: true property bool showStayTop: true + readonly property bool useSystemAppBar: false property var closeListener: function(event){ if(closeDestory){ destoryOnClose() @@ -45,6 +56,16 @@ Window { lifecycle.onCompleted(window) initArgument(argument) d.changedStayTop() + if(useSystemAppBar){ + if(fixSize){ + maximumHeight = height + minimumHeight = height + maximumWidth = width + minimumWidth = width + } + window.moveWindowToDesktopCenter() + window.visible = true + } } Component.onDestruction: { lifecycle.onDestruction() @@ -81,34 +102,30 @@ Window { color: window.backgroundColor } } - Component{ - id:com_app_bar - FluAppBar { - title: window.title - showDark: window.showDark - showClose: window.showClose - showMinimize: window.showMinimize - showMaximize: window.showMaximize - showStayTop: window.showStayTop - } - } FluLoader{ anchors.fill: parent sourceComponent: background } FluLoader{ - id: loader_title_bar + id:loader_app_bar anchors { top: parent.top left: parent.left right: parent.right } - sourceComponent: window.appBar + sourceComponent: window.useSystemAppBar ? undefined : com_app_bar + } + Component{ + id:com_app_bar + Item{ + data: window.appBar + height: window.fitsAppBarWindows ? 0 : childrenRect.height + } } Item{ id:container anchors{ - top: loader_title_bar.bottom + top: loader_app_bar.bottom left: parent.left right: parent.right bottom: parent.bottom @@ -201,15 +218,16 @@ Window { onReady: { flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint if(appBar){ - var title_bar = loader_title_bar.item - setTitleBarItem(title_bar) - moveWindowToDesktopCenter() - setHitTestVisible(title_bar.minimizeButton()) - setHitTestVisible(title_bar.maximizeButton()) - setHitTestVisible(title_bar.closeButton()) - setHitTestVisible(title_bar.stayTopButton()) + var appbar = window.appBar + setTitleBarItem(appbar) + window.moveWindowToDesktopCenter() + setHitTestVisible(appbar.minimizeButton()) + setHitTestVisible(appbar.maximizeButton()) + setHitTestVisible(appbar.closeButton()) + setHitTestVisible(appbar.stayTopButton()) + setHitTestVisible(appbar.darkButton()) setWindowFixedSize(fixSize) - title_bar.maximizeButton.visible = !fixSize + appbar.maximizeButton.visible = !fixSize if (blurBehindWindowEnabled) window.background = undefined } @@ -219,22 +237,36 @@ Window { WindowLifecycle{ id:lifecycle } - WindowBorder{ - z:999 - visible: !FluTools.isLinux() - } - Rectangle{ + FluLoader{ + id:loader_window_border anchors.fill: parent - color: "#00000000" - border.width: 1 - visible: FluTools.isLinux() - border.color: { - if(window.active){ - return "#333333" + z:999 + sourceComponent: window.useSystemAppBar ? undefined : com_window_border + } + Component{ + id:com_window_border + Item{ + WindowBorder{ + anchors.fill: parent + visible: !FluTools.isLinux() + } + Rectangle{ + anchors.fill: parent + color: Qt.rgba(0,0,0,0) + border.width: 1 + visible: FluTools.isLinux() + border.color: { + if(window.active){ + return Qt.rgba(51/255,51/255,51/255,1) + } + return Qt.rgba(153/255,153/255,153/255,1) + } } - return "#999999" } } + function setHitTestVisible(item){ + framless_helper.setHitTestVisible(item) + } function destoryOnClose(){ lifecycle.onDestoryOnClose() } @@ -261,6 +293,10 @@ Window { function registerForWindowResult(path){ return lifecycle.createRegister(window,path) } + function moveWindowToDesktopCenter(){ + window.x = (Screen.desktopAvailableWidth - window.width)/2 + window.y = (Screen.desktopAvailableHeight - window.height)/2 + } function onResult(data){ if(_pageRegister){ _pageRegister.onResult(data)