Qt 实现抽屉效果实例

        要在 Qt 中实现抽屉效果（类似于侧边栏滑出），可以使用 QWidget 和 QPropertyAnimation 来创建滑动动画效果。以下是实现步骤：

1. 创建抽屉类

创建一个自定义的抽屉类，继承自 QWidget，并在其中实现滑动动画。

#include <QtWidgets/QWidget>
#include <QtWidgets/QPushButton>
#include <QtCore/QPropertyAnimation>
#include <QtCore/QString>

class Drawer : public QWidget {
public:
    Drawer(QWidget *parent = nullptr)
        : QWidget(parent) {
        // 初始化抽屉状态
        isExpanded = false;
        // 设置抽屉的大小
        setFixedWidth(250); // 抽屉宽度
        setMinimumHeight(parent->height()); // 高度与父窗口一致
        // 设置抽屉的初始位置（隐藏在屏幕左侧）
        move(-width(), 0);
    }

    void toggle() {
        if (isExpanded) {
            // 收回抽屉
            QPropertyAnimation *animation = new QPropertyAnimation(this, "pos");
            animation->setDuration(300);
            animation->setStartValue(QPoint(0, 0));
            animation->setEndValue(QPoint(-width(), 0));
            animation->setEasingCurve(QEasingCurve::OutQuad);
            animation->start();
            isExpanded = false;
        } else {
            // 展开抽屉
            QPropertyAnimation *animation = new QPropertyAnimation(this, "pos");
            animation->setDuration(300);
            animation->setStartValue(QPoint(-width(), 0));
            animation->setEndValue(QPoint(0, 0));
            animation->setEasingCurve(QEasingCurve::OutQuad);
            animation->start();
            isExpanded = true;
        }
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        // 自定义抽屉的样式
        QPainter painter(this);
        painter.fillRect(rect(), QColor("#333")); // 设置背景颜色
        painter.setPen(Qt::white);
        painter.drawText(rect(), Qt::AlignCenter, "抽屉内容");
    }

private:
    bool isExpanded;
};

2. 创建主窗口并添加抽屉

在主窗口中创建抽屉和一个按钮，用于触发抽屉的展开和收回。

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QMainWindow window;
    window.setWindowTitle("抽屉效果示例");
    window.resize(800, 600);

    // 创建抽屉
    Drawer *drawer = new Drawer(&window);
    drawer->show();

    // 创建一个按钮，用于触发抽屉的展开和收回
    QPushButton *button = new QPushButton("打开抽屉", &window);
    button->setGeometry(20, 20, 100, 30);
    button->setStyleSheet("background-color: #4CAF50; color: white;");

    // 连接按钮点击事件到抽屉的 toggle 方法
    QObject::connect(button, &QPushButton::clicked, drawer, &Drawer::toggle);

    window.show();
    return app.exec();
}

4 效果如下：

5. 功能说明

• 抽屉类 (Drawer)：

  • 初始化时，抽屉位于屏幕左侧（隐藏状态）。
  • toggle 方法用于展开或收回抽屉，使用 QPropertyAnimation 实现平滑的滑动效果。
  • paintEvent 方法用于自定义抽屉的样式。

• 主窗口：

  • 创建一个按钮，点击后调用抽屉的 toggle 方法。
  • 按钮的样式可以通过 setStyleSheet 自定义。

6. 自定义样式和动画

你可以根据需要调整以下参数：

• 抽屉样式：

  • 修改 Drawer::paintEvent 中的样式，例如背景颜色、文字内容等。
  • 在 Drawer 构造函数中添加更多的 UI 组件，例如按钮、标签等。

• 动画效果：

  • 修改 QPropertyAnimation 的 duration 属性调整动画速度。
  • 修改 setEasingCurve 的参数调整动画的缓动效果（例如 QEasingCurve::OutCubic 或 QEasingCurve::InOutQuart）。