UD动作游戏开发读书笔记--. D游戏所需要的数学知识
滓系霞灸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）也是类似的主题风格。
image
以及WPF界面项目 lepoco/wpfui（https://github.com/lepoco/wpfui）
image
本文主要是针对Python开发领域，对使用PySide6/PyQt6实现自定义窗口布局的探讨，因此也注意PyQt-Fluent-Widgets （https://github.com/zhiyiYo/PyQt-Fluent-Widgets）这个界面组件的实现效果，非常不错，因此对它的实现方式和组合界面的方式进行了一定的研究学习。
image
2、界面布局的分析
在对这些界面大致了解后，心里希望模拟他们的实现方式，构造一个类似的自定义窗口布局，其中参考上面组件的作者的图示进行分析下。
image
左侧的导航栏部分，分为了上中下三个部分，其中导航的滚动布局部分，主要就是用来放置一些比较长内容，如列表或者树控件等内容的。
而右侧的内容区域，主要使用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 来实现。其中整个按钮组为单选组（像单选按钮一样，点击一个自动取消其他的选中，或者叫做互斥选择组） 管理类，从而组合上面所说的自定义按钮组件。
image
有了上面的自定义按钮组件（MySelectableItem）和 互斥选择组组件（MySelectableGroup），我们就可以简单完成了导航按钮栏目的设计了，类似下面的效果，实现选择、悬停、移动鼠标进入的样式不同变化。
image
内容区组件：
QStackedWidget 是 Qt 里专门用来管理 多个页面/界面 的容器控件，它是Qt框架中的一个堆栈窗口控件，用于在同一空间内堆叠多个子控件（或称“页面”），但一次只显示其中一个。它常用于创建多页面或多视图的应用程序，比如设置向导、选项卡界面（尽管它本身不带选项卡标签）和复杂的表单。
image
它的工作方式有点像 卡片堆叠：
一次只显示一个子界面；
可以通过索引（int）或者 widget 实例切换显示的页面；
常用于多页面界面切换（比如“设置/主页/详情”之间切换）。
3、使用PySide6/PyQt6实现自定义窗口布局的效果
Window系统的普通的亮色模式下的效果如下所示。
image
如果单击折叠按钮，可以看到效果。
image
如果切换到Windows深色模式下，窗体颜色变为黑色，同时字体颜色对应变化为亮色一些
image
如果切换到全屏模式下，顶部居中位置有全屏退出提示【按ESC键退出】，效果如下
image
而MacOS样式，仿照标题栏左侧放置常规按钮，悬停的时候出现按钮图标效果，如下所示。
image