現在在很多項目中，會比較喜歡FluentWindow效果，這種左側類似於圖標菜單或者樹形結構的，右側是是動態窗體或者組件的展示方式，一般不是多文檔佈局，每次只是打開當前的模塊頁面，類似於堆疊頁面卡片，每次展示最頂端的那個卡片界面。本篇隨筆綜合介紹一下FluentWindow效果界面的各種展示方式，然後分析頁面的內容組成方式，針對性的使用PySide6/PyQt6實現自定義窗口布局的效果。
1、FluentWindow效果界面介紹
在我們的WPF開發框架中，界面佈局UI基於lepoco/wpfui（https://github.com/lepoco/wpfui），它的佈局也類似於這個FluentWindow的風格，如下所示。
以及一些微軟的WPF應用界面(Fluent 主題 https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/whats-new/net90)，也是類似如此的。
或者類似 WinUI 3 Gallery（https://github.com/microsoft/WinUI-Gallery）也是類似的主題風格。
以及WPF界面項目 lepoco/wpfui（https://github.com/lepoco/wpfui）
本文主要是針對Python開發領域，對使用PySide6/PyQt6實現自定義窗口布局的探討，因此也注意 （https://github.com/zhiyiYo/PyQt-Fluent-Widgets）這個界面組件的實現效果，非常不錯，因此對它的實現方式和組合界面的方式進行了一定的研究學習。
2、界面佈局的分析
在對這些界面大致瞭解後，心裏希望模擬他們的實現方式，構造一個類似的自定義窗口布局，其中參考上面組件的作者的圖示進行分析下。
左側的導航欄部分，分為了上中下三個部分，其中導航的滾動佈局部分，主要就是用來放置一些比較長內容，如列表或者樹控件等內容的。
而右側的內容區域，主要使用QStackWidget的堆疊式組件，類似於卡片集合，每次顯示最頂部的一張。
為了使得標題欄和整個窗體的樣式一致化，我們需採用無邊框的窗口處理，這個可以採用 PySideSix-Frameless-Window（zhiyiYo / PyQt-Frameless-Window），或者參考項目yjg30737pyqt-frameless-window（https://github.com/yjg30737/pyqt-frameless-window），兩者都可以。
為了更好的對標題欄進行擴展管理，我參考後者項目進行了修改，並增加了對MacOS和Linux的效果支持（yjg30737pyqt-frameless-window 只有Windows實現，沒有MacOS等效果） 。
自定義按鈕組件:
界面了無邊框窗口的實現後，我們來看看左側導航欄的實現，首先我們需要把左側拆分為一個按鈕條，其中自定義按鈕組件，需要符合下面幾個效果，裏面包含：
-
一個 QLabel 作為背景線條（選中標誌）
-
一個圖標（QLabel/QPushButton/QToolButton 等）
-
選中時：背景色變淺
-
未選中時：恢復正常
-
鼠標懸停時：有特殊效果（hover 效果）
在 PySide6 裏，我們可以通過自定義 QWidget 來實現。其中整個按鈕組為單選組（像單選按鈕一樣，點擊一個自動取消其他的選中，或者叫做互斥選擇組） 管理類，從而組合上面所説的自定義按鈕組件。
有了上面的自定義按鈕組件（MySelectableItem）和 互斥選擇組組件（MySelectableGroup），我們就可以簡單完成了導航按鈕欄目的設計了，類似下面的效果，實現選擇、懸停、移動鼠標進入的樣式不同變化。
內容區組件：
QStackedWidget 是 Qt 裏專門用來管理 多個頁面/界面 的容器控件，它是Qt框架中的一個堆棧窗口控件，用於在同一空間內堆疊多個子控件（或稱“頁面”），但一次只顯示其中一個。它常用於創建多頁面或多視圖的應用程序，比如設置嚮導、選項卡界面（儘管它本身不帶選項卡標籤）和複雜的表單。
它的工作方式有點像 卡片堆疊：
-
一次只顯示一個子界面；
-
可以通過索引（int）或者 widget 實例切換顯示的頁面；
-
常用於多頁面界面切換（比如“設置/主頁/詳情”之間切換）。
3、使用PySide6/PyQt6實現自定義窗口布局的效果
Window系統的普通的亮色模式下的效果如下所示。
如果單擊摺疊按鈕，可以看到效果。
如果切換到Windows深色模式下，窗體顏色變為黑色，同時字體顏色對應變化為亮色一些
如果切換到全屏模式下，頂部居中位置有全屏退出提示【按ESC鍵退出】，效果如下
而MacOS樣式，仿照標題欄左側放置常規按鈕，懸停的時候出現按鈕圖標效果，如下所示。
