使用PySide6/PyQt6实现自定义窗口布局，实现类似FluentWindow效果

现在在很多项目中，会比较喜欢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实现自定义窗口布局的探讨，因此也注意PyQt-Fluent-Widgets （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样式，仿照标题栏左侧放置常规按钮，悬停的时候出现按钮图标效果，如下所示。