基于 PyQt/PySide 的 Fluent Design 风格组件库

基于 PyQt/PySide 的 Fluent Design 风格组件库,内含多种美观、实用的组件,支持亮暗主题切换和自定义主题色。基于 PyQt/PySide 的 Fluent Design 风格组件库

设计

在 Qt Designer 中,有两种使用 PyQt-Fluent-Widgets 的方式。

提升控件

右击一个小部件,选择右击菜单上的「提升为」其作用是把原生部件替换成自定义小部件,示例:qfluentwidgets.PushButton。基于 PyQt/PySide 的 Fluent Design 风格组件库弹出的对话框上需要填写自定义的组件名。头文件是组件库的包名 qfluentwidgets,提升的类名称为 PushButton。基于 PyQt/PySide 的 Fluent Design 风格组件库完成提升后不会在设计中看到任何变化,保存 ui 文件后编译为 py 代码,可以发现 import 的是 PushButton。

使用插件

  • 创建一个虚拟环境,推荐使用 conda
  • 激活虚拟环境,在终端中输入下述命令安装所需的包:
pip install PyQt-Fluent-Widget
pip install pyqt5-tools
  • 从 PyQt-Fluent-Widgets Repo 下载代码
  • 运行 python ./tools/designer.py 来启动设计软件(必须使用脚本启动)

一切无误的情况下能在侧边栏 Widget Box 中看到 PyQt-Fluent-Widgets 的组件。

主题

主题模式

setTheme() 函数用于切换 PyQt-Fluent-Widgets 全部组件的亮暗主题。该函数接受下述值:

  • Theme.LIGHT:浅色主题
  • Theme.DARK:深色主题
  • Theme.AUTO:跟随系统主题。如果无法检测到系统的主题,将使用浅色主题。

如果想在主题发生改变时,自动切换界面的样式,可以继承 StyleSheetBase 类并重写 path() 方法。假设有一个 MainWindow 类,它的 qss 文件路径为 app/resource/qss/light/main_window.qss 和 app/resource/qss/dark/main_window.qss,那么代码可以这么写:

from enum import Enum
from qfluentwidgets import StyleSheetBase, Theme, isDarkTheme, qconfig


class StyleSheet(StyleSheetBase, Enum):
    """ Style sheet  """

    MAIN_WINDOW = "main_window"

    def path(self, theme=Theme.AUTO):
        theme = qconfig.theme if theme == Theme.AUTO else theme
        return f"app/resource/qss/{theme.value.lower()}/{self.value}.qss"


class MainWindow(QWidget):

    def __init__(self, parent=None):
        super().__init__(parent=parent)

        # apply style sheet to main window
        StyleSheet.MAIN_WINDOW.apply(self)

主题色

setThemeColor() 函数用于修改全部组件的主题色。该函数接受三种类型的值:

  • QColor
  • Qt.GlobalColor
  • str:十六进制颜色字符串或者颜色名字,比如 #0065d5 或者 red

当主题发生改变时,qconfig 管理的配置实例会发出 themeColorChanged 信号。

图标

许多组件需要图标(尺寸一般是 16 × 16 ),如果想在切换主题时自动切换图标,可以继承 FluentIconBase 类并重写 path() 函数来给出不同主题下图标的路径。下面是一个示例:

from enum import Enum

from qfluentwidgets import getIconColor, Theme, FluentIconBase


class MyFluentIcon(FluentIconBase, Enum):
    """ Custom icons """

    ADD = "Add"
    CUT = "Cut"
    COPY = "Copy"

    def path(self, theme=Theme.AUTO):
        return f':/icons/{self.value}_{getIconColor(theme)}.svg'

演示

滑块中空的滑动条

基于 PyQt/PySide 的 Fluent Design 风格组件库

颜色选择框

基于 PyQt/PySide 的 Fluent Design 风格组件库

无边框消息框

基于 PyQt/PySide 的 Fluent Design 风格组件库

导航

基于 PyQt/PySide 的 Fluent Design 风格组件库

快速上手

安装

  • 安装轻量版(AcrylicLabel 不可用):
pip install PyQt-Fluent-Widgets -i https://pypi.org/simple/
  • 安装完整版:
pip install "PyQt-Fluent-Widgets[full]" -i https://pypi.org/simple/

如果使用的是 PySide2、PySide6 或者 PyQt6,可以在 PySide2, PySide6 or PyQt6 分支下载对应的代码。

运行示例

使用 pip 安装好 PyQt-Fluent-Widgets 包之后,就可以运行 examples 目录下的任意示例,比如:

cd examples/gallery
python demo.py

传送门

开源协议:GPL-3.0 license

开源地址:https://github.com/zhiyiYo/PyQt-Fluent-Widgets

项目合集:https://github.com/OpenTechCol/OpenTechCol

-END-


原文始发于微信公众号(开源技术专栏):基于 PyQt/PySide 的 Fluent Design 风格组件库

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/155163.html

(3)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!