PyQt6 UI美化指南

一、推荐的UI组件库

1. qfluentwidgets ⭐⭐⭐⭐⭐（强烈推荐）

GitHub: https://github.com/zhiyiYo/PyQt-Fluent-Widgets

特点：

Fluent Design风格（Windows 11风格）
组件丰富（按钮、输入框、卡片、导航等）
中文文档完善
现代化UI设计

安装：

pip install PyQt-Fluent-Widgets

主要组件：

FluentWindow - 现代化主窗口
NavigationInterface - 导航界面
PrimaryPushButton - 主要按钮
LineEdit / PasswordLineEdit - 输入框
CardWidget - 卡片组件
InfoBar - 信息提示条
ProgressBar - 进度条
SwitchButton - 开关按钮

2. qtawesome ⭐⭐⭐⭐⭐（图标库）

GitHub: https://github.com/spyder-ide/qtawesome

特点：

支持Font Awesome、Material Design等图标
图标丰富（1000+）
使用简单

安装：

pip install qtawesome

使用示例：

import qtawesome as qta

# Font Awesome图标
icon = qta.icon('fa.user', color='white')
button.setIcon(icon)

# Material Design图标
icon = qta.icon('mdi.account', color='blue')

3. pyqtdarktheme ⭐⭐⭐⭐（深色主题）

GitHub: https://github.com/5yutan5/PyQtDarkTheme

特点：

一键切换深色/浅色主题
支持自定义颜色
现代化设计

安装：

pip install pyqtdarktheme

使用示例：

import qdarktheme

# 设置深色主题
app.setStyleSheet(qdarktheme.load_stylesheet("dark"))

# 设置浅色主题
app.setStyleSheet(qdarktheme.load_stylesheet("light"))

4. qt-material ⭐⭐⭐⭐（Material Design风格）

GitHub: https://github.com/UN-GCPDS/qt-material

特点：

Material Design风格
支持多种颜色主题
组件丰富

安装：

pip install qt-material

二、推荐组合方案

方案A：qfluentwidgets + qtawesome（推荐）

优势：

Fluent Design风格，现代化UI
图标丰富
中文文档完善
适合Windows风格应用

方案B：qt-material + qtawesome

优势：

Material Design风格
适合跨平台应用
颜色主题丰富

方案C：自定义样式 + qtawesome

优势：

完全自定义
灵活性高
体积小

三、快速开始

1. 安装依赖

pip install PyQt-Fluent-Widgets qtawesome pyqtdarktheme

2. 使用qfluentwidgets改造登录窗口

from qfluentwidgets import (
    FluentWindow, LineEdit, PasswordLineEdit,
    PrimaryPushButton, CardWidget
)
import qtawesome as qta

