Qt之天气预报——界面优化篇（含源码+注释）

news2024/9/24 17:17:53

一、界面优化效果

下方为界面优化完成和优化前的效果对比。
优化前：
在这里插入图片描述

优化后：
在这里插入图片描述

二、优化内容

  1. 添加标题栏
  2. 添加图片（图图标素材源自阿里巴巴矢量图标库）
  3. 更新UI内容（微调大小、布局比例）
  4. 添加鼠标事件函数，实现拖动功能
  5. 添加样式重载函数
  6. 图标添加鼠标悬浮提示
  7. 添加QSS样式以及加载函数

三、优化源码（主要优化内容）

CWeatherForecast类的更新

// .h 头文件
public：
    /**
     * @brief overloadStyle 样式重载函数
     */
    void overloadStyle();
    
    // QWidget interface
protected:
    /**
     * @brief mousePressEvent 鼠标按下事件
     * @param event 鼠标事件对象
     */
    void mousePressEvent(QMouseEvent *event);

    /**
     * @brief mouseReleaseEvent 鼠标释放事件
     * @param event 鼠标事件对象
     */
    void mouseReleaseEvent(QMouseEvent *event);

    /**
     * @brief mouseMoveEvent 鼠标移动事件
     * @param event 鼠标事件对象
     */
    void mouseMoveEvent(QMouseEvent *event);
private：
    bool                                        m_pressFlag;            // 鼠标按下标记

    QPoint                                      m_startPos;             // 鼠标按下位置

///
// cpp 源文件

void CWeatherForecast::overloadStyle()
{
    // 卸载程序样式
    qApp->style()->unpolish(qApp);
    // 获取当前时间
    int hour = QTime::currentTime().hour();
    // 判断是否夜晚的标记值
    bool flag = hour >= 8 && hour < 20;
    // 设置是否白日动态属性值
    ui->centralWidget->setProperty("IS_DAY", flag);
    // 重载样式
    qApp->style()->polish(qApp);

    // 获取所有控件链表，遍历重绘
    foreach(QWidget *wgt, qApp->allWidgets())
    {
        wgt->repaint();
    }
}


void CWeatherForecast::on_cityEdit_textChanged(const QString &arg1)
{
    // 当城市编码容器包含当前文本Key值则进入
    if(m_codeInfoMap.contains(arg1) || m_codeInfoMap.values().contains(arg1))
    {
        // 发送天气信息请求
        sendWeatherInfoRequest();
    }
}

void CWeatherForecast::mousePressEvent(QMouseEvent *event)
{
    // 当标题栏包含鼠标位置，并且鼠标为左键按下时进入
    if(ui->titleWgt->rect().contains(event->pos()) && Qt::LeftButton == event->button())
    {
        m_pressFlag = true; // 鼠标按下变量值更为true
        m_startPos = event->globalPos();    // 获取鼠标的全局位置
    }
}

void CWeatherForecast::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    m_pressFlag = false;    // 鼠标释放时标记值更为false
}

void CWeatherForecast::mouseMoveEvent(QMouseEvent *event)
{
    // 当标记值为true时进入
    if(m_pressFlag)
    {
        // 当前窗口移动，当前位置 + 最新鼠标全局位置 - 上次鼠标全局位置（此处为了计算出偏移量）
        this->move(this->pos() + event->globalPos() - m_startPos);
        m_startPos = event->globalPos();    // 更新鼠标全局位置
    }
}

WeatherForecast.qss

/****QWidget****/
QWidget
{
	color:white;	/*所有控件字体颜色为白色*/
	background-color:#4b84ff;	/*所有控件背景颜色*/
	background:transparent;		/*所有控件效果透明*/
	font-family:KaiTi;	/*所有控件字体为楷体*/
	font-size:18px;	/*所有控件字体大小*/
}

/**********主窗口**********/
/*日间背景*/
QWidget[MAIN_WINDOW = true][IS_DAY = true]
{
	border-image:url(./StyleTheme/Theme1/bg_day.png); /*添加背景图片*/
}
/*夜间背景*/
QWidget[MAIN_WINDOW = true][IS_DAY = false]
{
	border-image:url(./StyleTheme/Theme1/bg_night.png);	/*添加背景图片*/
}

QWidget[TITLE_WGT = true]
{
	border-bottom: 1px solid white;
	border-top: 1px solid white;
}

/****QLabel****/
/*天气预报图标*/
QLabel[ICON_LAB = true]
{
	border-image:url(./StyleTheme/Base/tqyb.png);	/*添加标签背景图片*/
}

/*城市标签*/
QLabel[CITY = true]
{
	font-weight:bold;	/*粗体*/
	font-size:20px;		/*字体大小*/
}	

