update FluWindow

This commit is contained in:
zhuzichu 2023-11-21 14:28:37 +08:00
parent e3e4592ea4
commit b981ecca7d
7 changed files with 188 additions and 132 deletions

View File

@ -18,7 +18,16 @@ FluWindow {
minimumWidth: 520 minimumWidth: 520
minimumHeight: 200 minimumHeight: 200
launchMode: FluWindowType.SingleTask 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{ SettingsViewModel{
id:viewmodel_settings id:viewmodel_settings
@ -36,6 +45,7 @@ FluWindow {
tour.open() tour.open()
checkUpdate(true) checkUpdate(true)
FluEventBus.registerEvent(event_checkupdate) FluEventBus.registerEvent(event_checkupdate)
setHitTestVisible(layout_back_buttons)
} }
Component.onDestruction: { Component.onDestruction: {
@ -120,19 +130,8 @@ FluWindow {
back: Item{ back: Item{
anchors.fill: flipable anchors.fill: flipable
visible: flipable.flipAngle !== 0 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{ Row{
id:layout_back_buttons
z:8 z:8
anchors{ anchors{
top: parent.top top: parent.top
@ -163,26 +162,13 @@ FluWindow {
id:loader id:loader
lazy: true lazy: true
anchors.fill: parent 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{ front: Item{
id:page_front id:page_front
visible: flipable.flipAngle !== 180 visible: flipable.flipAngle !== 180
anchors.fill: flipable 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{ FluNavigationView{
property int clickCount: 0 property int clickCount: 0
id:nav_view id:nav_view
@ -296,10 +282,14 @@ FluWindow {
FluTour{ FluTour{
id:tour id:tour
steps:[ steps:{
{title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()}, var data = []
{title:"隐藏彩蛋",description: "多点几下试试!!",target:()=>nav_view.logoButton()} if(!window.useSystemAppBar){
] data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()})
}
data.push({title:"隐藏彩蛋",description: "多点几下试试!!",target:()=>nav_view.logoButton()})
return data
}
} }
FluHttp{ FluHttp{

View File

@ -21,7 +21,16 @@ FluWindow {
minimumWidth: 520 minimumWidth: 520
minimumHeight: 200 minimumHeight: 200
launchMode: FluWindowType.SingleTask 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{ SettingsViewModel{
id:viewmodel_settings id:viewmodel_settings
@ -39,6 +48,7 @@ FluWindow {
tour.open() tour.open()
checkUpdate(true) checkUpdate(true)
FluEventBus.registerEvent(event_checkupdate) FluEventBus.registerEvent(event_checkupdate)
setHitTestVisible(layout_back_buttons)
} }
Component.onDestruction: { Component.onDestruction: {
@ -123,19 +133,8 @@ FluWindow {
back: Item{ back: Item{
anchors.fill: flipable anchors.fill: flipable
visible: flipable.flipAngle !== 0 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{ Row{
id:layout_back_buttons
z:8 z:8
anchors{ anchors{
top: parent.top top: parent.top
@ -173,19 +172,6 @@ FluWindow {
id:page_front id:page_front
visible: flipable.flipAngle !== 180 visible: flipable.flipAngle !== 180
anchors.fill: flipable 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{ FluNavigationView{
property int clickCount: 0 property int clickCount: 0
id:nav_view id:nav_view
@ -299,10 +285,14 @@ FluWindow {
FluTour{ FluTour{
id:tour id:tour
steps:[ steps:{
{title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()}, var data = []
{title:"隐藏彩蛋",description: "多点几下试试!!",target:()=>nav_view.logoButton()} if(!window.useSystemAppBar){
] data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()})
}
data.push({title:"隐藏彩蛋",description: "多点几下试试!!",target:()=>nav_view.logoButton()})
return data
}
} }
FluHttp{ FluHttp{

@ -1 +1 @@
Subproject commit e01c6518dba327dc2ba5f8bacac4f4a22cb4ba8a Subproject commit 2613dd72fd9bf37758caaafb43531e858a337639

View File

@ -86,6 +86,11 @@ Item {
return FluNavigationViewType.Open 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_anim_delay.restart()
} }
Timer{ Timer{

View File

@ -13,7 +13,17 @@ Window {
property var background : com_background property var background : com_background
property bool fixSize: false property bool fixSize: false
property Component loadingItem: com_loading 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: { property color backgroundColor: {
if(active){ if(active){
return FluTheme.windowActiveBackgroundColor return FluTheme.windowActiveBackgroundColor
@ -28,6 +38,7 @@ Window {
property bool showMinimize: true property bool showMinimize: true
property bool showMaximize: true property bool showMaximize: true
property bool showStayTop: true property bool showStayTop: true
readonly property bool useSystemAppBar: false
property var closeListener: function(event){ property var closeListener: function(event){
if(closeDestory){ if(closeDestory){
destoryOnClose() destoryOnClose()
@ -46,6 +57,10 @@ Window {
lifecycle.onCompleted(window) lifecycle.onCompleted(window)
initArgument(argument) initArgument(argument)
d.changedStayTop() d.changedStayTop()
if(useSystemAppBar){
window.moveWindowToDesktopCenter()
window.visible = true
}
} }
Component.onDestruction: { Component.onDestruction: {
lifecycle.onDestruction() lifecycle.onDestruction()
@ -82,34 +97,30 @@ Window {
color: window.backgroundColor 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{ FluLoader{
anchors.fill: parent anchors.fill: parent
sourceComponent: background sourceComponent: background
} }
FluLoader{ FluLoader{
id: loader_title_bar id:loader_app_bar
anchors { anchors {
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right 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{ Item{
id:container id:container
anchors{ anchors{
top: loader_title_bar.bottom top: loader_app_bar.bottom
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
@ -202,15 +213,16 @@ Window {
onReady: { onReady: {
flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint
if(appBar){ if(appBar){
var title_bar = loader_title_bar.item var appbar = window.appBar
setTitleBarItem(title_bar) setTitleBarItem(appbar)
moveWindowToDesktopCenter() window.moveWindowToDesktopCenter()
setHitTestVisible(title_bar.minimizeButton()) setHitTestVisible(appbar.minimizeButton())
setHitTestVisible(title_bar.maximizeButton()) setHitTestVisible(appbar.maximizeButton())
setHitTestVisible(title_bar.closeButton()) setHitTestVisible(appbar.closeButton())
setHitTestVisible(title_bar.stayTopButton()) setHitTestVisible(appbar.stayTopButton())
setHitTestVisible(appbar.darkButton())
setWindowFixedSize(fixSize) setWindowFixedSize(fixSize)
title_bar.maximizeButton.visible = !fixSize appbar.maximizeButton.visible = !fixSize
if (blurBehindWindowEnabled) if (blurBehindWindowEnabled)
window.background = undefined window.background = undefined
} }
@ -220,22 +232,36 @@ Window {
WindowLifecycle{ WindowLifecycle{
id:lifecycle id:lifecycle
} }
WindowBorder{ FluLoader{
id:loader_window_border
anchors.fill: parent
z:999 z:999
sourceComponent: window.useSystemAppBar ? undefined : com_window_border
}
Component{
id:com_window_border
Item{
WindowBorder{
anchors.fill: parent
visible: !FluTools.isLinux() visible: !FluTools.isLinux()
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: "#00000000" color: Qt.rgba(0,0,0,0)
border.width: 1 border.width: 1
visible: FluTools.isLinux() visible: FluTools.isLinux()
border.color: { border.color: {
if(window.active){ if(window.active){
return "#333333" return Qt.rgba(51/255,51/255,51/255,1)
} }
return "#999999" return Qt.rgba(153/255,153/255,153/255,1)
} }
} }
}
}
function setHitTestVisible(item){
framless_helper.setHitTestVisible(item)
}
function destoryOnClose(){ function destoryOnClose(){
lifecycle.onDestoryOnClose() lifecycle.onDestoryOnClose()
} }
@ -262,6 +288,10 @@ Window {
function registerForWindowResult(path){ function registerForWindowResult(path){
return lifecycle.createRegister(window,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){ function onResult(data){
if(_pageRegister){ if(_pageRegister){
_pageRegister.onResult(data) _pageRegister.onResult(data)

View File

@ -87,6 +87,11 @@ Item {
return FluNavigationViewType.Open 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_anim_delay.restart()
} }
Timer{ Timer{

View File

@ -12,7 +12,17 @@ Window {
property var background : com_background property var background : com_background
property bool fixSize: false property bool fixSize: false
property Component loadingItem: com_loading 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: { property color backgroundColor: {
if(active){ if(active){
return FluTheme.windowActiveBackgroundColor return FluTheme.windowActiveBackgroundColor
@ -27,6 +37,7 @@ Window {
property bool showMinimize: true property bool showMinimize: true
property bool showMaximize: true property bool showMaximize: true
property bool showStayTop: true property bool showStayTop: true
readonly property bool useSystemAppBar: false
property var closeListener: function(event){ property var closeListener: function(event){
if(closeDestory){ if(closeDestory){
destoryOnClose() destoryOnClose()
@ -45,6 +56,16 @@ Window {
lifecycle.onCompleted(window) lifecycle.onCompleted(window)
initArgument(argument) initArgument(argument)
d.changedStayTop() d.changedStayTop()
if(useSystemAppBar){
if(fixSize){
maximumHeight = height
minimumHeight = height
maximumWidth = width
minimumWidth = width
}
window.moveWindowToDesktopCenter()
window.visible = true
}
} }
Component.onDestruction: { Component.onDestruction: {
lifecycle.onDestruction() lifecycle.onDestruction()
@ -81,34 +102,30 @@ Window {
color: window.backgroundColor 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{ FluLoader{
anchors.fill: parent anchors.fill: parent
sourceComponent: background sourceComponent: background
} }
FluLoader{ FluLoader{
id: loader_title_bar id:loader_app_bar
anchors { anchors {
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right 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{ Item{
id:container id:container
anchors{ anchors{
top: loader_title_bar.bottom top: loader_app_bar.bottom
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
@ -201,15 +218,16 @@ Window {
onReady: { onReady: {
flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint flags = flags | Qt.Window | Qt.CustomizeWindowHint | Qt.WindowTitleHint | Qt.WindowSystemMenuHint | Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint
if(appBar){ if(appBar){
var title_bar = loader_title_bar.item var appbar = window.appBar
setTitleBarItem(title_bar) setTitleBarItem(appbar)
moveWindowToDesktopCenter() window.moveWindowToDesktopCenter()
setHitTestVisible(title_bar.minimizeButton()) setHitTestVisible(appbar.minimizeButton())
setHitTestVisible(title_bar.maximizeButton()) setHitTestVisible(appbar.maximizeButton())
setHitTestVisible(title_bar.closeButton()) setHitTestVisible(appbar.closeButton())
setHitTestVisible(title_bar.stayTopButton()) setHitTestVisible(appbar.stayTopButton())
setHitTestVisible(appbar.darkButton())
setWindowFixedSize(fixSize) setWindowFixedSize(fixSize)
title_bar.maximizeButton.visible = !fixSize appbar.maximizeButton.visible = !fixSize
if (blurBehindWindowEnabled) if (blurBehindWindowEnabled)
window.background = undefined window.background = undefined
} }
@ -219,22 +237,36 @@ Window {
WindowLifecycle{ WindowLifecycle{
id:lifecycle id:lifecycle
} }
WindowBorder{ FluLoader{
id:loader_window_border
anchors.fill: parent
z:999 z:999
sourceComponent: window.useSystemAppBar ? undefined : com_window_border
}
Component{
id:com_window_border
Item{
WindowBorder{
anchors.fill: parent
visible: !FluTools.isLinux() visible: !FluTools.isLinux()
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: "#00000000" color: Qt.rgba(0,0,0,0)
border.width: 1 border.width: 1
visible: FluTools.isLinux() visible: FluTools.isLinux()
border.color: { border.color: {
if(window.active){ if(window.active){
return "#333333" return Qt.rgba(51/255,51/255,51/255,1)
} }
return "#999999" return Qt.rgba(153/255,153/255,153/255,1)
} }
} }
}
}
function setHitTestVisible(item){
framless_helper.setHitTestVisible(item)
}
function destoryOnClose(){ function destoryOnClose(){
lifecycle.onDestoryOnClose() lifecycle.onDestoryOnClose()
} }
@ -261,6 +293,10 @@ Window {
function registerForWindowResult(path){ function registerForWindowResult(path){
return lifecycle.createRegister(window,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){ function onResult(data){
if(_pageRegister){ if(_pageRegister){
_pageRegister.onResult(data) _pageRegister.onResult(data)