如何通过QListWidget实现类似QTabWidget的页面切换功能？

阿华AIGC实验室

2026-4-21

嘿，我完全懂你用QTabWidget做垂直标签时的糟心感——字符排版别扭，调起来还麻烦。换成QListWidget来实现页面切换确实是个聪明的选择，不仅字符显示完全正常，实现起来也没那么复杂，我给你一步步拆解怎么搞：

核心思路

我们用QListWidget当左侧的导航栏，搭配QStackedWidget来承载各个需要切换的页面——QStackedWidget就是专门干“页面切换”这件事的，比硬改QTabWidget顺手多了。

具体实现步骤

准备导航栏和页面容器：先创建你的QListWidget导航，以及用来装页面的QStackedWidget，同时准备好每个选项对应的页面（比如你之前的按钮、自定义界面都可以放进去）。
给页面容器添加内容：把你需要展示的每个页面都添加到QStackedWidget里，注意顺序要和QListWidget的选项对应上哦。
布局组合：把QListWidget和QStackedWidget用水平布局拼在一起，左边导航，右边显示页面。
关联切换逻辑：把QListWidget的选中项变化信号，和QStackedWidget的页面切换槽关联起来，这样点导航项就能自动切页面了。

结合你的代码修改后的示例

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

    // 1. 创建左侧导航QListWidget
    QListWidget* MainList = new QListWidget;
    MainList->addItem(tr("1"));
    MainList->addItem(tr("2"));
    MainList->addItem(tr("3"));

    // 2. 创建各个页面并添加到QStackedWidget
    QStackedWidget* stackedWidget = new QStackedWidget;

    // 页面1：放你原来的按钮
    QWidget* page1 = new QWidget;
    QPushButton* button = new QPushButton(tr("first"), page1);
    QVBoxLayout* page1Layout = new QVBoxLayout(page1);
    page1Layout->addWidget(button);
    stackedWidget->addWidget(page1);

    // 页面2：自定义内容示例
    QWidget* page2 = new QWidget;
    QLabel* page2Label = new QLabel(tr("这是页面2的内容"), page2);
    QVBoxLayout* page2Layout = new QVBoxLayout(page2);
    page2Layout->addWidget(page2Label);
    stackedWidget->addWidget(page2);

    // 页面3：自定义内容示例
    QWidget* page3 = new QWidget;
    QLabel* page3Label = new QLabel(tr("这是页面3的内容"), page3);
    QVBoxLayout* page3Layout = new QVBoxLayout(page3);
    page3Layout->addWidget(page3Label);
    stackedWidget->addWidget(page3);

    // 3. 整体布局：左导航，右页面
    QHBoxLayout* mainLayout = new QHBoxLayout(this);
    mainLayout->addWidget(MainList);
    mainLayout->addWidget(stackedWidget);
    setLayout(mainLayout);

    // 4. 关联切换信号：选中导航项时切换对应页面
    connect(MainList, &QListWidget::currentRowChanged, stackedWidget, &QStackedWidget::setCurrentIndex);

    setWindowTitle(tr("Music Player"));
}