class LoginWindow(FluentWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("游铛铛 - 登录")
        
        # 使用Fluent Design组件
        self.username_input = LineEdit()
        self.username_input.setPlaceholderText("请输入用户名")
        self.username_input.setIcon(qta.icon('fa.user'))
        
        self.password_input = PasswordLineEdit()
        self.password_input.setPlaceholderText("请输入密码")
        self.password_input.setIcon(qta.icon('fa.lock'))
        
        self.login_btn = PrimaryPushButton("登录")
        self.login_btn.setIcon(qta.icon('fa.sign-in'))

3. 使用qfluentwidgets改造主窗口

from qfluentwidgets import (
    FluentWindow, NavigationInterface,
    NavigationItemPosition, FluentIcon
)

class MainWindow(FluentWindow):
    def __init__(self):
        super().__init__()
        
        # 创建导航界面
        self.navigationInterface = NavigationInterface(self, showMenuButton=True)
        self.addSubInterface(self.rechargeInterface, FluentIcon.MONEY, "充值")
        self.addSubInterface(self.steamInterface, FluentIcon.GAME, "Steam账号")
        self.addSubInterface(self.selectionInterface, FluentIcon.SHOPPING_CART, "选品")
        self.addSubInterface(self.sweepInterface, FluentIcon.SEARCH, "扫货")
        self.addSubInterface(self.announcementInterface, FluentIcon.MEGAPHONE, "公告")

四、样式定制

1. 使用CSS样式表

self.setStyleSheet("""
    QPushButton {
        background-color: #0078d4;
        color: white;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 14px;
    }
    QPushButton:hover {
        background-color: #106ebe;
    }
    QPushButton:pressed {
        background-color: #005a9e;
    }
""")

2. 使用qfluentwidgets主题

from qfluentwidgets import setTheme, Theme

# 设置主题
setTheme(Theme.AUTO)  # 自动
setTheme(Theme.LIGHT)  # 浅色
setTheme(Theme.DARK)   # 深色

五、图标使用

1. Font Awesome图标

import qtawesome as qta

# 常用图标
user_icon = qta.icon('fa.user')
lock_icon = qta.icon('fa.lock')
home_icon = qta.icon('fa.home')
settings_icon = qta.icon('fa.cog')
logout_icon = qta.icon('fa.sign-out')

2. Material Design图标

icon = qta.icon('mdi.account', color='blue')
icon = qta.icon('mdi.lock', color='red')

3. 图标颜色

# 单色图标
icon = qta.icon('fa.user', color='white')

# 渐变色图标
icon = qta.icon('fa.user', color=['#ff0000', '#00ff00'])

六、完整示例

登录窗口示例

from qfluentwidgets import (
    FluentWindow, LineEdit, PasswordLineEdit,
    PrimaryPushButton, CardWidget, setTheme, Theme
)
import qtawesome as qta

class LoginWindow(FluentWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("游铛铛 - 登录")
        
        # 设置主题
        setTheme(Theme.LIGHT)
        
        # 创建卡片容器
        card = CardWidget(self)
        card.setFixedSize(450, 400)
        
        # 用户名输入框
        self.username_input = LineEdit(card)
        self.username_input.setPlaceholderText("请输入用户名")
        self.username_input.setIcon(qta.icon('fa.user', color='#666'))
        
        # 密码输入框
        self.password_input = PasswordLineEdit(card)
        self.password_input.setPlaceholderText("请输入密码")
        self.password_input.setIcon(qta.icon('fa.lock', color='#666'))
        
        # 登录按钮
        self.login_btn = PrimaryPushButton("登录", card)
        self.login_btn.setIcon(qta.icon('fa.sign-in', color='white'))
        self.login_btn.clicked.connect(self.handle_login)

主窗口示例

from qfluentwidgets import (
    FluentWindow, NavigationInterface,
    NavigationItemPosition, FluentIcon
)
import qtawesome as qta

class MainWindow(FluentWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("游铛铛")
        
        # 创建导航界面
        self.navigationInterface = NavigationInterface(self, showMenuButton=True)
        
        # 添加导航项
        self.addSubInterface(
            self.rechargeInterface, 
            FluentIcon.MONEY, 
            "充值",
            position=NavigationItemPosition.TOP
        )
        
        self.addSubInterface(
            self.steamInterface,
            FluentIcon.GAME,
            "Steam账号",
            position=NavigationItemPosition.TOP
        )
        
        # 设置窗口布局
        self.hBoxLayout.addWidget(self.navigationInterface)

七、迁移指南

从原生PyQt6迁移到qfluentwidgets

替换窗口基类 ```python

原来

from PyQt6.QtWidgets import QMainWindow class MainWindow(QMainWindow):

# 改为 from qfluentwidgets import FluentWindow class MainWindow(FluentWindow):


2. **替换按钮**
   ```python
   # 原来
   from PyQt6.QtWidgets import QPushButton
   btn = QPushButton("登录")
   
   # 改为
   from qfluentwidgets import PrimaryPushButton
   btn = PrimaryPushButton("登录")

替换输入框 ```python

原来

from PyQt6.QtWidgets import QLineEdit input = QLineEdit()

# 改为 from qfluentwidgets import LineEdit input = LineEdit()


4. **添加图标**
   ```python
   import qtawesome as qta
   btn.setIcon(qta.icon('fa.user'))

八、最佳实践

统一使用qfluentwidgets组件
- 保持UI风格一致
- 减少样式代码
合理使用图标
- 使用qtawesome提供丰富的图标
- 保持图标风格一致
主题切换
- 支持浅色/深色主题
- 让用户可以选择
响应式设计
- 考虑不同屏幕尺寸
- 使用布局管理器
性能优化
- 避免过度使用动画
- 合理使用图标缓存

九、参考资源

qfluentwidgets文档: https://pyqt-fluent-widgets.readthedocs.io/
qtawesome文档: https://github.com/spyder-ide/qtawesome
Font Awesome图标: https://fontawesome.com/icons
Material Design图标: https://fonts.google.com/icons

十、效果对比

使用前（原生PyQt6）

界面传统，样式需要大量CSS
图标需要手动添加
主题切换需要自己实现

使用后（qfluentwidgets + qtawesome）

现代化Fluent Design风格
丰富的组件和图标
内置主题支持
开发效率提升

PyQt6_UI美化指南.md 9.0 KB Geçmiş Ham

PyQt6 UI美化指南

一、推荐的UI组件库

1. qfluentwidgets ⭐⭐⭐⭐⭐（强烈推荐）

2. qtawesome ⭐⭐⭐⭐⭐（图标库）

3. pyqtdarktheme ⭐⭐⭐⭐（深色主题）

4. qt-material ⭐⭐⭐⭐（Material Design风格）

二、推荐组合方案

方案A：qfluentwidgets + qtawesome（推荐）

方案B：qt-material + qtawesome

方案C：自定义样式 + qtawesome

三、快速开始

1. 安装依赖

2. 使用qfluentwidgets改造登录窗口

3. 使用qfluentwidgets改造主窗口

四、样式定制

1. 使用CSS样式表

2. 使用qfluentwidgets主题

五、图标使用

1. Font Awesome图标

2. Material Design图标

3. 图标颜色

六、完整示例

登录窗口示例

主窗口示例

七、迁移指南

从原生PyQt6迁移到qfluentwidgets

原来

原来

八、最佳实践

九、参考资源

十、效果对比

使用前（原生PyQt6）

使用后（qfluentwidgets + qtawesome）

PyQt6_UI美化指南.md 9.0 KB

Geçmiş Ham