/*天气标签图标*/
QLabel[WEATHER = "晴"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-qing.png);
}

QLabel[WEATHER = "阴"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-yin.png);
}

QLabel[WEATHER = "多云"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-duoyun.png);
}

QLabel[WEATHER = "小雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-xiaoyu.png);
}

QLabel[WEATHER = "中雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-zhongyu.png);
}

QLabel[WEATHER = "大雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-dayu.png);
}

QLabel[WEATHER = "暴雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-baoyu.png);
}

QLabel[WEATHER = "大暴雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-dabaoyu.png);
}

QLabel[WEATHER = "小雪"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-xiaoxue.png);
}

QLabel[WEATHER = "中雪"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-zhongxue.png);
}

QLabel[WEATHER = "大雪"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-daxue.png);
}

QLabel[WEATHER = "暴雪"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-baoxue.png);
}

QLabel[WEATHER = "雷阵雨"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-leiyu.png);
}

QLabel[WEATHER = "浮尘"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-shachen.png);
}

QLabel[WEATHER = "霜"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-shaung.png);
}

QLabel[WEATHER = "雾"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-wu.png);
}

QLabel[WEATHER = "扬沙"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-yangsha.png);
}

QLabel[WEATHER = "雨夹雪"]
{
	border-image:url(./StyleTheme/Theme1/tianqi-yujiaxue.png);
}

/****QPushButton****/
/*切换按钮*/
QPushButton[SWITCH_MODE_BTN = true]
{
	background-color: #808080;	/*切换按钮背景颜色*/
	border: 2px solid #ffffff;	/*切换按钮边框样式*/
	border-radius: 5px;	/*切换按钮边角圆润*/
}

/*切换按钮悬浮*/
QPushButton[SWITCH_MODE_BTN = true]:hover
{
	background-color: #a2a2a2;	/*悬浮背景色*/
}

/*关闭按钮*/
QPushButton[CLOSE_BTN = true]
{
	width:24px;
	height:24px;
	border-image:url(./StyleTheme/Base/close.png);	/*关闭按钮背景*/
}	

/*关闭按钮悬浮*/
QPushButton[CLOSE_BTN = true]:hover
{
	border-image:url(./StyleTheme/Base/close_hover.png);	/*关闭按钮悬浮背景*/
}

/*最小化按钮*/
QPushButton[MIN_BTN = true]
{
	width:24px;
	height:24px;
	border-image:url(./StyleTheme/Base/min.png);	/*最小化按钮背景*/
}	

/*最小化按钮悬浮*/
QPushButton[MIN_BTN = true]:hover
{
	border-image:url(./StyleTheme/Base/min_hover.png);	/*最小化按钮悬浮背景*/
}


/****QComboBox****/
/*下拉框*/
QComboBox
{
	border: 1px solid #ffffff; /*下拉框样式*/
	border-radius:3px;	/*下拉框边角圆润*/
}

/*点击下拉框的样式*/
QComboBox:on
{
	background-color:rgba(172, 179, 211); /*点击后的背景颜色*/
	border:1px solid blue;
}

/*下拉框下拉按钮的边框*/
QComboBox::drop-down 
{
	border:none;	/*没有边框*/
}

QComboBox::down-arrow 
{
	width: 9px;
	height: 9px;
 	image: url(./StyleTheme/Base/arrow_down2.png);	/*下拉按钮背景图片（未点击）*/
}

QComboBox::down-arrow:on 
{
	image: url(./StyleTheme/Base/arrow_up2.png);	/*下拉按钮背景图片（已点击）*/
}

/*下拉列表的样式*/
QComboBox QAbstractItemView 
{
    background-color: gray; /*下拉列表的背景色*/
}

/****QMenu****/
QMenu 
{
	border: 1px solid #CCCCCC; /* 边框宽度为1px，颜色为#CCCCCC */
	border-radius: 3px; /* 边框圆角 */
	background-color: #FAFAFC; /* 背景颜色 */
}

QMenu::item 
{ /* 菜单子控件item，为菜单项在default的状态 */
	border: 0px solid transparent;
	background-color: transparent;
	color: black; /* 文本颜色 */
	font-size: 18px;
	min-height: 25px;
	padding:5px 5px 5px 5px;
}

QMenu::item:selected 
{ /* 为菜单项在selected的状态 */
	background-color: #EBEBEB;
}

总结

界面优化主要提供给用户使用，养眼的样式会给用户提供良好的体验。同时，做界面优化篇我还体验到UI的重要性，一个好的UI设计会带来许多便利。有需要的小伙伴可私聊取源码。

相关文章

Qt之天气预报实现（一）预备篇
Qt之天气预报——功能实现篇（含源码+注释）

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 ^o^/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/98091.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java 教程

