Qt實(shí)現(xiàn)天氣預(yù)報(bào)與PM2.5監(jiān)測(cè)系統(tǒng)（6）系統(tǒng)界面設(shè)計(jì)

系統(tǒng)UI設(shè)計(jì)

一個(gè)圖形化的應(yīng)用，界面設(shè)計(jì)非常重要。現(xiàn)在軟件企業(yè)一般有專門的UI設(shè)計(jì)師，交互設(shè)計(jì)師。

首先用繪圖軟件設(shè)計(jì)出軟件界面的設(shè)計(jì)稿，確定色彩應(yīng)用，控件布局，交互方式等。

系統(tǒng)界面主要分為左右兩塊：
左邊為導(dǎo)航區(qū)域，最上面顯示logo與時(shí)間，下方顯示切換功能界面的按鈕。
右邊為內(nèi)容顯示區(qū)域，不周的子功能顯示的內(nèi)容不一樣。
系統(tǒng)使用統(tǒng)一的藍(lán)色背景界面。

自定義按鈕的實(shí)現(xiàn)

頭文件

#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

實(shí)現(xiàn)文件

#include "mybutton.h"Button::Button(QWidget *parent) : QPushButton(parent) {//保存圖片成員初始化buttonPicture = new QPixmap();pressPicture = new QPixmap();releasePicture = new QPixmap();enterPicture = new QPixmap();leavePicture = new QPixmap();//關(guān)閉按鈕的默認(rèn)顯示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; }

主界面實(shí)現(xiàn)

SysDialog::SysDialog( QWidget *parent): QDialog( parent) {this->setMinimumSize(1024,600);this->setMaximumSize(1024,600);this->setWindowFlags(Qt::FramelessWindowHint);//去掉標(biāo)題欄 this->setWindowIcon(QPixmap( ":/images/3.png") );this->setWindowTitle(tr("Air監(jiān)控系統(tǒng)"));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; }//初始化空氣質(zhì)量界面showAqi = new ShowAqi(this);showAqi->hide();//初始化設(shè)置界面sysSet = new SysSet(this);sysSet->hide();connect(sysSet,SIGNAL(hourChange(int)),this,SLOT(setHour(int)) );// QDateTime time = QDateTime::currentDateTime();//獲取系統(tǒng)現(xiàn)在的時(shí)間//顯示時(shí)間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//計(jì)時(shí)器對(duì)象，500ms鐘發(fā)送一個(gè)timeout()信號(hào)，調(diào)用showState()函數(shù)QTimer *timer = new QTimer(this);timer->start(1000);connect(timer, SIGNAL(timeout()), this, SLOT(updateSYS()));}

按鈕點(diǎn)擊slot函數(shù)（實(shí)現(xiàn)界面切換）

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(); }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。