QT实现滑动页面组件，多页面动态切换

        这篇文章主要介绍了Qt实现界面滑动切换效果，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。

一、简述

          一个基于Qt的动态滑动页面组件。 

二、 设计思路

1、自定义StackWidget类，继承自QWidget，实现一个堆叠的窗口组件，可以在其中放置多个子窗口，只显示当前活动窗口。

2、使用QPropertyAnimation来设置界面切换动画。

三、效果 

四、核心代码  

1、头文件astackwidget.h

#include <QWidget>

class QPropertyAnimation;
class AStackWidget : public QWidget
{
	Q_OBJECT
public:
	AStackWidget(QWidget *parent);
	~AStackWidget();

public:
    int count() const;
    int currentIndex() const;
    int addWidget(QWidget *widget);
    int indexOf(QWidget *widget) const;
    int insertWidget(int index, QWidget *widget);

    QWidget *currentWidget() const;
    QWidget *widget(int index) const;

    void removeWidget(QWidget *widget);
    void setDuration(int duration);

signals:
	void currentChanged(int index);
	void widgetRemoved(int index);

public slots:
	void setCurrentIndex(int index);
	void setCurrentWidget(QWidget *widget);

private slots:
	void onValueChanged(const QVariant &);
    void onMoveFinished();

private:
	void moveAnimationStart();
	void setWidgetsVisible();

protected:
	void resizeEvent(QResizeEvent *event);

private:
	int m_offset;
	int m_curIndex;
	int m_lastIndex;

	int m_duration;
	QPropertyAnimation *m_moveAnimation;
	QList<QWidget *> m_widgetLst;
};

2、实现代码astackwidget.cpp

#include "astackwidget.h"
#include <QPropertyAnimation>

AStackWidget::AStackWidget(QWidget *parent)
	: QWidget(parent)
{
	m_offset = 0;
	m_curIndex = 0;
    m_lastIndex = 0;
	m_duration = 500;
	m_moveAnimation = new QPropertyAnimation(this, "");
	m_moveAnimation->setDuration(m_duration);
	connect(m_moveAnimation, &QPropertyAnimation::valueChanged, this, &AStackWidget::onValueChanged);
    connect(m_moveAnimation, &QPropertyAnimation::finished, this, &AStackWidget::onMoveFinished);
}

AStackWidget::~AStackWidget()
{

}

int AStackWidget::count() const
{
	return m_widgetLst.size();
}

int AStackWidget::currentIndex() const
{
	return m_curIndex;
}

void AStackWidget::setDuration(int duration)
{
	m_duration = duration;
}

int AStackWidget::addWidget(QWidget * widget)
{
	int index = indexOf(widget);
	if (index >= 0){
		return index;
	}
	widget->setParent(this);
	m_widgetLst.append(widget);
	return count() - 1;
}

int AStackWidget::indexOf(QWidget * widget) const
{
	return m_widgetLst.indexOf(widget);
}

int AStackWidget::insertWidget(int index, QWidget * widget)
{
	int curindex = indexOf(widget);
	if (curindex >= 0) {
		return curindex;
	}
	widget->setParent(this);
	m_widgetLst.insert(index, widget);
	return index;
}

QWidget * AStackWidget::currentWidget() const
{
	if (m_curIndex >= 0 && m_curIndex < count()){
		return m_widgetLst.at(m_curIndex);
	}
    return 0;
}

QWidget * AStackWidget::widget(int index) const
{
	if (index >= 0 && index < count()) {
		return m_widgetLst.at(index);
	}
    return 0;
}

void AStackWidget::removeWidget(QWidget * widget)
{
	int index = indexOf(widget);
	if (index >= 0) {
		m_widgetLst.removeAll(widget);
		emit widgetRemoved(index);
	}
}

void AStackWidget::setCurrentWidget(QWidget * widget)
{
	int index = indexOf(widget);
	if (index >= 0 && m_curIndex != index) {
		setCurrentIndex(index);
	}
}

void AStackWidget::setCurrentIndex(int index)
{
	if (index >= 0 && m_curIndex != index) {
		m_lastIndex = m_curIndex;
		m_curIndex = index;	
		moveAnimationStart();
		emit currentChanged(index);
	}
}

