Qt实现侧边栏功能

本文介绍Qt实现侧边栏功能。

采用Qt进行界面应用程序开发时，经常遇到侧边栏功能实现，采用侧边栏可以将一些暂时不用到的功能隐藏，使用的时候点击一下相应的按钮即可弹出（动画方式）功能菜单。减少主界面控件数量，也使界面排布更加美观，本文简要介绍如何使用Qt实现侧边栏功能，并给出一个简单示例。

1.基础知识

使用Qt实现侧边栏会使用到Qt的动画控件类：QPropertyAnimation，下面对其方法进行简单介绍。

1)构造函数

函数原型如下：

QPropertyAnimation(QObject *target, const QByteArray &propertyName, QObject *parent = nullptr)

其中，

a)target：若要使某个控件实现动画效果，需在构造QPropertyAnimation类时将控件指针传入“target”

b)propertyName：常见的属性有位置：“pos”，几何尺寸：“geometry”，2者区别为在设置位置时前者采用QPoint，后者采用QRect（需要提供“width”和“height”）

c)parent：父类指针

2)设置缓冲函数

函数原型如下：

void setEasingCurve(const QEasingCurve &easing)

此函数设置动画从起始位置到结束位置渐近变化的方式（速度曲线），常见的有“Linear”，“InOutCubic”，具体可查看帮助文档。

3)设置持续时间

函数原型如下：

void setDuration(int msecs)

设置从起始位置到结束位置持续时间，单位为：ms。

4)设置起始位置

函数原型如下：

void setStartValue(const QVariant &value)

设置起始位置，根据构造函数“propertyName”的不同，设置的值也不一样，具体参见1)构造函数内容。

5)设置结束位置

函数原型如下：

void setEndValue(const QVariant &value)

设置结束位置，根据构造函数“propertyName”的不同，设置的值也不一样，具体参见1)构造函数内容。

6)启动

函数原型如下：

void start(QAbstractAnimation::DeletionPolicy policy = KeepWhenStopped)

启动动画。

2.功能实现

1)界面设计

这里将侧边栏作为一个整体放置在一个"QWidget"对象（widget）里，内部又分为2个部分，弹出/隐藏按钮放置在一个"QWidget"对象（widget_2）里，功能集合放置在另外一个"QWidget"对象（widget_3）里。界面设计如下：

注意：功能集合的"QWidget"对象（widget_3）的宽度恰好为整个"QWidget"对象（widget）隐藏时向左移动的宽度。

2)代码

a)界面构造函数

参考代码如下：

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

    bDisplay = false;
    ui->pushButton->setText(">>");
    ui->widget->move(-ui->widget_3->width(), 0);
    propertyAnimation = new QPropertyAnimation(ui->widget, "pos", this);
    propertyAnimation->setEasingCurve(QEasingCurve::InOutCubic);
    propertyAnimation->setDuration(1000);
}

b)按钮功能实现

参考代码如下：

void MainWindow::on_pushButton_clicked()
{
    if (!bDisplay) {
        propertyAnimation->setStartValue(QPoint(-ui->widget_3->width(), 0));
        propertyAnimation->setEndValue(QPoint(0, 0));
        ui->pushButton->setText("<<");
        bDisplay = true;
    } else {
        propertyAnimation->setStartValue(QPoint(0, 0));
        propertyAnimation->setEndValue(QPoint(-ui->widget_3->width(), 0));
        ui->pushButton->setText(">>");
        bDisplay = false;
    }
    propertyAnimation->start();
}

3.运行结果

1)隐藏

点击“<<”按钮，隐藏效果如下：

2)弹出

点击“>>”按钮，弹出效果如下：

注意：

目前隐藏和弹出的动画效果是一样的，可以根据实际情况针对2种情况设置2个动画效果。

总结，本文介绍了Qt实现侧边栏功能。