Qt实现抽屉效果

迷迭sama

于 2024-07-28 23:50:12 发布

阅读量416

点赞数 2

分类专栏： Qt 文章标签： qt 开发语言 c++

本文链接：https://blog.csdn.net/weixin_68007995/article/details/140758687

版权

Qt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在Qt自带的控件Tool Box中已经实现了类似的效果，但是只支持展开一个菜单页，那么我们来实现一下Tool Box的升级版（参考自"大轮明王讲QT"）

运行效果：

UI布局如下：

可以看到，要想实现抽屉效果，我们内部将分为两个核心部分，Header和Body，实现思路就是在点击展开/收缩按钮时让Body->setVisable()取反。

下面放出实现代码：

    // 初始化容器数组
    toolButtons[0] = ui->toolBtn_function;
    toolButtons[1] = ui->toolBtn_control;
    toolButtons[2] = ui->toolBtn_zoom;
    toolButtons[3] = ui->toolBtn_location;
    
    pushButtons[0] = ui->btn_function;
    pushButtons[1] = ui->btn_control;
    pushButtons[2] = ui->btn_zoom;
    pushButtons[3] = ui->btn_location;
    
    widgets[0] = ui->widget_functionBody;
    widgets[1] = ui->widget_controlBody;
    widgets[2] = ui->widget_zoomBody;
    widgets[3] = ui->widget_locationBody;
    
    btnStyleClosed = R"(
             QPushButton {
                 border: none;
                 border-image:url(:/res/show.png);
                 background-color:transparent;
             }
    )";
    
    btnStyleOpened = R"(
             QPushButton {
                 border: none;
                 border-image:url(:/res/hide.png);
                 background-color:transparent;
             }
    )";
    
    const QString toolButtonTexts[4] = {"常用功能","常用控件","地图缩放","定位"};
    
    const QString toolButtonIcons[4] = {":/res/function.png",":/res/control.png",":/res/zoom.png",":/res/location.png"};
    
    for (int i = 0;i < 4;++i) {
        // 设置按钮样式
        toolButtons[i]->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
        
        // 设置按钮文字、图表
        toolButtons[i]->setText(toolButtonTexts[i]);
        toolButtons[i]->setIcon(QIcon(QPixmap(toolButtonIcons[i])));
        toolButtons[i]->setIconSize(QSize(32,32));
        toolButtons[i]->setStyleSheet(R"(
                                      QToolButton {
                                      border: 0px solid #C0DCF2;
                                      color:#000000;
                                      padding:5px;
                                      }
                                      )");
        
        // 抽屉默认折叠
        widgets[i]->setVisible(false);
        pushButtons[i]->setStyleSheet(btnStyleClosed);
        pushButtons[i]->setProperty("index",i);
        
        connect(pushButtons[i],&QPushButton::clicked,this,[=](){
            QPushButton *btn = qobject_cast<QPushButton*>(sender());
            if(btn) {
                int index = btn->property("index").toInt();
                widgets[index]->setVisible(!widgets[index]->isVisible());
                pushButtons[index]->setStyleSheet(
                            widgets[index]->isVisible() ? btnStyleOpened : btnStyleClosed);
            }
        });
    }

代码逻辑非常简单，大家自行理解记忆，希望能帮助到大家~