wuhuacong(伍華聰)的專欄

現(xiàn)在在很多項(xiàng)目中，會比較喜歡FluentWindow效果，這種左側(cè)類似于圖標(biāo)菜單或者樹形結(jié)構(gòu)的，右側(cè)是是動態(tài)窗體或者組件的展示方式，一般不是多文檔布局，每次只是打開當(dāng)前的模塊頁面，類似于堆疊頁面卡片，每次展示最頂端的那個(gè)卡片界面。本篇隨筆綜合介紹一下FluentWindow效果界面的各種展示方式，然后分析頁面的內(nèi)容組成方式，針對性的使用PySide6/PyQt6實(shí)現(xiàn)自定義窗口布局的效果。

現(xiàn)在在很多項(xiàng)目中，會比較喜歡FluentWindow效果，這種左側(cè)類似于圖標(biāo)菜單或者樹形結(jié)構(gòu)的，右側(cè)是是動態(tài)窗體或者組件的展示方式，一般不是多文檔布局，每次只是打開當(dāng)前的模塊頁面，類似于堆疊頁面卡片，每次展示最頂端的那個(gè)卡片界面。本篇隨筆綜合介紹一下FluentWindow效果界面的各種展示方式，然后分析頁面的內(nèi)容組成方式，針對性的使用PySide6/PyQt6實(shí)現(xiàn)自定義窗口布局的效果。

1、FluentWindow效果界面介紹

在我們的WPF開發(fā)框架中，界面布局UI基于lepoco/wpfui（https://github.com/lepoco/wpfui），它的布局也類似于這個(gè)FluentWindow的風(fēng)格，如下所示。

以及一些微軟的WPF應(yīng)用界面(Fluent 主題 https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/whats-new/net90)，也是類似如此的。

或者類似 WinUI 3 Gallery（https://github.com/microsoft/WinUI-Gallery）也是類似的主題風(fēng)格。

以及WPF界面項(xiàng)目 lepoco/wpfui（https://github.com/lepoco/wpfui）

 本文主要是針對Python開發(fā)領(lǐng)域，對使用PySide6/PyQt6實(shí)現(xiàn)自定義窗口布局的探討，因此也注意PyQt-Fluent-Widgets （https://github.com/zhiyiYo/PyQt-Fluent-Widgets）這個(gè)界面組件的實(shí)現(xiàn)效果，非常不錯(cuò)，因此對它的實(shí)現(xiàn)方式和組合界面的方式進(jìn)行了一定的研究學(xué)習(xí)。

 2、界面布局的分析

在對這些界面大致了解后，心里希望模擬他們的實(shí)現(xiàn)方式，構(gòu)造一個(gè)類似的自定義窗口布局，其中參考上面組件的作者的圖示進(jìn)行分析下。

左側(cè)的導(dǎo)航欄部分，分為了上中下三個(gè)部分，其中導(dǎo)航的滾動布局部分，主要就是用來放置一些比較長內(nèi)容，如列表或者樹控件等內(nèi)容的。

而右側(cè)的內(nèi)容區(qū)域，主要使用QStackWidget的堆疊式組件，類似于卡片集合，每次顯示最頂部的一張。

為了使得標(biāo)題欄和整個(gè)窗體的樣式一致化，我們需采用無邊框的窗口處理，這個(gè)可以采用 PySideSix-Frameless-Window（zhiyiYo / PyQt-Frameless-Window），或者參考項(xiàng)目yjg30737pyqt-frameless-window（https://github.com/yjg30737/pyqt-frameless-window），兩者都可以。

為了更好的對標(biāo)題欄進(jìn)行擴(kuò)展管理，我參考后者項(xiàng)目進(jìn)行了修改，并增加了對MacOS和Linux的效果支持（yjg30737pyqt-frameless-window 只有Windows實(shí)現(xiàn)，沒有MacOS等效果） 。

自定義按鈕組件:

界面了無邊框窗口的實(shí)現(xiàn)后，我們來看看左側(cè)導(dǎo)航欄的實(shí)現(xiàn)，首先我們需要把左側(cè)拆分為一個(gè)按鈕條，其中自定義按鈕組件，需要符合下面幾個(gè)效果，里面包含：

• 一個(gè) QLabel 作為背景線條（選中標(biāo)志）

• 一個(gè)圖標(biāo)（QLabel/QPushButton/QToolButton 等）

• 選中時(shí)：背景色變淺

• 未選中時(shí)：恢復(fù)正常

• 鼠標(biāo)懸停時(shí)：有特殊效果（hover 效果）

在 PySide6 里，我們可以通過自定義 QWidget 來實(shí)現(xiàn)。其中整個(gè)按鈕組為單選組（像單選按鈕一樣，點(diǎn)擊一個(gè)自動取消其他的選中，或者叫做互斥選擇組） 管理類，從而組合上面所說的自定義按鈕組件。

 有了上面的自定義按鈕組件（MySelectableItem）和 互斥選擇組組件（MySelectableGroup），我們就可以簡單完成了導(dǎo)航按鈕欄目的設(shè)計(jì)了，類似下面的效果，實(shí)現(xiàn)選擇、懸停、移動鼠標(biāo)進(jìn)入的樣式不同變化。

 

內(nèi)容區(qū)組件：

QStackedWidget 是 Qt 里專門用來管理 多個(gè)頁面/界面 的容器控件，它是Qt框架中的一個(gè)堆棧窗口控件，用于在同一空間內(nèi)堆疊多個(gè)子控件（或稱“頁面”），但一次只顯示其中一個(gè)。它常用于創(chuàng)建多頁面或多視圖的應(yīng)用程序，比如設(shè)置向?qū)А⑦x項(xiàng)卡界面（盡管它本身不帶選項(xiàng)卡標(biāo)簽）和復(fù)雜的表單。 

 

它的工作方式有點(diǎn)像 卡片堆疊：

• 一次只顯示一個(gè)子界面；

• 可以通過索引（int）或者 widget 實(shí)例切換顯示的頁面；

• 常用于多頁面界面切換（比如“設(shè)置/主頁/詳情”之間切換）。

3、使用PySide6/PyQt6實(shí)現(xiàn)自定義窗口布局的效果

Window系統(tǒng)的普通的亮色模式下的效果如下所示。

如果單擊折疊按鈕，可以看到效果。

 

 如果切換到Windows深色模式下，窗體顏色變?yōu)楹谏瑫r(shí)字體顏色對應(yīng)變化為亮色一些

 如果切換到全屏模式下，頂部居中位置有全屏退出提示【按ESC鍵退出】，效果如下

 而MacOS樣式，仿照標(biāo)題欄左側(cè)放置常規(guī)按鈕，懸停的時(shí)候出現(xiàn)按鈕圖標(biāo)效果，如下所示。