Qt界面导航实战：QListWidget联动QStackedWidget构建动态内容面板

1. 为什么你需要掌握QListWidget与QStackedWidget的联动？

如果你用过一些桌面软件，比如系统设置、音乐播放器的侧边栏，或者管理后台，你会发现左边通常有一个导航菜单，点击不同的选项，右边的主内容区域就会切换到对应的页面。这种交互清晰、高效，用户体验非常好。在Qt里，要实现这种效果，QListWidget 和 QStackedWidget 这对组合拳，可以说是最经典、最实用的方案之一。

我刚开始接触Qt做界面时，也试过用一堆按钮和hide()、show()来手动切换页面，代码很快就变得又臭又长，维护起来简直是噩梦。后来发现了QStackedWidget，感觉就像找到了救星。它本质上是一个“页面堆栈”，同一时间只显示一个“子窗口”（也就是一个页面），其他的都帮你藏好了。你只需要告诉它：“显示第几个”，切换就完成了。

而QListWidget，就是一个增强版的列表。它不仅能显示简单的文字项，还能设置图标、自定义外观，更重要的是，它内置了项被选中的信号。当我们把QListWidget的当前行变化信号，连接到QStackedWidget的页面切换槽函数时，那个经典的“点击左边，切换右边”的联动效果就实现了。

这个组合的优势在哪里呢？首先是结构清晰。导航和内容完全分离，你的业务逻辑可以很干净地写在各自的页面里。其次是扩展性强。以后要加新功能？在列表里加一项，再创建一个页面扔进堆栈就行，几乎不用动原有的架构。最后是性能可控。所有页面在初始化时就被创建好了，切换是瞬间的，没有延迟。当然，如果页面特别复杂、初始化很慢，我们也有“懒加载”的优化策略，这个后面会详细讲。

所以，无论你是想做一个软件设置对话框，还是一个数据可视化的仪表盘，或者一个内部的管理工具，掌握这个模式都能让你的开发事半功倍。下面，我就带你从零开始，一步步搭建一个功能完整、体验流畅的动态内容面板。

2. 从零搭建：你的第一个联动界面

光说不练假把式，我们直接动手写代码。我会用一个模拟“软件设置中心”的场景来演示，左边是设置分类（如“通用”、“账户”、“隐私”），右边是对应的详细设置页面。

2.1 创建项目与基础布局

首先，创建一个Qt Widgets Application项目。在自动生成的主窗口类（比如MainWindow）的构造函数里，我们开始布局。

核心思路是使用一个水平布局（QHBoxLayout），把左边导航和右边内容区并排摆放。左边导航我们用一个QListWidget，右边内容区用一个QStackedWidget。

// 假设在 MainWindow 的构造函数中
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    // 创建一个中心部件作为所有内容的容器
    QWidget *centralWidget = new QWidget(this);
    this->setCentralWidget(centralWidget);

    // 主水平布局
    QHBoxLayout *mainLayout = new QHBoxLayout(centralWidget);

    // 1. 创建导航列表
    m_listWidget = new QListWidget(this);
    // 设置一个合适的固定宽度，让导航栏看起来更规整
    m_listWidget->setFixedWidth(150);
    // 设置选择模式为单选，一次只能选一个
    m_listWidget->setSelectionMode(QAbstractItemView::SingleSelection);

    // 2. 创建堆叠内容区域
    m_stackedWidget = new QStackedWidget(this);

    // 将两者添加到主布局
    mainLayout->addWidget(m_listWidget);
    mainLayout->addWidget(m_stackedWidget);

    // 设置布局
    centralWidget->setLayout(mainLayout);

    // 接下来，我们将创建页面并建立联动
    setupPages();
}

这里我习惯把QListWidget和QStackedWidget声明为类的成员变量（比如m_listWidget和m_stackedWidget），方便后续在其他函数里访问。setFixedWidth给导航栏一个固定宽度，这样界面看起来更专业，不会因为窗口拉伸而变形。

2.2 创建页面并建立信号槽连接

现在，我们来创建具体的页面并填充到两个控件中。关键的一步是建立它们之间的连接：当列表的选中项改变时，堆叠窗口要同步切换。

void MainWindow::setupPages()
{
    // 定义页面名称
    QStringList pageNames = {“通用设置”, “账户管理”, “隐私与安全”, “高级选项”};

    for (int i = 0; i < pageNames.size(); ++i) {
        QString name = pageNames.at(i);

        // 向导航列表添加项
        m_listWidget->addItem(name);

        // 创建对应的内容页面
        QWidget *page = new QWidget();
        QVBoxLayout *pageLayout = new QVBoxLayout(page);

        // 这里只是示例，放一个标题标签和一些模拟控件
        QLabel *titleLabel = new QLabel(QStr