實現(xiàn)Qwidget窗口填滿整個主窗口，并跟隨鼠標的拖動自動縮放

新建一個窗口，我想在這個窗口上放一個QWidget，并且這個QWidget能夠布滿整個窗口，還可以隨著隨鼠標的拖動自動縮放

1、首先給大家介紹一個好用的組件庫：qt-material-widgets

（1）開源地址（基于QWidgets）

https://github.com/laserpants/qt-material-widgets

基于Qt Quick(QML)可以參考以下開源項目：

https://github.com/uwerat/qskinny

（2）靜態(tài)庫文件準備

• 先把項目的源碼clone 下來，然后雙擊qt-material-widgets.pro 使用Qt creator打開
• 構(gòu)建Debug生成靜態(tài)庫文件 libcomponents.a 路徑（build-qt-material-widgets-Desktop_Qt_5_15_2_MinGW_64_bit-Debug\components\debug\libcomponents.a）
• 在你的項目里新建文件夾 sdk/material/staticLib
• 把libcomponents.a復(fù)制到 sdk/material/staticLib/libcomponents.a 下面；
• 把源碼的components文件夾整體復(fù)制到sdk/material下面；（注意：components文件夾是clone下來源碼的qt-material-widgets\components）

（3）在項目中引入庫

• qmake方式 .pro

  #MaterialSDK
  LIBS += $$PWD/sdk/material/staticLib/libcomponents.a
  INCLUDEPATH += $$PWD/sdk/material/components
  PRE_TARGETDEPS += $$PWD/sdk/material/staticLib/libcomponents.a
  

• CMake方式 CmakeLists.txt

  add_library(
      libcomponents 
      STATIC
      IMPORTED
  )
   set_target_properties(
      libcomponents
      PROPERTIES IMPORTED_LOCATION
      ${CMAKE_SOURCE_DIR}/src/SDK/Material/lib/libcomponents.a
  )
  
  target_link_libraries(${PROJECT_NAME} PRIVATE libcomponents)
  
  

2、在main.cpp中引入qss文件：

#include "material.h"

#include <QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    // 引入qss文件
    QFile file(":/style/style.qss");
    if ( file.exists() ) {
        // 以只讀的方式打開
        file.open(QFile::ReadOnly);
        // 以字符串的方式保存讀出的結(jié)果
        QString styleSheet = QLatin1String(file.readAll());
        // 設(shè)置全局樣式
        qApp->setStyleSheet(styleSheet);
        // 關(guān)閉文件
        file.close();
    }
    // 初始化一個material窗口
    Material material;
    // 顯示主窗口
    material.show();
    return app.exec();
}

style.qss文件內(nèi)容如下，給mainWidget加個背景色，便于觀察變化

#mainWidget {
  background-color: red;
}

3、新建 material.h文件，內(nèi)容如下：

#ifndef MATERIAL_H
#define MATERIAL_H

#include <QWidget>
#include <qtmaterialtoggle.h>

QT_BEGIN_NAMESPACE
namespace Ui { class Material; }
QT_END_NAMESPACE

class Material : public QWidget
{
    Q_OBJECT

public:
    Material(QWidget *parent = nullptr);
    ~Material();

private:
    Ui::Material *ui;

protected:
    /* 1、將函數(shù)聲明為virtual的作用是允許這兩個函數(shù)在派生類中被重寫(override)，
     * 因為resizeEvent()和moveEvent()是QWidget類中的虛函數(shù)，因此在派生類中也要將其聲明為virtual，
     * 這樣就可以在派生類中重新定義這兩個函數(shù)，以實現(xiàn)派生類中對窗口大小改變和窗口移動事件的處理 
     */
    virtual void resizeEvent(QResizeEvent *event);
    virtual void moveEvent(QMoveEvent *event);

private:
    QWidget *mainWidget; // 1、添加mainWidget成員變量


};
#endif // MATERIAL_H

4、新建 material.cpp文件，內(nèi)容如下：

#include "material.h"
#include "ui_material.h"

