python3GUI--仿win11风格天气小工具By:PyQt5

---

一．前言

天气软件之前做过两款，分别是使用Tk和PyQt5制作的，不幸的是之前的接口都失效了。博主初学QFluentWidgets制作了一款仿win风格的天气小工具，仿照win11系统上自带软件“天气”，支持两种颜色风格切换，交互和功能也类似。

二．展示

1.首页-白色

软件启动后进入首页，程序自动定位当前所在城市，首页加载历史收藏的城市天气，本次基本所有功能都集中到首页中，功能比较聚合，很多功能是通过卡片的形式展示的。

1.首页-白色2

2.首页-黑色

通过点击上方按钮切换到黑色皮肤，黑色皮肤相对白色更好看一些，通过点击按钮切换最下方卡片，切换到天气资讯以及光遇天气。

3.天气预报视频

通过点击首页天气预报播放按钮切换到天气播放页面，软件内置播放器，天气预报视频即时播放。

4.天气资讯-白色

点击首页天气资讯卡片到资讯二级页，天气资讯二级页下方推荐一些最新的天气资讯。

5.天气资讯-黑色

6.收藏夹-白色

收藏夹存储一些收藏的地理位置天气，可以鸟瞰所有收藏的城市天气，收藏方式是点击首页上方“星星”按钮

7.收藏夹-黑色

点击城市卡片跳转到首页查看所选天气，亦可点击+号添加一个城市。

8.搜索

在首页右上角输入城市名称，软件自动展示搜索关联词，点击搜索关联词或者右侧放大镜按钮即可添加所选城市到首页，查看城市天气。

9.mini-白色

通过点击右下角按钮，切换到mini模式，mini窗口自动贴合置顶到屏幕右上角

10.mini-黑色

双击mini或点击下方“查看完整预报”回到主界面

11.光遇天气

点击下方卡片到光遇天气预报页面

三．组件-览

在此使用一个列表展示本次使用的qfluentwidgets组件类名以及简介，顺序排名不分先后。

组件类名	描述
MessageBox	遮罩消息对话框
isDarkTheme	判断系统主题
FluentTranslator	翻译
SplashScreen	闪屏
SplitFluentWindow	拆分流畅窗口
FluentIcon	遮罩消息对话框
NavigationAvatarWidget	导航头像框
SearchLineEdit	搜索框
SubtitleLabel	子标题标签
TransparentToolButton	透明工具按钮
StrongBodyLabel	强调主题内容标签
CommandBar	命令栏
Action	命令项
BodyLabel	主体内容标签
CardWidget	卡片组件
Theme	主题枚举类
setTheme	主题设置
CaptionLabel	小标题标签
SimpleCardWidget	简单卡片组件
DisplayLabel	巨大标题标签
LargeTitleLabel	大标题标签
ElevatedCardWidget	阴影卡片组件
VerticalSeparator	垂直分割组件
HorizontalSeparator	水平分割组件
RoundMenu	圆角菜单
MenuAnimationType	菜单动画类型枚举类
ListWidget	列表部件
SmoothScrollArea	使用动画实现的平滑滚动区域
SingleDirectionScrollArea	单方向平滑滚动区域
PillPushButton	圆形按钮
ProgressRing	进度环
FlowLayout	流式布局
ImageLabel	图像标签
BodyLabel	主体内容标签

四．功能-览

在此用一张思维导图展示本软件所有功能

五．心得

1.概括

本篇是笔者自学QFluentWidgets时的一款demo，旨在于探索QFluentWidgets其中奥秘。在学习过程中遇到一些问题都通过官方文档和作者demo解决了，这套组件库给我的感觉就是：我基本不需要去化很多心思去设计样式，样式本身就很好看，自带的主题和系统色和windows风格完美契合。在软件开发过程中我只需要关心我的界面如何设计，如何将引擎处理好的数据展示到UI界面上。

2.分享

本次做了一个日期卡片，个人觉得很有意思，实现很简单，只要布局+组件即可，在此把源码分享给大家。

1.日期卡片源码

