Qt实现天气预报与PM2.5监测系统（6）系统界面设计

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

        //初始化flag
        flag=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 value
    int 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 show
    this->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.5
    aqiArr[1] = dayArr[12];//pm10
    aqiArr[2] = dayArr[15];//aqi
    aqiArr[3] = aqiArr[0];//pm2.5 local
    aqiArr[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 ARM
    PM25Init();
#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();
}