Java 教程

Java 教程 Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。 Java 可运行于多个平台&#xff0c;如 Windows, Mac OS 及其他多种 UNIX 版本的系统。 本教程通过简单的实例将让大家更好的了解 Java 编程语言。 移动操作系统 Android 大部分的代码采用…
阅读更多...
RepVGG：一个结构重参数化网络

RepVGG：一个结构重参数化网络

本文来自公众号“AI大道理” ResNet、DenseNet 等复杂的多分支网络可以增强模型的表征能力&#xff0c;使得训练效果更好。但是多分支的结构在推理的时候效率严重不足。 看起来二则不可兼得。 能否两全其美&#xff1f; RepVGG通过结构重参数化的方法&#xff0c;在训练的时候…
阅读更多...
2022 年 Kubernetes 高危漏洞盘点

2022 年 Kubernetes 高危漏洞盘点

2022 年&#xff0c;Kubernetes继续巩固自己作为关键基础设施领域的地位。从小型到大型组织&#xff0c;它已成为广受欢迎的选择。出于显而易见的原因&#xff0c;这种转变使 Kubernetes 更容易受到攻击。但这还没有结束&#xff0c;开发人员通常将Kubernetes 部署与其他云原生…
阅读更多...
【2022.12.18】备战春招Day13——每日一题 + 234. 回文链表 + 139. 单词拆分

【2022.12.18】备战春招Day13——每日一题 + 234. 回文链表 + 139. 单词拆分

【每日一题】1703. 得到连续 K 个 1 的最少相邻交换次数 题目描述 给你一个整数数组 nums 和一个整数 k 。 nums 仅包含 0 和 1 。每一次移动&#xff0c;你可以选择 相邻 两个数字并将它们交换。 请你返回使 nums 中包含 k 个 连续 1 的 最少 交换次数 输入&#xff1a;nums …
阅读更多...
【数据结构】堆（二）——堆排序、TOP-K问题

【数据结构】堆（二）——堆排序、TOP-K问题

作者&#xff1a;一个喜欢猫咪的的程序员 专栏&#xff1a;《数据结构》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 目录 堆排序&#xff1a;&#xff08;以小堆为例&#xff09; Heapsort函数…
阅读更多...
C语言重点解剖关键字要点速记

C语言重点解剖关键字要点速记

1.在windows中&#xff0c;双击的本质是运行该程序&#xff0c;就是将程序(.exe)加载到内存当中去。任何程序在被运行之前都必须加载到内存当中去。 2.所有的变量本质都是在内存的某个位置开辟的。变量不能定义在硬盘上&#xff0c;因为变量必须在程序运行的时候才能被开辟&am…
阅读更多...
SPRING-了解1

SPRING-了解1

1)最终address: 查找路径比较长&#xff0c;很有趣 JFrog 原始步骤1)进入 spring.io&#xff0c;点击右上角黑色标记边的标记 2)进入 git,找到 Binaries下面的 Spring Framework Artifacts 3)进一步找到Downlaoding a Distribution,下面有 https://repo.spring.io 4)x选择…
阅读更多...
牛客SQL每日一题之SQL136 每类试卷得分前3名

牛客SQL每日一题之SQL136 每类试卷得分前3名

文章目录SQL136 每类试卷得分前3名描述示例1输入&#xff1a;输出&#xff1a;答案SQL136 每类试卷得分前3名 描述 现有试卷信息表examination_info&#xff08;exam_id试卷ID, tag试卷类别, difficulty试卷难度, duration考试时长, release_time发布时间&#xff09;&#x…
阅读更多...
C# 中的 Infinity 和 NaN

C# 中的 Infinity 和 NaN

C# 语言中&#xff0c;对于 int&#xff0c;long 和 decimal 类型的数&#xff0c;任何数除以 0 所得的结果是无穷大&#xff0c;不在 int&#xff0c;long 和 decimal 类型的范围之内&#xff0c;所以计算 6/0 之类的表达式会出错。 但是&#xff0c;double 和 float 类型实际…
阅读更多...
Java入门笔记补充

Java入门笔记补充

Java基础笔记补充数据类型数据类型整形拓展浮点型拓展字符型拓展类型转换变量变量作用域局部变量实例变量静态变量变量的命名规范数组三种初始化静态初始化动态初始化数组的默认初始化Arrays类内存分析栈 stack&#xff1a;堆 heap&#xff1a;方法区(也是堆)&#xff1a;封装继…
阅读更多...
卷积神经网络 图像处理,卷积神经网络图片处理

卷积神经网络 图像处理,卷积神经网络图片处理

