当前位置：首页 > news >正文

Qt界面布局利器：QStackedWidget详细用法解析

news 2025/10/10 10:10:31

概述

QStackedWidget是Qt中用于管理多个界面切换的重要组件，它提供了一个堆栈式的界面管理方式，每次只显示一个子部件，非常适合实现选项卡式界面、向导对话框等场景。

基本用法

创建和添加页面

// 创建QStackedWidget
QStackedWidget *stackedWidget = new QStackedWidget(this);

// 创建多个页面
QWidget *page1 = new QWidget();
QWidget *page2 = new QWidget();
QWidget *page3 = new QWidget();

// 添加页面到堆栈
stackedWidget->addWidget(page1);
stackedWidget->addWidget(page2);
stackedWidget->addWidget(page3);

页面切换的三种方式

1. 按索引切换

// 切换到第二个页面（索引从0开始）
stackedWidget->setCurrentIndex(1);

2. 按页面指针切换

// 直接切换到指定页面
stackedWidget->setCurrentWidget(page2);

3. 使用信号槽机制

// 连接按钮点击信号到页面切换
connect(button, &QPushButton::clicked, [=](){
stackedWidget->setCurrentIndex(2);
});

进阶用法

页面切换动画效果

// 使用QPropertyAnimation实现淡入淡出效果
QPropertyAnimation *animation = new QPropertyAnimation(stackedWidget, "currentIndex");
animation->setDuration(300);
animation->setStartValue(currentIndex);
animation->setEndValue(newIndex);
animation->setEasingCurve(QEasingCurve::InOutQuad);
animation->start();

懒加载页面

// 只在第一次显示时加载页面内容
void MainWindow::showPage(int index)
{
if (!pagesLoaded[index]) {
loadPageContent(index);
pagesLoaded[index] = true;
}
stackedWidget->setCurrentIndex(index);
}

与QTabWidget配合使用

// 使用QTabBar控制QStackedWidget
QTabBar *tabBar = new QTabBar(this);
QStackedWidget *stackedWidget = new QStackedWidget(this);

connect(tabBar, &QTabBar::currentChanged,
stackedWidget, &QStackedWidget::setCurrentIndex);

实际应用示例

实现设置对话框

class SettingsDialog : public QDialog
{
Q_OBJECT
public:
SettingsDialog(QWidget *parent = nullptr) : QDialog(parent)
{
// 创建侧边栏列表
listWidget = new QListWidget(this);
listWidget->addItems({"通用", "外观", "快捷键", "关于"});

// 创建堆栈窗口
stackedWidget = new QStackedWidget(this);
stackedWidget->addWidget(createGeneralPage());
stackedWidget->addWidget(createAppearancePage());
stackedWidget->addWidget(createShortcutsPage());
stackedWidget->addWidget(createAboutPage());

// 布局
QHBoxLayout *layout = new QHBoxLayout(this);
layout->addWidget(listWidget, 1);
layout->addWidget(stackedWidget, 3);

// 连接信号
connect(listWidget, &QListWidget::currentRowChanged,
stackedWidget, &QStackedWidget::setCurrentIndex);
}

private:
QListWidget *listWidget;
QStackedWidget *stackedWidget;
};

实现向导界面

class WizardDialog : public QDialog
{
Q_OBJECT
public:
WizardDialog(QWidget *parent = nullptr) : QDialog(parent)
{
stackedWidget = new QStackedWidget(this);
// 添加多个向导页面...

QPushButton *nextButton = new QPushButton("下一步", this);
QPushButton *prevButton = new QPushButton("上一步", this);

connect(nextButton, &QPushButton::clicked, this, &WizardDialog::nextPage);
connect(prevButton, &QPushButton::clicked, this, &WizardDialog::prevPage);
}

private slots:
void nextPage()
{
int nextIndex = stackedWidget->currentIndex() + 1;
if (nextIndex < stackedWidget->count()) {
stackedWidget->setCurrentIndex(nextIndex);
}
}

void prevPage()
{
int prevIndex = stackedWidget->currentIndex() - 1;
if (prevIndex >= 0) {
stackedWidget->setCurrentIndex(prevIndex);
}
}
};