一、界面優(yōu)化效果

下方為界面優(yōu)化完成和優(yōu)化前的效果對比。
優(yōu)化前：

優(yōu)化后：

二、優(yōu)化內容

添加標題欄

添加圖片（圖圖標素材源自阿里巴巴矢量圖標庫）

更新UI內容（微調大小、布局比例）

添加鼠標事件函數(shù)，實現(xiàn)拖動功能

添加樣式重載函數(shù)

圖標添加鼠標懸浮提示

添加QSS樣式以及加載函數(shù)

三、優(yōu)化源碼（主要優(yōu)化內容）

CWeatherForecast類的更新

// .h 頭文件 public：/*** @brief overloadStyle 樣式重載函數(shù)*/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;// 設置是否白日動態(tài)屬性值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)){// 發(fā)送天氣信息請求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的狀態(tài) */border: 0px solid transparent;background-color: transparent;color: black; /* 文本顏色 */font-size: 18px;min-height: 25px;padding:5px 5px 5px 5px; }QMenu::item:selected { /* 為菜單項在selected的狀態(tài) */background-color: #EBEBEB; }/****QMessageBox****/ QMessageBox {background-color:skyblue; }

總結

界面優(yōu)化主要提供給用戶使用，養(yǎng)眼的樣式會給用戶提供良好的體驗。同時，做界面優(yōu)化篇我還體驗到UI的重要性，一個好的UI設計會帶來許多便利。有需要的小伙伴可私聊取源碼。

相關文章

Qt之天氣預報實現(xiàn)（一）預備篇
Qt之天氣預報——功能實現(xiàn)篇（含源碼+注釋）

友情提示——哪里看不懂可私哦，讓我們一起互相進步吧
（創(chuàng)作不易，請留下一個免費的贊叭 謝謝 ^o^/)

注：文章為作者編程過程中所遇到的問題和總結，內容僅供參考，若有錯誤歡迎指出。
注：如有侵權，請聯(lián)系作者刪除

總結

以上是生活随笔為你收集整理的Qt之天气预报——界面优化篇（含源码+注释）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。