1、在做图像处理时&#xff0c;如何提高识别算法的设计与效果的精度&#xff1f; 得到更多的数据 这无疑是最简单的解决办法&#xff0c;深度学习模型的强大程度取决于你带来的数据。增加验证准确性的最简单方法之一是添加更多数据。如果您没有很多训练实例&#xff0c;这将特…
阅读更多...
AllegroBGA如何自动fanout操作指导

AllegroBGA如何自动fanout操作指导

AllegroBGA如何自动fanout操作指导 当我们需要给BGA做fanout的时候，逐个pin去fanout是件比较麻烦的事情，下面介绍Allegro中如何自动fanout，以下图BGA为例 具体操作如下 选择Route-Create Fanout 选择Via类型，比如Via10 Via Direction BGA Quadrant Style Pin-via Space…
阅读更多...
数字化母婴店，母婴智慧会员管理小程序

数字化母婴店，母婴智慧会员管理小程序

会员店想必很多小伙伴都接触过或有所耳闻&#xff0c;会员店的本质是通过好产品、好服务及好内容营造出完整且完美的用户消费体验&#xff0c;虽然纯会员店并不多&#xff0c;但如今越来越多的各行业商家意识到每个流量用户都很重要&#xff0c;需要维护好每个用户&#xff0c;…
阅读更多...
18.Django大型项目之用户中心页面

18.Django大型项目之用户中心页面

1. 用户中心的搭建 1.1 基础搭建 这里&#xff0c;主要就是基础的页面渲染&#xff0c;使用的也是继承主模板&#xff0c;对其进行修改的方式。就直接看代码吧 1.2 上下文的应用 什么是上下文&#xff1f; 对于上下文&#xff0c;可以理解成一个公用的函数或者类 我们这里使…
阅读更多...
Qt使用MSVC2015找不到编译器的解决办法

Qt使用MSVC2015找不到编译器的解决办法

Qt使用MSVC2015找不到编译器的解决办法 1、问题描述 安装qt前&#xff0c;已安装vscode&#xff0c;构建套件MSVC2015 32/64bit出现红色感叹号&#xff0c;并报错构建套件中未设置编译器 2、解决办法 step1:通过windows SDK工具安装调试器。 工具下载地址&#xff1a;https:/…
阅读更多...
244. 谜一样的牛——二分+树状数组

244. 谜一样的牛——二分+树状数组

有 n 头奶牛&#xff0c;已知它们的身高为 1∼n 且各不相同&#xff0c;但不知道每头奶牛的具体身高。 现在这 n 头奶牛站成一列&#xff0c;已知第 i 头牛前面有 Ai 头牛比它低&#xff0c;求每头奶牛的身高。 输入格式 第 1 行&#xff1a;输入整数 n。 第 2…n 行&#x…
阅读更多...
Linux——组管理和权限管理

Linux——组管理和权限管理

Linux组 基本介绍 在Linux中的每个用户必须属于一个组&#xff0c;不能独立于组外&#xff0c;在Linux中每个文件有所有者&#xff0c;所在组&#xff0c;其他组的概念。 所有者 一般为文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自然的成为该文件的所有者。 查…
阅读更多...
构造序列（模拟构造）

构造序列（模拟构造）

请你构造一个 01 序列&#xff0c;序列需要满足以下所有要求&#xff1a; 恰好包含 n 个 0 和 m 个 1。不存在两个或两个以上的 0 连续相邻。不存在三个或三个以上的 1 连续相邻。 输入格式 共一行&#xff0c;包含两个整数 n,m。 输出格式 输出共一行&#xff0c;如果存在…
阅读更多...
【js记录】递归进行深拷贝时对于Object遍历方法的思考【深浅拷贝+object县官属性介绍+类型判断方法+for...in+for...of】

【js记录】递归进行深拷贝时对于Object遍历方法的思考【深浅拷贝+object县官属性介绍+类型判断方法+for...in+for...of】

一、 前言&#xff1a;本文使用的 类型判断方法介绍 通过手写instaceof更好理解其作用及使用 1、 typeof 判断一个实例属于哪种类型 2、 instance 判断一个实例是否属于某种类型let person function(){ } let no new person(); no instanceof person; // true3、 原型…
阅读更多...
IT分销商未来在哪里？南京创瑞丰向复合型产品方案商转型

IT分销商未来在哪里？南京创瑞丰向复合型产品方案商转型

在一个充满不确定性的市场中&#xff0c;思变求新是企业的唯一出路。 诚如IT分销领域&#xff0c;云计算、大数据、人工智能等技术的兴起&#xff0c;加速企业数字化转型的同时&#xff0c;亦对于传统IT分销市场的未来产生了深远影响。过去“搬箱子”、打价格战的方式方法正在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023