Qt QListwidget与QStackedWidget或QTabWidget实现多界面切换的效果

效果图

使用QStackedWidget实现

• QStackedWidget提供了一种堆栈式的界面布局方式。
• 功能：QStackedWidget允许开发者在一个固定区域内显示多个子窗口或页面，但同时只显示其中一个子窗口，其他子窗口则被隐藏。这种特性使QStackedWidget非常适合用于创建多页的界面，如向导、选项卡或其他多视图应用程序。

1. 页面管理：你可以通过addWidget()方法向QStackedWidget添加新的页面，通过insertWidget()插入到特定的位置，或者通过removeWidget()移除页面。
2. 当前页面：使用setCurrentIndex()方法可以根据页面的索引来切换当前显示的页面。也可以使用setCurrentWidget()通过页面控件本身来切换。
3. 页面切换信号：当当前页面发生变化时，QStackedWidget会发出currentChanged信号，你可以连接到这个信号来执行一些自定义操作，比如更新界面或者保存数据。
4. 布局：每个页面可以有自己的布局和控件，你可以像管理普通的QWidget一样管理每个页面。

• 这里提供一个简单的demo

class MyWidget : public QWidget
{
    Q_OBJECT
public:
    MyWidget(QWidget *parent = nullptr) : QWidget(parent)
    {
        // 水平布局
        QHBoxLayout *layout = new QHBoxLayout(this);

        // 列表部件
        QListWidget *listWidget = new QListWidget(this);

        // 堆叠部件
        QStackedWidget *stackedWidget = new QStackedWidget(this);

        // 添加页面到列表和堆叠部件
        for (int i = 0; i < 5; ++i) {
            QString label = QString("第 %1页").arg(i + 1);

            // 添加项到列表部件
            listWidget->addItem(label);

            // 创建对应页面
            QWidget *pageWidget = new QWidget();
            QVBoxLayout *pageLayout = new QVBoxLayout(pageWidget);
            QLabel *pageLabel = new QLabel(label, pageWidget);
            pageLayout->addWidget(pageLabel);
            pageWidget->setLayout(pageLayout);

            // 添加页面到堆叠部件
            stackedWidget->addWidget(pageWidget);
        }

        // 创建按钮部件
        QPushButton *previousButton = new QPushButton("上一页", this);
        QPushButton *nextButton = new QPushButton("下一页", this);

        // 连接按钮信号到对应槽
        connect(previousButton, &QPushButton::clicked, [=](){
            int currentIndex = stackedWidget->currentIndex();
            if (currentIndex > 0) {
                stackedWidget->setCurrentIndex(currentIndex - 1);
                listWidget->setCurrentRow(currentIndex - 1);
            }
        });
        connect(nextButton, &QPushButton::clicked, [=](){
            int currentIndex = stackedWidget->currentIndex();
            if (currentIndex < stackedWidget->count() - 1) {
                stackedWidget->setCurrentIndex(currentIndex + 1);
                listWidget->setCurrentRow(currentIndex + 1);
            }
        });

        // 将列表部件和堆叠部件添加到水平布局中
        layout->addWidget(listWidget);
        layout->addWidget(stackedWidget);

        // 在水平布局下添加按钮
        QVBoxLayout *buttonLayout = new QVBoxLayout();
        buttonLayout->addWidget(previousButton);
        buttonLayout->addWidget(nextButton);
        layout->addLayout(buttonLayout);

        // 连接选项改变信号到堆叠部件的 setCurrentIndex 槽
        connect(listWidget, &QListWidget::currentRowChanged, stackedWidget, &QStackedWidget::setCurrentIndex);
        
        // 设置水平布局
        this->setLayout(layout);
    }
};

使用QTabWidget实现

• QTabWidget 是 Qt 框架中的一种容器小部件，它用于创建一个多标签的界面，允许用户通过点击不同的标签来切换不同的子窗口或页面。在 QTabWidget 中，每个标签都对应一个页面，可以包含其他的小部件，如按钮、文本框、列表等。

    QWidget *centerWidget = new QWidget();
    QTabWidget *tabWidget = new QTabWidget(centerWidget);
    // 创建页面
    QWidget *page1 = new QWidget();
    QWidget *page2 = new QWidget();
    // 为每个页面添加一些内容
    QLabel *label1 = new QLabel("1", page1);
    QLabel *label2 = new QLabel("2", page2);
    // 将页面添加到QTabWidget
    tabWidget->addTab(page1, "1");
    tabWidget->addTab(page2, "2");
    QHBoxLayout *layout = new QHBoxLayout();
    layout->addWidget(tabWidget);
    centerWidget->setLayout(layout);
    mainWidget->setCentralWidget(centerWidget);

总结

• 知识理应共享
• 示例很简单，具体的页面想要什么功能需要自己补充，源码在此。