Qt自定義Dialog

預設對話框

Qt預設的對話框是系統自帶的樣式，不同版本的windows也有些許不同，如果希望風格統一的話，這時候就需要自定義一個屬于自己的對話框了

建立Qt設計師類

雖然是自定義界面，但是有一個.ui檔案放置按鈕還是要友善些，如果是直接建立一個C++類檔案就需要在代碼中添加相關的控件了

本文福利，莬費領取Qt開發學習資料包、技術視訊，内容包括（C++語言基礎，Qt程式設計入門，QT信号與槽機制，QT界面開發-圖像繪制，QT網絡，QT資料庫程式設計，QT項目實戰，QSS，OpenCV，Quick子產品，面試題等等）↓↓↓↓↓↓見下面↓↓文章底部點選莬費領取↓↓

去除預設的樣式

在構造函數中加上：

setAttribute(Qt::WA_TranslucentBackground, true);
        setWindowFlags(Qt::Window | Qt::FramelessWindowHint
                       | Qt::WindowSystemMenuHint | Qt::WindowMinimizeButtonHint
                       | Qt::WindowMaximizeButtonHint);
           

就把預設的标題欄、背景等給去掉了。現在運作的話背景是透明的，除了自己加的控件外，其他啥也沒有。

重寫paintEvent

自己對于Dialog的界面有什麼需求，可以在paintEvent函數中添加。例如，我想設定邊框為圓角，在文本輸入框上下各有一條分割線：

void LoginDialog::paintEvent(QPaintEvent *event)
{
    QPainterPath path;
    path.setFillRule(Qt::WindingFill);
    QRect rect = QRect(0, 0, this->width(), this->height());
    path.addRoundRect(rect,10,10);

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.fillPath(path, QBrush(Qt::white));
    painter.setPen(Qt::gray);
    painter.drawPath(path);

    painter.drawLine(rect.left()+40, 60, rect.right()-40, 60);
    painter.drawLine(rect.left()+40, rect.bottom()-70, rect.right()-40, rect.bottom()-70);
}
           

重寫滑鼠事件

由于預設的情況被我們去掉了，此時對話框是不能移動的，需要重寫滑鼠事件，函數聲明：

void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
void mouseMoveEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
           

具體實作：

void LoginDialog::paintEvent(QPaintEvent *event)
{
    QPainterPath path;
    path.setFillRule(Qt::WindingFill);
    QRect rect = QRect(0, 0, this->width(), this->height());
    path.addRoundRect(rect,10,10);

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.fillPath(path, QBrush(Qt::white));
    painter.setPen(Qt::gray);
    painter.drawPath(path);

    painter.drawLine(rect.left()+40, 60, rect.right()-40, 60);
    painter.drawLine(rect.left()+40, rect.bottom()-70, rect.right()-40, rect.bottom()-70);
}

void LoginDialog::mousePressEvent(QMouseEvent *event)
{

    if( event->button() == Qt::LeftButton){
        m_Press = event->globalPos();
        leftBtnClk = true;
    }
    event->ignore();//表示繼續向下傳遞事件，其他的控件還可以去擷取
}

void LoginDialog::mouseReleaseEvent(QMouseEvent *event)
{

    if( event->button() == Qt::LeftButton ){
        leftBtnClk = false;
    }
    event->ignore();
}

void LoginDialog::mouseMoveEvent(QMouseEvent *event)
{
    if( leftBtnClk ){
        m_Move = event->globalPos();
        this->move( this->pos() + m_Move - m_Press );
        m_Press = m_Move;
    }
    event->ignore();
}
           

添加自己的控件

之後就像是在用預設的Dialog一樣，在.ui中添加需要的控件，以及需要的信号/槽函數這些了。

除了重繪的背景之外，其他的控件都可以在ui檔案裡添加。

本文福利，莬費領取Qt開發學習資料包、技術視訊，内容包括（C++語言基礎，Qt程式設計入門，QT信号與槽機制，QT界面開發-圖像繪制，QT網絡，QT資料庫程式設計，QT項目實戰，QSS，OpenCV，Quick子產品，面試題等等）↓↓↓↓↓↓見下面↓↓文章底部點選莬費領取↓↓