告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库

这篇具有很好参考价值的文章主要介绍了告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,支持亮暗主题无缝切换和自定义主题色,搭配 QtDesigner 可以快速开发美观的界面。github 仓库地址为 https://github.com/zhiyiYo/PyQt-Fluent-Widgets ,演示视频可以在哔哩哔哩上观看。

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

安装

轻量版 (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 和 PyQt6 分支下载对应的代码。

注意
请勿同时安装 PyQt-Fluent-Widgets、PyQt6-Fluent-Widgets、PySide2-Fluent-Widgets 和 PySide6-Fluent-Widgets,因为他们的包名都是 qfluentwidgets

运行示例

安装完 pyqt-fluent-widgets 包并且下载好仓库源代码之后,可以切换到 examples 目录下运行示例代码,比如封面对应的示例代码:

cd examples/settings
python demo.py

如果遇到 ImportError: cannot import name 'XXX' from 'qfluentwidgets',这表明安装的包版本过低。可以按照上面的安装指令将 pypi 源替换为 https://pypi.org/simple 并重新安装.

在线文档

建议在使用之前阅读一下在线帮助文档,里面介绍了使用这个组件库的正确姿势,文档地址为:https://pyqt-fluent-widgets.readthedocs.io/zh_CN/latest

搭配 QtDesigner

可以运行 python ./tools/designer.py 来启动安装了 PyQt-Fluent-Widgets 插件的 QtDesigner。如果操作成功,QtDesigner 的侧边栏中将会显示 PyQt-Fluent-Widgets 的组件,建议使用虚拟环境。对于旧项目的改造,推荐使用 视频教程 中介绍的 提升为...

部分组件展示

下拉框

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

颜色对话框

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

消息框

这个无边框消息框 Dialog 是否圆角取决于操作系统,比如 Win10 就会是尖角。

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

带遮罩的消息框

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

Win10 风格的消息框

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

侧边导航

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

滑块中空的滑动条

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

圆角阴影菜单

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

进度提示条

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

开关按钮

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

工具提示

告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库,pyqt学习日记,ui,pyqt,python,pyside,github,windows,软件工程

许可证

PyQt-Fluent-Widgets 和 PyQt6-Fluent-Widgets 使用 GPLv3 许可证。

PySide6-Fluent-Widgets 和 PySide2-Fluent-Widgets 使用双许可证。非商业用途使用 GPLv3 许可证进行授权,商用请在 爱发电 或者 ko-fi 上进行购买以支持作者的开发。

Copyright © 2021 by zhiyiYo.文章来源地址https://www.toymoban.com/news/detail-695484.html

到了这里,关于告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响,引入后发现项目组件库的组件样式不对了(Element/Ant Design Vue/Naive UI/TDesign)

    网上的教程都无法解决,但本文可以帮助您快速解决该问题。 当项目引入 Tailwind css 后,使用 UI 组件库的某些组件时,发现有些样式丢失及显示错位、背景色丢失等问题, 频发于【按钮组件】背景色丢失 | 【message消息提示组件】样式位置变形等,严重的整个组件库样式都乱

    2024年02月07日
    浏览(59)
  • 更改wpf原始默认按钮的样式

    2024年01月23日
    浏览(32)
  • 【React】Ant Design自定义主题风格及主题切换

    Ant Design 的自定义主题,对于刚入手的时候感觉真是一脸蒙圈,那今天给它梳理倒腾下; 整体样式变化,主要两个部分: https://ant.design/docs/react/customize-theme-cn#theme 官方介绍一大堆,咱们粗暴点就当作 key=value 配置内容来看和理解! 大体分为四块配置项: 分类 涉及配置项 通

    2024年04月22日
    浏览(40)
  • 【Flutter】Flutter 使用 fluent_ui 实现 Windows UI

    当然,我们将按照你的要求分批次输出文章的正文内容。以下是前三个章节的内容: fluent_ui 是一个在 Flutter 中实现 Windows UI 的包。通过使用这个包,开发者可以轻松地在 Flutter 项目中创建出符合 Windows UI 指南的应用程序。本文将详细介绍 fluent_ui 的主要特性和使用方法,帮助

    2024年02月09日
    浏览(42)
  • Ant Design Vue 修改表格头部样式

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。 首先用到的是 customHeaderRow 这个API,类型是一个函数 此图是 console.log(conlumn); 打印出来的 可以看到每一列都有一个className

    2024年02月11日
    浏览(43)
  • qt设置控件的风格样式

    设置tablewidget 设置表头样式 设置Lineedit样式 设置GroupBox样式 设置CheckBox的样式 设置PushButton的样式 设置RadioButton的样式 设置ComboBox的样式 设置Label的样式

    2024年02月14日
    浏览(38)
  • 自定义修改Typora原生默认github风格样式

    使用typora的时候,想要自定义一些颜色、字体,或者修改一些设置,这个时候需要修改或者自己编写css文件。 修改涉及的样式: ① 目录 ② 块应用 我还是比较喜欢原生自带的默认样式(github样式), 但是这个侧边栏大纲目录字体太大,不直观清晰。 还有“块引用”也不明

    2024年02月08日
    浏览(42)
  • UI自动化测试革命:拥抱Maestro框架的未来之旅

    UI自动化测试是一种软件测试方法,旨在验证应用程序的用户界面是否按照预期进行操作和交互。它通过模拟用户在应用程序界面上的行为,如点击按钮、输入文本、选择选项等,来测试应用程序的功能和用户体验。 对于常规的测试手段,也不过如此,在产品开发周期中,测

    2024年01月16日
    浏览(45)
  • ant-design-vue 4.x升级问题-样式丢失问题

    该文档是在升级ant-design-vue到4.x版本的时候遇到的问题 以上是开发项目时使用的包以及包的版本,使用的脚手架是vite 当使用ant-design-vue3.x版本时没有任何问题,但是当升级ant-design-vue到4.0版本时,因为ant-design-vue4.x使用了css-in-js需要修改vite.config.js配置 变更为 修改后当开发环

    2024年02月14日
    浏览(42)
  • 【Blazor之关于组件库Ant Design of Blazor组件样式的修改】

    例如:我们在使用Blazor框架时为了节省时间提升效率会使用到Ant Design of Blazor组件库。在使用过程中我们会根据需求去修改样式,但是由于组件库里面的样式基本上都是封装好的,要想达到自己所需的效果,这时候就需要我们去修改样式。本文就介绍一下我在使用Ant Design of

    2024年02月14日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包