void AStackWidget::resizeEvent(QResizeEvent *event)
{
	QWidget::resizeEvent(event);

	int size = count();
	for (int i = 0; i < size; i++) {
		m_widgetLst.at(i)->resize(this->width(), this->height());
	}

	if (m_moveAnimation->state() == QAbstractAnimation::Running) {
		moveAnimationStart();
	}
	else {
		setWidgetsVisible();
        onValueChanged(0);
	}
}

void AStackWidget::onValueChanged(const QVariant &value)
{
	m_offset = value.toInt();
	m_widgetLst.at(m_curIndex)->move(m_offset, 0);
	if (m_curIndex > m_lastIndex) {
		m_widgetLst.at(m_lastIndex)->move(m_offset - this->width(), 0);
    } else if (m_curIndex < m_lastIndex){
		m_widgetLst.at(m_lastIndex)->move(this->width() + m_offset, 0);
	}
}

void AStackWidget::moveAnimationStart()
{
	m_moveAnimation->stop();
	setWidgetsVisible();
	int startOffset = m_offset;
	if (m_curIndex > m_lastIndex) {
		if (startOffset == 0) startOffset = this->width();
		else startOffset = this->width() - qAbs(startOffset);
	}
	else {
		if (startOffset == 0) startOffset = -this->width();
		else startOffset = qAbs(startOffset) - this->width();
	}
	m_moveAnimation->setDuration(qAbs(startOffset) * m_duration / this->width());
	m_moveAnimation->setStartValue(startOffset);
	m_moveAnimation->setEndValue(0);
	m_moveAnimation->start();
}

void AStackWidget::setWidgetsVisible()
{
	int size = count();
	for (int i = 0; i < size; i++) {
		if (m_lastIndex == i || m_curIndex == i)
			m_widgetLst.at(i)->setVisible(true);
		else {
			m_widgetLst.at(i)->setVisible(false);
		}
	}
}

void AStackWidget::onMoveFinished()
{
    //可在此添加动画结束后处理代码
}

QPropertyAnimation：动画类，如果仅控制一个界面的动画可以直接设置动画效果后，start函数启动动画效果。

StackedWidget：用于存储多个界面，当界面需要展示的时候可以通过setCurrentIndex展示当前页面。

五、使用示例

以下是一个简单的示例代码，演示了如何在Qt中实现滑动页面组件和多页面动态切换：

 1、实现步骤

1. 在应用程序中创建 StackedWidget的对象
2. 将多个子组件在容器对象中布局
3. 将容器对象加入StackedWidget中生成新的页面
4. 通过StackedWidget的setCurrentIndex切换页面。

 2、ui设计 frmastackwidget.ui

3、使用代码

#include "FrmAStackWidget.h"
#include <QButtonGroup>
#include <QLabel>

FrmAStackWidget::FrmAStackWidget(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    QList<QString> colorlst;
    colorlst << "#1abc9c";
    colorlst << "#2ecc71";
    colorlst << "#3498db";
    colorlst << "#9b59b6";
    colorlst << "#e74c3c";

    QList<QPushButton *> btnlst;
    btnlst << ui.pushButton_1;
    btnlst << ui.pushButton_2;
    btnlst << ui.pushButton_3;
    btnlst << ui.pushButton_4;
    btnlst << ui.pushButton_5;

    QButtonGroup *btnGroup = new QButtonGroup(this);
    connect(btnGroup, SIGNAL(buttonClicked(int)), ui.aStackwidget, SLOT(setCurrentIndex(int)));

    for (int i = 0; i < 5; i++) {
        QLabel *label = new QLabel(ui.aStackwidget);
        label->setStyleSheet(QString("background-color:%1;color:#ffffff;").arg(colorlst.at(i)));
        label->setText(QString::number(i + 1));
        label->setAlignment(Qt::AlignCenter);
        int index = ui.aStackwidget->addWidget(label);
        btnGroup->addButton(btnlst.at(i), index);
    }
}

        这个示例只是一个基本的实现，实际应用中可能需要更复杂的逻辑来处理动画效果。 望大家看完这篇文章后可以实现自己的翻页动画效果。

六、源代码下载