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

发布时间:2023年12月20日


一.前言

天气软件之前做过两款,分别是使用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

文章来源:https://blog.csdn.net/a1397852386/article/details/135035884
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。