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