ui界面设计

      由于是刚刚来实习，所以上手起来有点慢，但好在我之前有QT设计的基础，所以在UI界面设计上也是摸索出来一些感悟。

      我做的事我们公司给的界面，有三个界面能实现主界面点击->下一界面（下一界面再点击）->第三个界面。后两个界面中都有回到主菜单的图片，点击即会回到主菜单，而不是回到上一级的菜单

这是MainWindow.h

                       

#ifndef MAINWINDOW_H

#define MAINWINDOW_H

#include "dialog.h"

#include <QMainWindow>

#include <QtGui>

#include <QPushButton>

#include <QMouseEvent>

#include <QPainter>

#include <QTimer>

#include <QTime>

namespace Ui {

class MainWindow;

}

class MainWindow : public QMainWindow

{

    Q_OBJECT

public:

    explicit MainWindow(QWidget *parent = 0);

    void paintEvent(QPaintEvent * event);

    void mousePressEvent(QMouseEvent *event);//鼠标按下事件

    ~MainWindow();

public slots:

    void showTime();

private:

    Ui::MainWindow *ui;

    Dialog d;

    QString txtTime;

};

#endif // MAINWINDOW_H

      里面的头文件包含QMouseEvent是鼠标的类库，然后下面的mousePressEvent表示的是重写鼠标点击事件；让鼠标的点击往我们想要的方向发展，

QPainter是画笔的库，paintEvent是对界面进行绘制的函数；private类型中的Dialog  d；是产生一个下一界面的对象；这里要注意产生的对象一定要在.h中声明，在.cpp中声明的话相当于零时变量，并不会产生你想要的结果。

这是MainWindow.cpp

              

#include "mainwindow.h"

#include "ui_mainwindow.h"

#include <QVBoxLayout>

MainWindow::MainWindow(QWidget *parent) :

    QMainWindow(parent),

    ui(new Ui::MainWindow)

{

    ui->setupUi(this);

    setWindowState(Qt::WindowMaximized);

    QTimer *timer = new QTimer(this);

    connect(timer,SIGNAL(timeout()),this,SLOT(showTime()));

            timer->start(1000);

   /* pushButton3D = new QPushButton();

    QIcon icon3D(":/C:/Users/Administrator/Desktop/练习图片/finish_button.png");

    pushButton3D->setIcon(icon3D);

    QVBoxLayout *layout = new QVBoxLayout();

    layout->addWidget(pushButton3D);

    this->setLayout(layout);

    this->resize(rect().width()/5, rect().height()/2.5);

    this->setWindowTitle("QPushButtonDemo");*/

}

MainWindow::~MainWindow()

{

    delete ui;

}

这里面有一个setWindowState（Qt：：windowMaximized）这是将运行出来的窗口直接设置成屏幕的大小也是为我后面的坐标算简单些。

其中的图片资源都是用QT source file添加的。

     

void MainWindow:: paintEvent(QPaintEvent * event)

