一、界面优化效果

下方为界面优化完成和优化前的效果对比。
优化前：

优化后：

二、优化内容

添加标题栏
添加图片（图图标素材源自阿里巴巴矢量图标库）
更新UI内容（微调大小、布局比例）
添加鼠标事件函数，实现拖动功能
添加样式重载函数
图标添加鼠标悬浮提示
添加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; // 鼠标按下变量值更为truem_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/Theme/bg_day.png); /*添加背景图片*/
}
/*夜间背景*/
QWidget[MAIN_WINDOW = true][IS_DAY = false]
{border-image:url(./StyleTheme/Theme/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/Theme/tianqi-qing.png);
}QLabel[WEATHER = "阴"]
{border-image:url(./StyleTheme/Theme/tianqi-yin.png);
}QLabel[WEATHER = "多云"]
{border-image:url(./StyleTheme/Theme/tianqi-duoyun.png);
}QLabel[WEATHER = "小雨"]
{border-image:url(./StyleTheme/Theme/tianqi-xiaoyu.png);
}QLabel[WEATHER = "中雨"]
{border-image:url(./StyleTheme/Theme/tianqi-zhongyu.png);
}QLabel[WEATHER = "大雨"]
{border-image:url(./StyleTheme/Theme/tianqi-dayu.png);
}QLabel[WEATHER = "暴雨"]
{border-image:url(./StyleTheme/Theme/tianqi-baoyu.png);
}QLabel[WEATHER = "大暴雨"]
{border-image:url(./StyleTheme/Theme/tianqi-dabaoyu.png);
}QLabel[WEATHER = "小雪"]
{border-image:url(./StyleTheme/Theme/tianqi-xiaoxue.png);
}QLabel[WEATHER = "中雪"]
{border-image:url(./StyleTheme/Theme/tianqi-zhongxue.png);
}QLabel[WEATHER = "大雪"]
{border-image:url(./StyleTheme/Theme/tianqi-daxue.png);
}QLabel[WEATHER = "暴雪"]
{border-image:url(./StyleTheme/Theme/tianqi-baoxue.png);
}QLabel[WEATHER = "雷阵雨"]
{border-image:url(./StyleTheme/Theme/tianqi-leiyu.png);
}QLabel[WEATHER = "浮尘"]
{border-image:url(./StyleTheme/Theme/tianqi-shachen.png);
}QLabel[WEATHER = "霜"]
{border-image:url(./StyleTheme/Theme/tianqi-shaung.png);
}QLabel[WEATHER = "雾"]
{border-image:url(./StyleTheme/Theme/tianqi-wu.png);
}QLabel[WEATHER = "扬沙"]
{border-image:url(./StyleTheme/Theme/tianqi-yangsha.png);
}QLabel[WEATHER = "雨夹雪"]
{border-image:url(./StyleTheme/Theme/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;
}/****QMessageBox****/
QMessageBox
{background-color:skyblue;
}

总结

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

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

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

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

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

Qt数据库练习之QSqlTableModel的使用（MySql数据库示例，含源码+注释）
文章目录一.操作示例 1.1 修改记录(数据) 1.2 添加记录(数据) 1.3 删除记录(数据) 1.4 取消操作 1.5 排序操作 1.6 查询操作二.了解QSqlTableModel 三.源 ...
Qt之语言家的简单使用（一）（Qt翻译UI，Qt Linguist的使用，含源码+注释）
文章目录一.翻译程序示例图二.流程须知(个人理解) 三.关于对话框中QDialogButtonBox翻译的操作四.源码 CLinguistTest.h CLinguistTest.cpp CLi ...
Qt之超简单的TCP通信（自定义TCP通信类，含源码+注释）
文章目录一.TCP通信示例图二.TCP使用前的准备三.自定义TCP通信类的两种方法四.源码(含注释) TCP Server CTcpServer.h CTcpServer.cpp TCP Cl ...
Qt小游戏之数字华容道（百行代码搭雏形，可玩；含源码+注释）
文章目录一.数字华容道,样图如下二.废话少说直接上代码 1.首先是代码文件分析 2.CLabel的源码 3.CMainWindow的源码 4.main文件总结一.数字华容道,样图如下相信大家 ...
[qt] 高仿360手机助手[含源码]
[qt] 高仿360手机助手实现功能如下: 1. 高仿真界面 2. 获取当前手机屏幕,以及可以截图 3. 获取手机短信/通讯录/应用信息/系统应用信息/视频/音乐. demo版地址: http:// ...
使用Qt作窗口截屏（含源码）
截屏(screenshot),就是将屏幕上的东西拷贝下来存成图片文件.介绍的好像有点多余:(,那我们就直接切入正题. QPixmap提供了两个函数grabWidget和grabWindow可以将屏幕上 ...
SwiftUI 界面大全之IOT物联网复杂管理界面（教程含源码）
实战需求 SwiftUI 界面大全之IOT物联网复杂管理界面本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能 1.轮播图轮动主界面 2.see all查看全部组件 3.自动 ...
Eatting外卖基于瑞吉外卖代码全功能优化含源码
Eatting外卖基于瑞吉外卖代码全功能优化含源码文章目录项目的最终部署源码地址 github:[源码地址](https://github.com/yangxingyue0623/Eating_ ...
swiper叠加轮播效果（含源码） - 案例篇
swiper叠加轮播效果(含源码) - 效果图效果图: 图片素材来源于网络. [swiper 源码效果 · 对比地址] 代码: <!DOCTYPE html> <html lang ...

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

一、界面优化效果

二、优化内容

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

CWeatherForecast类的更新

WeatherForecast.qss

总结

相关文章

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

最新文章

热门文章