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

笨小孩寻聪

已于 2022-11-29 21:46:12 修改

阅读量4.8k

点赞数 4

分类专栏： QT学习文章标签： qt 开发语言 ui c++

于 2022-11-29 21:35:00 首次发布

本文链接：https://blog.csdn.net/qq_44896246/article/details/128105046

版权

QT学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

在这里插入图片描述

方式概述：

一、界面布局方式如图所示：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 { class SideToolWidget; }
QT_END_NAMESPACE

class SideToolWidget : public QWidget
{
    Q_OBJECT

public:
    SideToolWidget(QWidget *parent = nullptr);
    ~SideToolWidget();
    void initPtzStyle();
private slots:
    void on_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(new Ui::SideToolWidget)
    , unfold(true)
{
    ui->setupUi(this);
    changeWidth = ui->ptzWidget->width();
    this->setWindowTitle("折叠窗口");
    initPtzStyle();
}

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

void SideToolWidget::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"));
}

void SideToolWidget::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;
    }
}