#include <QHBoxLayout>
#include <QLabel>
#include <QPushButton>

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

    // 使用Material-widgets
    QtMaterialToggle *switchToggle = new QtMaterialToggle();
    //switchToggle->setGeometry(50, 50, 164, 96);

    // 1、創(chuàng)建一個mainWidget容器，放到Material窗口上
    mainWidget = new QWidget(this);
    // 設(shè)置 objectName 屬性，QSS 文件中使用 #objectName 來定位到該控件
    mainWidget->setObjectName("mainWidget");
    // 設(shè)置mainWidget的大小策略，就是當窗口大小變化時，mainWidget怎么調(diào)整自己的大小，第一個參數(shù)是水平方向上的策略，第二個參數(shù)是垂直方向上的策略
    mainWidget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    // 設(shè)置mainWidget容器的大小和位置
    mainWidget->setGeometry(0, 0, width(), height());


    // Qt中設(shè)置窗體大小的方法
    // 設(shè)置它的最大窗口值和最小窗口值，并且使最大值和最小值相等，窗口的最大化按鈕將變得不可用
    // mainWidget->setMinimumSize(200, 200);
    // mainWidget->setMaximumSize(200, 200);
    // 后來發(fā)現(xiàn)還有一個方法就是 resize，在構(gòu)造函數(shù)中直接調(diào)用他設(shè)置大小就可以
    //mainWidget->resize( QSize( 1128, 761 ));
  
    // 在mainWidget上創(chuàng)建一個垂直布局，下面的2種方法都可以
    // mainWidget->setLayout(layout);
    QHBoxLayout *layout = new QHBoxLayout(mainWidget);
    QPushButton *button1 = new QPushButton("按鈕1");
    QPushButton *button2 = new QPushButton("按鈕2");

    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(switchToggle);

    layout->setSpacing(60);  // 設(shè)置部件間距為60像素
    // Qt::AlignLeft    水平方向靠左
    // Qt::AlignRight   水平方向靠右
    // Qt::AlignHCenter 水平方向居中
    // Qt::AlignTop     垂直方向靠上
    layout->setAlignment(Qt::AlignCenter);

    //有時候會想讓我們的程序窗體固定大小，而該大小是我們在編輯時的大小
    //int width = this->geometry().width();   // 找到該窗體的物理大小
    //int height = this->geometry().height();
    //this->setFixedSize(width,height);       //設(shè)置窗體固定大小

    // 設(shè)置窗口的大小，微信PC應(yīng)用是1138x761
    // 設(shè)置它的最大窗口值和最小窗口值，并且使最大值和最小值相等，窗口的最大化按鈕將變得不可用
    // this->setMinimumSize(1128, 761);
    // this->setMaximumSize(1128, 761);
    // 后來發(fā)現(xiàn)還有一個方法就是 resize。在構(gòu)造函數(shù)中直接調(diào)用他設(shè)置大小就可以
    //this->resize( QSize( 1128, 761 ));

    this->setWindowTitle("QWidget布局");
}

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

/* 2、如果要實現(xiàn)widget窗口跟隨鼠標拖動并自動跟隨窗口縮放，
 * 需要在QWidget類中重寫resizeEvent()函數(shù)和moveEvent()函數(shù)
 */
// 在resizeEvent()函數(shù)中，重新設(shè)置widget窗口的大小和位置
void Material::resizeEvent(QResizeEvent *event)
{
    QWidget::resizeEvent(event); // 調(diào)用父類的resizeEvent()函數(shù)
    if(this->mainWidget) // 判斷是否有widget被添加到Material窗口中
    {
        // 獲取Material窗口的大小
        int w = this->width();
        int h = this->height();
        // 設(shè)置widget的大小為Material窗口的大小
        this->mainWidget->setGeometry(0, 0, w, h);
    }
}

// 在moveEvent()函數(shù)中，重新設(shè)置widget窗口的位置
void Material::moveEvent(QMoveEvent *event)
{
    QWidget::moveEvent(event);
    if(this->mainWidget)
    {
        this->mainWidget->move(0, 0);
    }
}

5、效果展示

6、完成文章來源地址http://www.zghlxwxcb.cn/news/detail-497172.html

到了這里，關(guān)于實現(xiàn)Qwidget窗口填滿整個主窗口，并跟隨鼠標的拖動自動縮放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！