FluentWindow的风格如下所示。以及一些微软的WPF应用界面(Fluent 主题 适用于 .NET 9 的 WPF 中的新增功能 - WPF | Microsoft Learn)也是类似如此的。或者类似 WinUI 3 GalleryGitHub - microsoft/WinUI-Gallery: This app demonstrates the controls available in WinUI and the Fluent Design System. · GitHub也是类似的主题风格。以及WPF界面项目lepoco/wpfuiGitHub - lepoco/wpfui: WPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly. · GitHub本文主要是针对Python开发领域对使用PySide6/PyQt6实现自定义窗口布局的探讨因此也注意PyQt-Fluent-Widgets GitHub - zhiyiYo/PyQt-Fluent-Widgets: A fluent design widgets library based on C Qt/PyQt/PySide. Make Qt Great Again. · GitHub这个界面组件的实现效果非常不错因此对它的实现方式和组合界面的方式进行了一定的研究学习。2、界面布局的分析在对这些界面大致了解后心里希望模拟他们的实现方式构造一个类似的自定义窗口布局其中参考上面组件的作者的图示进行分析下。左侧的导航栏部分分为了上中下三个部分其中导航的滚动布局部分主要就是用来放置一些比较长内容如列表或者树控件等内容的。而右侧的内容区域主要使用QStackWidget的堆叠式组件类似于卡片集合每次显示最顶部的一张。为了使得标题栏和整个窗体的样式一致化我们需采用无边框的窗口处理这个可以采用 PySideSix-Frameless-WindowzhiyiYo / PyQt-Frameless-Window或者参考项目yjg30737pyqt-frameless-windowGitHub - yjg30737/pyqt-frameless-window: PyQt(PySide) Frameless Window · GitHub两者都可以。为了更好的对标题栏进行扩展管理我参考后者项目进行了修改并增加了对MacOS和Linux的效果支持yjg30737pyqt-frameless-window 只有Windows实现没有MacOS等效果 。自定义按钮组件:界面了无边框窗口的实现后我们来看看左侧导航栏的实现首先我们需要把左侧拆分为一个按钮条其中自定义按钮组件需要符合下面几个效果里面包含一个 QLabel 作为背景线条选中标志一个图标QLabel/QPushButton/QToolButton 等选中时背景色变浅未选中时恢复正常鼠标悬停时有特殊效果hover 效果在 PySide6 里我们可以通过自定义 QWidget 来实现。其中整个按钮组为单选组像单选按钮一样点击一个自动取消其他的选中或者叫做互斥选择组 管理类从而组合上面所说的自定义按钮组件。有了上面的自定义按钮组件MySelectableItem和互斥选择组组件MySelectableGroup我们就可以简单完成了导航按钮栏目的设计了类似下面的效果实现选择、悬停、移动鼠标进入的样式不同变化。