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

一、界面优化效果

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

优化后：

二、优化内容 添加标题栏添加图片（图图标素材源自阿里巴巴矢量图标库）更新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; // 鼠标按下变量值更为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/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^/)

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