Qt实现跟随侧边栏的按钮控制侧边栏的展开与折叠

效果展示：右侧工具栏宽度是固定的

方式概述：

一、界面布局方式如图所示：SideToolWidget主体采用水平布局，包含两个QWidget，左侧为用于信息显示的leftWidget,右侧为容纳展开折叠按钮窗口btnWidget与云台工具显示窗口ptzWidget的containerWidget,内部窗体的具体布局如图所示；

二、实现方式描述，按钮窗口btnWidget与云台工具显示窗口ptzWidget均采用宽度固定，高度自由的布局策略，容器窗口可采取宽度固定或不固定，高度自由，宽度若固定，应为按钮窗口btnWidget与云台工具显示窗口ptzWidget的宽度之和；若宽度不固定，应在布局的左侧放置一个水平弹簧用于将按钮窗口在pztWidget隐藏时挤压至最右侧；记录ptzWidget的宽度，展开折叠按钮showOrHideBtn槽函数中判断用户点击的状态，若隐藏，则containerWidget总宽度与btnWidget相同，若显示，则containerWidget宽度为btnWidget与pztWidget之和；

完整代码：其中资源图片也可自己贴图替换

头文件

#ifndef SIDETOOLWIDGET_H
#define SIDETOOLWIDGET_H

#include <QWidget>
#include <QList>QT_BEGIN_NAMESPACE
namespace Ui {classSideToolWidget;}QT_END_NAMESPACEclassSideToolWidget:public QWidget
{Q_OBJECTpublic:SideToolWidget(QWidget *parent = nullptr);~SideToolWidget();voidinitPtzStyle();privateslots:voidon_showOrHideBtn_clicked();private:Ui::SideToolWidget *ui;
    bool unfold;
    int changeWidth;};
#endif // SIDETOOLWIDGET_H

源文件

#include "sidetoolwidget.h"
#include "ui_sidetoolwidget.h"
#include <QIcon>const QString btnStyle ="QPushButton{border-radius:18px; background-position:center; background-color:rgba(245,245,245,250)}"\
                         "QPushButton:pressed{background-color:rgba(255,255,255,255);border-style:inset;}";SideToolWidget::SideToolWidget(QWidget *parent):QWidget(parent),ui(newUi::SideToolWidget),unfold(true){
    ui->setupUi(this);
    changeWidth = ui->ptzWidget->width();this->setWindowTitle("折叠窗口");initPtzStyle();}SideToolWidget::~SideToolWidget(){delete ui;}voidSideToolWidget::initPtzStyle(){// ptzWidget中所有按钮设置统一风格
    QList<QPushButton*> btnList = ui->ptzWidget->findChildren<QPushButton *>();for(int i =0; i < btnList.count(); i++){
        btnList.at(i)->setStyleSheet(btnStyle);
        btnList.at(i)->setIconSize(QSize(20,20));}

    ui->topButton->setIcon(QIcon(":/prefix/image/PTZ_Top.ico"));
    ui->rightTopButton->setIcon(QIcon(":/prefix/image/PTZ_TopRight.ico"));
    ui->rightButton->setIcon(QIcon(":/prefix/image/PTZ_Right.ico"));
    ui->rightBottomButton->setIcon(QIcon(":/prefix/image/PTZ_BottomRight.ico"));
    ui->bottomButton->setIcon(QIcon(":/prefix/image/PTZ_Bottom.ico"));
    ui->bottomLeftButton->setIcon(QIcon(":/prefix/image/PTZ_BottomLeft.ico"));
    ui->leftButton->setIcon(QIcon(":/prefix/image/PTZ_Left.ico"));
    ui->topLeftButton->setIcon(QIcon(":/prefix/image/PTZ_TopLeft.ico"));
    ui->resetButton->setIcon(QIcon(":/prefix/image/PTZ_Recover.ico"));

    ui->zoomInButton->setStyleSheet(btnStyle);
    ui->zoomOutButton->setStyleSheet(btnStyle);
    ui->focusMinButton->setStyleSheet(btnStyle);
    ui->focusMaxButton->setStyleSheet(btnStyle);
    ui->flightOutButton->setStyleSheet(btnStyle);
    ui->flightInButton->setStyleSheet(btnStyle);

    ui->singleCallBtn_1->setIcon(QIcon(":/prefix/image/SingleCall.ico"));
    ui->singleDeleteBtn_1->setIcon(QIcon(":/prefix/image/SingleDelete.ico"));
    ui->singleCallBtn_2->setIcon(QIcon(":/prefix/image/SingleCall.ico"));
    ui->singleDeleteBtn_2->setIcon(QIcon(":/prefix/image/SingleDelete.ico"));
    ui->singleCallBtn_3->setIcon(QIcon(":/prefix/image/SingleCall.ico"));
    ui->singleDeleteBtn_3->setIcon(QIcon(":/prefix/image/SingleDelete.ico"));
    ui->singleCallBtn_4->setIcon(QIcon(":/prefix/image/SingleCall.ico"));
    ui->singleDeleteBtn_4->setIcon(QIcon(":/prefix/image/SingleDelete.ico"));
    ui->singleCallBtn_5->setIcon(QIcon(":/prefix/image/SingleCall.ico"));
    ui->singleDeleteBtn_5->setIcon(QIcon(":/prefix/image/SingleDelete.ico"));}voidSideToolWidget::on_showOrHideBtn_clicked(){if(unfold){
        ui->ptzWidget->hide();
        ui->showOrHideBtn->setText("<<");
        ui->containerWdget->setFixedWidth(ui->btnWidget->width()); 
        unfold =false;}else{
        ui->ptzWidget->show();
        ui->showOrHideBtn->setText(">>");
        ui->containerWdget->setFixedWidth(ui->btnWidget->width()+ changeWidth);
        unfold =true;}}

完整代码及资源文件下载链接

https://download.csdn.net/download/qq_44896246/87212584?spm=1001.2014.3001.5503