代码一共不到100行，大家只需要复制粘贴即可运行。

import sys

from PyQt5.QtCore import QTimer, QDateTime, QSize, Qt
from PyQt5.QtWidgets import QVBoxLayout, QApplication
from qfluentwidgets import CardWidget, TransparentToolButton, ProgressRing, BodyLabel, CaptionLabel


class dateTime_panel(CardWidget):
	"""
	时间组件
	"""

	def __init__(self, p=None):
		super(dateTime_panel, self).__init__(p)
		self.ui_init()
		self.timer_init()
		self.timer.start()

	def timer_init(self):
		self.timer = QTimer(self)
		self.timer.setInterval(1000)
		self.timer.timeout.connect(self.update_time)

	def update_time(self):
		qdt = QDateTime.currentDateTime()
		str_dt, time = qdt.toString("yyyy-MM-dd hh:mm:ss").split(" ")
		h, m, s = time.split(":")
		self.date_lable.setText(str_dt)
		self.time_label.setText(time)
		self.hourRing.setValue(int(h))
		self.minRing.setValue(int(m))
		self.secRing.setValue(int(s))

	def ui_init(self):
		self.setMaximumSize(QSize(400, 280))
		self.setFixedHeight(280)
		self.setMinimumWidth(350)
		self.layout = QVBoxLayout()
		self.layout.setSpacing(5)
		self.word_btn = TransparentToolButton(self)
		self.word_btn.setText("时间卡片 >")
		self.hourRing = ProgressRing(self)
		self.hourRing.setMinimum(0)
		self.hourRing.setMaximum(24)
		self.hourRing.setStrokeWidth(10)

		hour_layout = QVBoxLayout(self.hourRing)
		self.minRing = ProgressRing(self.hourRing)
		self.minRing.setMinimum(0)
		self.minRing.setMaximum(60)
		self.minRing.setStrokeWidth(10)
		hour_layout.addWidget(self.minRing)
		hour_layout.setAlignment(self.minRing, Qt.AlignCenter)

		min_layout = QVBoxLayout(self.minRing)
		self.secRing = ProgressRing(self.minRing)
		self.secRing.setMinimum(0)
		self.secRing.setMaximum(60)
		self.secRing.setStrokeWidth(10)
		self.hourRing.setCustomBarColor("#0033FF", "#3366FF")
		self.minRing.setCustomBarColor("#009900", "#66CC66")
		self.hourRing.setFixedSize(QSize(150, 150))
		self.minRing.setFixedSize(QSize(120, 120))
		self.secRing.setFixedSize(QSize(90, 90))
		min_layout.addWidget(self.secRing)
		min_layout.setAlignment(self.secRing, Qt.AlignCenter)

		self.date_lable = BodyLabel(self)
		hover_layout = QVBoxLayout(self.secRing)
		self.time_label = BodyLabel(self.secRing)
		hover_layout.addWidget(self.time_label)
		hover_layout.setAlignment(self.time_label, Qt.AlignCenter)

		self.layout.addWidget(self.word_btn)
		self.layout.addWidget(self.hourRing)
		self.layout.addWidget(self.date_lable)
		self.layout.setAlignment(self.hourRing, Qt.AlignCenter)
		self.layout.setAlignment(self.date_lable, Qt.AlignCenter)
		self.setLayout(self.layout)

if __name__ == '__main__':
	QApplication.setHighDpiScaleFactorRoundingPolicy(
		Qt.HighDpiScaleFactorRoundingPolicy.PassThrough)
	QApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
	QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps)
	app = QApplication(sys.argv)
	w = dateTime_panel()
	w.show()
	app.exec_()

六．总结

本次使用QFluentWidgets制作了一款仿win天气软件，支持国内精确到市的天气，首次启动支持定位当前所在城市天气，多个城市选择。觉得本篇还不错的，能留个赞么？谢谢~

在此致敬QFluentWidgets的开发者们！

七．参考

1.QFluentWidgets - 基于 PyQt/PySide 的 Fluent Design 风格组件库
2.PyQt-Fluent-Widgets