QT小案例之360UI模仿

大家应该都360UI长什么样的，我们今天就开始学习360ui怎么用qt编写，暂时不写实现，只是简单UI编写，当作对QT知识的一种巩固，而且列出其中用的知识点进行学习。

那我们先来看看效果，如下图

当然这只是简单的UI编写，我列出了以下知识点：

1、paintEvent事件，mousePressEvent，mouseMoveEvent和mouseReleaseEvent

2、QPainter

3、设置界面无边框。

4、globalPos和pos的意思.

5、QStackedWidget

6、QPushButton的setAutoExclusive

下面我将基于以上6点知识进行讲解，相信学习这个小例子之后，你会对这6个知识点有一定的了解。

一、关于事件，比如上面的painEvent事件，鼠标按下事件，鼠标移动事件等都是事件。

事件是由系统或者Qt在不同时刻发出的。当用户按钮鼠标，键盘就会触发一个相应的事件。

QT需要在main()函数里面创建一个QApplication对象，然后会掉用它的exec()函数。这个时候就会开启qt的事件循环机制。

程序将进行事件监听，当事件发生的时候，会创建一个事件对象，当事件创建完毕后，QT将这个事件传递给Object的QEvent函数。event()函数并不直接处理事件，而是将事件按照类型分派给指定的事件处理函数进行处理，比如鼠标按下事件，移动事件等等。后期再专门针对事件做一次简单讲解，现在简单理解一下。

二、QPainter类

QPainter提供了大量API用于GUI的绘图工作。QPainter的使用是在widget当中的painter事件使用。记得在执行完之后要及时销毁QPainter的对象。

我们可以看到，这是帮助文档里面对QPainter基本的介绍和用法，声明字体，颜色，然后就可以进行绘制。当然还有很多其他的函数，具体用到可以查阅帮助文件。

3、设置界面无边框。

我们用到setWindowFlags(Qt::FrameLessWindowHint)；当然也可以设置其他属性在这个函数里面，比如窗体透明度。

4、globalPos和pos。

我们在计算控件的坐标时，往往会遇到这几个函数。

globalPos坐标：相对于桌面的，即以桌面为原点的，是个绝对坐标。

pos坐标：是相对于窗体的，是以窗体为原点，是个相对坐标。

5、QStackWidget堆栈窗口。

顾明思意：就是将Widget存放在栈中，每个widget都有索引，通过索引来寻找Widget。这个可以达成叠加窗体的效果，如效果图。

看帮助文档，一个只显示一个Widget，使用方式如图。

6、QPushButton的setAutoExclusive。

该属性是指是否设置排它，就是在同一窗口下的多个QPushButton只有一个被选中，其他都是未选中。

粗略的知道了该小例子中使用的知识点后，我们上代码。

主界面通过布局，上面是QPushButton, 中间大的是QStackWidget，通过点击Qpushbutton来切换QStackwidget的索引。如下图：

cpp文件

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFile>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setWindowFlags(Qt::FramelessWindowHint);
    m_bkPixMap.load(":/res/image/frame.png");

    m_vectPtn.push_back(ui->pushButton_1);
    m_vectPtn.push_back(ui->pushButton_2);
    m_vectPtn.push_back(ui->pushButton_3);
    m_vectPtn.push_back(ui->pushButton_4);
    m_vectPtn.push_back(ui->pushButton_5);

    m_vectPtn.push_back(ui->pushButton_8);
    m_vectPtn.push_back(ui->pushButton_9);
    m_vectPtn.push_back(ui->pushButton_6);
    m_vectPtn.push_back(ui->pushButton_7);

    for(int i=0;i<m_vectPtn.size();i++)
    {
       m_vectPtn[i]->setCheckable(true);
       m_vectPtn[i]->setAutoExclusive(true);
    }
    setNormalStyle();
}
#include <QIODevice>
bool MainWindow::setNormalStyle()
{
   QFile file(":/res/style.qss");
   if(!file.open(QIODevice::ReadOnly))
   {
       qDebug()<<"11";
       return false;
   }
   qDebug()<<"121";
   qApp->setStyleSheet(file.readAll());
   return true;
}
MainWindow::~MainWindow()
{
    delete ui;
}
/*
知识点：
1、paintEvent事件，mousePressEvent，mouseMoveEvent和mouseReleaseEvent
2、QPainter
3、设置界面无边框。
4、globalPos和pos的意思.
5、QStackedWidget
6、QPushButton的setAutoExclusive
*/

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
   this->move(event->globalPos() - m_pointStart);
}
void MainWindow::mousePressEvent(QMouseEvent *event)
{
    m_pointPress=event->globalPos();
    m_pointStart=m_pointPress-this->pos();
}
void MainWindow::mouseReleaseEvent(QMouseEvent *event)
{

}
void MainWindow::paintEvent(QPaintEvent *event)
{
   QPainter painter(this);
   painter.drawPixmap(m_bkPixMap.rect(),m_bkPixMap);
}

void MainWindow::on_pushButton_1_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_2_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_3_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_4_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_5_clicked()
{
   setCurrentPage();
}

void MainWindow::on_pushButton_8_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_9_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_6_clicked()
{
    setCurrentPage();
}

void MainWindow::on_pushButton_7_clicked()
{
   setCurrentPage();
}
void MainWindow::setCurrentPage()
{
    for(int i=0;i<m_vectPtn.size();i++)
    {
         if(m_vectPtn[i]->isChecked())
         {
             ui->stackedWidget->setCurrentIndex(i);
         }
    }
}

void MainWindow::on_m_btnMin_clicked()
{
    this->showMinimized();
}

void MainWindow::on_m_btnClose_clicked()
{
   this->close();
}

然后再来看看qss文件里面的。

hover：指鼠标放到按钮上的背景图片。

checked：被选中的图片。

QT小案例之360UI模仿

猜你喜欢