{

   QPixmap blue = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/talk_background.png") ;

   QPixmap BlockGround = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/greet_background.png") ;

   QPixmap toy = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/chat_robert_head.png") ;

   QPixmap boy = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/human_head.png") ;

   QPixmap sing = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/sing.png") ;

   QPixmap sign = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/sign.png") ;

   QPixmap button = QPixmap(":/xi/C:/Users/xiehui/Desktop/练习图片/finish_button.png") ;

   QPainter painter;

   painter.begin(this);

   painter.drawPixmap(0,0,rect().width(),rect().height(),BlockGround);

   painter.drawPixmap(0,0,rect().width()/4,rect().height(),blue);

   painter.drawPixmap(rect().width()/20,rect().height()/30,toy);

   painter.drawPixmap(rect().width()/20,rect().height()/2.5,boy);

   painter.drawPixmap(rect().width()/18,rect().height()/3,rect().width()/8,rect().height()/6,sing);

   painter.drawPixmap(rect().width()/45,rect().height()/1.3,sign);

   painter.drawPixmap(rect().width()/5,rect().height()/2.5,100,100,button);

这是对paintEvent进行定义，其中的QPixmap这个类可以简单的在我们的画板上贴图，讲白了就是存放图片，QPainter类是画板，我们定义一个画板的对象，让这个对象painter.begin(this);意思是在当前的界面中进行绘图，默认的起始位置是桌面的左上角0，0位置。然后painter.drawPixmap是对我们之前保存的图片进行位置和大小的变换，一共五个参数，前面两个是位置一个Width，一个是high，后面两个是图片的大小width，high，最后一个是我们要调用的图片对象

          

 QFont font("Arial",18,QFont::Bold,false);//设置字体的类型，大小，加粗，斜体

   painter.setFont(font);//添加字体

   QRectF ff(40,110,300,200);

   painter.setPen(QColor(Qt::white));

   painter.drawText(ff,Qt::AlignCenter,"请问你有什么要咨询的吗？");

   QRectF gg(20,400,350,200);

   painter.setPen(QColor(Qt::white));

   painter.drawText(gg,Qt::AlignCenter,"我想咨询一下理财产品？\r\n有介绍吗？大概什么情况？\r\n怎么了解呢？");

   QFont f("Arial",30,QFont::Bold,false);//设置字体的类型，大小，加粗，斜体

   painter.setFont(f);//添加字体

   QRectF hh(600,80,450,200);

   painter.setPen(QColor(Qt::blue));

   painter.drawText(hh,Qt::AlignCenter,"请问您需要什么帮助？");

   QFont o("Arial",20,QFont::Bold,false);//设置字体的类型，大小，加粗，斜体

   painter.setFont(o);//添加字体

   QRectF jj(590,140,450,200);

   painter.setPen(QColor(QColor(0,191,255)));

   painter.drawText(jj,Qt::AlignCenter,"请您可以这样问我？");

   QFont n("Arial",20,QFont::Bold,false);//设置字体的类型，大小，加粗，斜体

   painter.setFont(n);//添加字体

   QRectF kk(590,190,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(kk,Qt::AlignCenter,"今天上海的天气怎么样？");

   QRectF aa(600,240,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(aa,Qt::AlignCenter,"今天沪指多少点？");

   QRectF cc(590,290,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(cc,Qt::AlignCenter,"今天有什么推荐的理财产品？");

   QRectF bb(590,340,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(bb,Qt::AlignCenter,"今天上海的天气怎么样？");

   QRectF ee(600,390,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(ee,Qt::AlignCenter,"今天沪指多少点？");

   QRectF dd(590,440,450,200);

   painter.setPen(QColor(Qt::black));

   painter.drawText(dd,Qt::AlignCenter,"今天有什么推荐的理财产品？");

   QFont t("Arial",15,QFont::Bold,false);//设置字体的类型，大小，加粗，斜体

   painter.setFont(t);//添加字体

   QRectF tt(5,550,450,200);

   painter.setPen(QColor(Qt::yellow));

   painter.drawText(tt,Qt::AlignCenter,"00:00:30\n倾听中...");

   painter.end();

}

                 

这个是设置文本，和字体的QFont 这个类能设置字体的类型，大小，加粗，斜体（bool类型），然后用painter.setFont把刚才设置的文本字体添加进去，QRect产生一个对象设置文本的位置和大小，painter.setPen设置画笔的颜色，然后调用painter.drawText设置文本内容，参数分别是对象，Qt::AlignCenter表示右对齐居中显示，后面就是你要输入的内容了；

void MainWindow::mousePressEvent(QMouseEvent *event)//鼠标按下事件

{

  //  QPixmap button = QPixmap(":/C:/Users/Administrator/Desktop/练习图片/finish_button.png");

    QRect button_btn = QRect(rect().width()/5,rect().height()/2.5,100,100);

    if(button_btn.contains(event->pos()))

    {

        d.show();

    }

}

最后是一个鼠标点击事件的重写，QRect产生一个对象获得你所要点击图片的大小，然后判断如果点击，显示下一个界面