Qt学习（一）ui界面的设计

这几天初步接触了Qt，首先在学习Qt的UI界面的设计，发现Qt里面自带的那些控件与窗体显示效果都不太好，于是上网看了一些教程，也参考了一个demo界面，然后初步设计了一个ui界面。

大概的设计思路是先去掉MainWindow里的边框、菜单栏以及标题栏，自己制作需要的菜单栏以及标题栏。

（重载其中的窗体绘制事件paintEvent、鼠标移动事件mouseMoveEvent、鼠标按下事件mousePressEvent）

以下为代码

---

//mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

//Qt常用类
#include <QtCore>
#include <QtGui>

#include <QMainWindow>
#include <QMenu>
#include <QPushButton>
#include <animationbutton.h>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

protected:
    //重载窗体绘制函数
    void paintEvent(QPaintEvent *);
    //移动窗体鼠标距离
    void mouseMoveEvent(QMouseEvent *);
    //获得鼠标拖动窗体移动距离
    void mousePressEvent(QMouseEvent *);

private slots:
    void on_menu_btn_clicked();

private:
    Ui::MainWindow *ui;

    QPixmap m_pixmapBg;
    QAction *m_ActionAboutQt;
    QMenu *m_menu;

    QPoint m_pointStart;
    QPoint m_pointPress;


    //初始化界面
    void initStyle();

    //设置初始界面
    void setNormalStyle();

    //设置按钮对应界面
    void setCurrentWidget();

    //设置菜单
    void setMenu();

    //设置按钮
    void setButton();
};

#endif // MAINWINDOW_H

其中动画按钮类animationbutton为自定义的一个继承自QWidget类的派生类，在下一篇文章。

//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    initStyle();
}

MainWindow::~MainWindow()
{
    delete ui;
}

/*
 * writer:sym
 * date:2019-8-17
 * */
void MainWindow::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //.rect()获取图片参数（长宽）
    painter.drawPixmap(m_pixmapBg.rect(),m_pixmapBg);
}

void MainWindow::mouseMoveEvent(QMouseEvent *e)
{
    this->move(e->globalPos()-m_pointStart);
}

void MainWindow::mousePressEvent(QMouseEvent *e)
{
    //获取鼠标事件相对桌面位置
    m_pointPress=e->globalPos();
    m_pointStart=m_pointPress-this->pos();
}

/*
 * writer:sym
 * date:2019-8-17
 * */
void MainWindow::setNormalStyle()
{
    QFile styleSheet(":/qss/sty_demo.qss");
    if (!styleSheet.open(QIODevice::ReadOnly))
    {
        qWarning("Can't open the style sheet file!");
        return;
    }
    qApp->setStyleSheet(styleSheet.readAll());
}

/*
 * writer:sym
 * date:2019-8-17
 * */
void MainWindow::setMenu()
{
    m_menu=new QMenu();
    m_menu->addAction(tr("使用说明"));
    m_menu->addAction(tr("关于"));
    m_menu->addSeparator();
    m_menu->addAction(tr("About CSU"));
    m_ActionAboutQt=new QAction(tr("&About Qt"),this);
    connect(m_ActionAboutQt,SIGNAL(triggered()),qApp,SLOT(aboutQt()));
    m_menu->addAction(m_ActionAboutQt);
}

/*
 * writer:sym
 * date:2019-8-19
 * */
void MainWindow::setButton()
{
    ui->autotest_btn->setText(tr("在线检测"));
    ui->autotest_btn->setImage(":/image/v-home-ico-home.png");

    ui->mantest_btn->setText(tr("手动检测"));
    ui->mantest_btn->setImage(":/image/v-home-ico-contact.png");

    ui->parset_btn->setText(tr("参数设置"));
    ui->parset_btn->setImage(":/image/v-home-ico-record.png");

    ui->resultshow_btn->setText(tr("查看结果"));
    ui->resultshow_btn->setImage(":/image/v-home-ico-img.png");

    ui->autotest_btn->setStackedWidgets(ui->stackedWidget,0);
    ui->mantest_btn->setStackedWidgets(ui->stackedWidget,1);
    ui->parset_btn->setStackedWidgets(ui->stackedWidget,2);
    ui->resultshow_btn->setStackedWidgets(ui->stackedWidget,3);
}

void MainWindow::initStyle()
{
    //去掉标题栏
    setWindowFlag(Qt::FramelessWindowHint);
    //设置背景为透明模式
    setAttribute(Qt::WA_TranslucentBackground);

    m_pixmapBg.load(":/image/frame.png");

    ui->label_checkUpdate->setText(tr("<a href=http://soa.csu.edu.cn>"
                                      "<font color=white>中南大学自动化学院</font></a>"));
    ui->label_checkUpdate->setOpenExternalLinks(true);

    setMenu();
    setNormalStyle();
    setButton();
}

void MainWindow::on_menu_btn_clicked()
{
    //设置菜单栏出现位置
    m_menu->exec(this->mapToGlobal(QPoint(700, 20)));
}

值得注意的是Qt也有他自己的css，即qss。所谓qss，即Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)， 通过调用QWidget::setStyleSheet()或QApplication::setStyleSheet()， 你可以为一个独立的子部件、整个窗口，甚至是整个个应用程序指定一个样式表。

/*
Writer:sym
FileName:sty_demo.qss
Date:2019-8-17
*/

/*menu_btn*/
QPushButton#menu_btn
{
    background-image:url(:/image/cai.png);
    border:0px;
}
QPushButton#menu_btn:hover
{
    background-image:url(:/image/cai2.png);
    border:0px;
}
QPushButton#menu_btn:checked
{
    background-image:url(:/image/cai2.png);
    border:0px;
}

/*min_btn*/
QPushButton#min_btn
{
    background-image:url(:/image/min.png);
    border:0px;
}
QPushButton#min_btn:hover
{
    background-image:url(:/image/min2.png);
    border:0px;
}
QPushButton#min_btn:checked
{
    background-image:url(:/image/min2.png);
    border:0px;
}

/*normal_btn*/
QPushButton#normal_btn
{
    background-image:url(:/image/max.png);
    border:0px;
}
QPushButton#normal_btn:hover
{
    background-image:url(:/image/max2.png);
    border:0px;
}
QPushButton#normal_btn:checked
{
    background-image:url(:/image/max2.png);
    border:0px;
}

/*close_btn*/
QPushButton#close_btn
{
    background-image:url(:/image/close.png);
    border:0px;
}
QPushButton#close_btn:hover
{
    background-image:url(:/image/close2.png);
    border:0px;
}
QPushButton#close_btn:checked
{
    background-image:url(:/image/close2.png);
    border:0px;
}

/*logo*/
QLabel#logo
{
    border-image:url(:/image/csu_logo.png);
    border:0px;
}