Qt實現天氣預報與PM2.5監測系統（6）系統界面設計

系統UI設計

一個圖形化的應用，界面設計非常重要。現在軟件企業一般有專門的UI設計師，交互設計師。

首先用繪圖軟件設計出軟件界面的設計稿，確定色彩應用，控件布局，交互方式等。

系統界面主要分為左右兩塊：
左邊為導航區域，最上面顯示logo與時間，下方顯示切換功能界面的按鈕。
右邊為內容顯示區域，不周的子功能顯示的內容不一樣。
系統使用統一的藍色背景界面。

自定義按鈕的實現

頭文件

#ifndef MYBUTTON_H #define MYBUTTON_H#include <QtGui>class Button : public QPushButton {Q_OBJECT public:Button(QWidget *parent=0);void setButtonPicture(QPixmap pic);void setPressPicture(QPixmap pic);void setReleasePicture(QPixmap pic);void setEnterPicture(QPixmap pic);void setLeavePicture(QPixmap pic);void set_X_Y_width_height(int x, int y, int width, int height);void mousePressEvent (QMouseEvent *event);void mouseReleaseEvent (QMouseEvent *event);void setId(QString id);QString getId(void); public slots:private:QPixmap *buttonPicture;QPixmap *pressPicture;QPixmap *releasePicture;QPixmap *enterPicture;QPixmap *leavePicture;bool flag;QString buttonId; };#endif // MYBUTTON_H

實現文件

#include "mybutton.h"Button::Button(QWidget *parent) : QPushButton(parent) {//保存圖片成員初始化buttonPicture = new QPixmap();pressPicture = new QPixmap();releasePicture = new QPixmap();enterPicture = new QPixmap();leavePicture = new QPixmap();//關閉按鈕的默認顯示this -> setFlat(true);this->setFocusPolicy(Qt::NoFocus);//初始化flagflag=false;}void Button::setButtonPicture(QPixmap pic) {*buttonPicture = pic;this -> setIcon(QIcon(*buttonPicture)); }void Button::setPressPicture(QPixmap pic) {*pressPicture = pic; }void Button::setReleasePicture(QPixmap pic) {*releasePicture = pic; }void Button::setEnterPicture(QPixmap pic) {*enterPicture = pic; }void Button::setLeavePicture(QPixmap pic) {*leavePicture = pic; }void Button::set_X_Y_width_height(int x, int y, int width, int height) {this -> setIconSize(QSize(width, height));this -> setGeometry(x, y, width, height); }void Button::mousePressEvent (QMouseEvent *event) {this -> setIcon (QIcon(*pressPicture)); }void Button::mouseReleaseEvent (QMouseEvent *event) {this -> setIcon(QIcon(*releasePicture));emit clicked(); }void Button::setId(QString id) {buttonId = id; }QString Button::getId() {return buttonId; }

主界面實現

SysDialog::SysDialog( QWidget *parent): QDialog( parent) {this->setMinimumSize(1024,600);this->setMaximumSize(1024,600);this->setWindowFlags(Qt::FramelessWindowHint);//去掉標題欄 this->setWindowIcon(QPixmap( ":/images/3.png") );this->setWindowTitle(tr("Air監控系統"));label_pic_bg = new QLabel(this);label_pic_bg->setGeometry(QRect(0, 0, 1024, 600));label_pic_bg->setPixmap(QPixmap(":/images/air_bg1.jpg"));label_pic_bg->setScaledContents(true);//初始化今日天氣界面showToday = new ShowToday(this);//初始化一周天氣界面,postion valueint x = 250;for(int i=0;i<MAX_DAY;i++){showWeek[i] = new DayData(this);showWeek[i]->setVal(x,100,QString::number(i));showWeek[i]->hide();x += 120; }//初始化空氣質量界面showAqi = new ShowAqi(this);showAqi->hide();//初始化設置界面sysSet = new SysSet(this);sysSet->hide();connect(sysSet,SIGNAL(hourChange(int)),this,SLOT(setHour(int)) );// QDateTime time = QDateTime::currentDateTime();//獲取系統現在的時間//顯示時間sysTime = new ShowLabel(this);sysTime->addFontSize(6);sysTime->setGeometry(90,13,100,50); // sysTime->setText(time.toString("hh:mm"));flag_time=0;//顯示按鈕today = new Button(this);today->setButtonPicture(QPixmap( ":/images/air_button1.png"));today->setPressPicture(QPixmap( ":/images/air_button11.png"));today->setReleasePicture(QPixmap( ":/images/air_button1.png"));today->setEnterPicture(QPixmap( ":/images/air_button11.png"));today->setReleasePicture(QPixmap( ":/images/air_button1.png"));today->set_X_Y_width_height(20,150,160,60);connect(today,SIGNAL(clicked()),this,SLOT(goShowToday()) );week = new Button(this);...week->set_X_Y_width_height(20,250,160,60);connect(week,SIGNAL(clicked()),this,SLOT(goShowWeek()) );aqi = new Button(this);...aqi->set_X_Y_width_height(20,350,160,60);connect(aqi,SIGNAL(clicked()),this,SLOT(goShowAqi()) );systemSet = new Button(this);...systemSet->set_X_Y_width_height(20,450,160,60);connect(systemSet,SIGNAL(clicked()),this,SLOT(goSet()) );myProcess = new QProcess(parent);//get day_date from python file,update showthis->get_day_value();showToday->updateVal(dayArr);this->get_week_value();for(int i=0;i<MAX_DAY;i++){showWeek[i]->updateVal(weekArr[i]);}aqiArr[0] = dayArr[13];//pm2.5aqiArr[1] = dayArr[12];//pm10aqiArr[2] = dayArr[15];//aqiaqiArr[3] = aqiArr[0];//pm2.5 localaqiArr[4] = dayArr[0];showAqi->updateVal(aqiArr);QFile f("/home/fa/timer_file");if(!f.open(QIODevice::ReadOnly | QIODevice::Text)){qDebug() << "Open failed." << endl;hourNum = 6;}else{QTextStream fStream(&f);QString readBuf = fStream.readLine();hourNum = readBuf.toInt();f.close();}QString HourN = QString::number(hourNum);sysSet->setSysInit(dayArr[0],HourN);temp_timer = 0;net_timer = 0; #ifdef ARMPM25Init(); #endif//計時器對象，500ms鐘發送一個timeout()信號，調用showState()函數QTimer *timer = new QTimer(this);timer->start(1000);connect(timer, SIGNAL(timeout()), this, SLOT(updateSYS()));}

按鈕點擊slot函數（實現界面切換）

void SysDialog::goShowToday() {if( !(showWeek[0]->isHidden()) ){for(int i=0;i<MAX_DAY;i++)showWeek[i]->hide();}if( !(showAqi->isHidden()) )showAqi->hide();if( !(sysSet->isHidden()) )sysSet->hide();if( showToday->isHidden())showToday->show(); }

總結

以上是生活随笔為你收集整理的Qt实现天气预报与PM2.5监测系统（6）系统界面设计的全部內容，希望文章能夠幫你解決所遇到的問題。

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