Qt-侧边栏布局

寻找华年的锦瑟2025-11-30 14:30

一、绪论

现在的很多桌面端软件或后端管理系统等都有侧边导航栏，下面介绍一下如何用Qt纯代码的形式实现。

二、导航栏

cpp 复制代码 
void MainWindow::createNavBar()
{
    //创建导航栏容器
    QWidget *navWidget=new QWidget();
    navWidget->setFixedWidth(150);//导航栏的宽度
    navWidget->setStyleSheet("background-color: #2c3e50;"); // 添加深色背景

    //导航栏布局
    QVBoxLayout *navLayout=new QVBoxLayout(navWidget);
    navLayout->setContentsMargins(0,30,0,30);
    navLayout->setSpacing(0); // 设置间距为0，用边框分隔

    m_btn1=new QPushButton("按钮1");
    m_btn2=new QPushButton("按钮2");
    m_btn3=new QPushButton("按钮3");
    m_btn4=new QPushButton("按钮4");
    m_btn5=new QPushButton("按钮5");
    m_btn6=new QPushButton("按钮6");

    // 设置按钮固定高度
    m_btn1->setFixedHeight(50);
    m_btn2->setFixedHeight(50);
    m_btn3->setFixedHeight(50);
    m_btn4->setFixedHeight(50);
    m_btn5->setFixedHeight(50);
    m_btn6->setFixedHeight(50);

    // 设置按钮默认样式
    QString buttonStyle = "QPushButton {"
                          "text-align: left;"
                          "padding: 15px 20px;"
                          "border: none;"
                          "background-color: transparent;"
                          "color: #bdc3c7;"
                          "font-size: 14px;"
                          "border-left: 4px solid transparent;"
                          "}"
                          "QPushButton:hover {"
                          "background-color: rgba(255,255,255,0.1);"
                          "color: #ecf0f1;"
                          "}"
                          "QPushButton:pressed {"
                          "background-color: rgba(255,255,255,0.2);"
                          "}";

    m_btn1->setStyleSheet(buttonStyle);
    m_btn2->setStyleSheet(buttonStyle);
    m_btn3->setStyleSheet(buttonStyle);
    m_btn4->setStyleSheet(buttonStyle);
    m_btn5->setStyleSheet(buttonStyle);
    m_btn6->setStyleSheet(buttonStyle);

    navLayout->addWidget(m_btn1);
    navLayout->addWidget(m_btn2);
    navLayout->addWidget(m_btn3);
    navLayout->addWidget(m_btn4);
    navLayout->addWidget(m_btn5);
    navLayout->addWidget(m_btn6);
    navLayout->addStretch();

    m_mainLayout->addWidget(navWidget);

    // 连接信号
    connect(m_btn1, &QPushButton::clicked, [this]() { switchPage(0); });
    connect(m_btn2, &QPushButton::clicked, [this]() { switchPage(1); });
    connect(m_btn3, &QPushButton::clicked, [this]() { switchPage(2); });
    connect(m_btn4, &QPushButton::clicked, [this]() { switchPage(3); });
    connect(m_btn5, &QPushButton::clicked, [this]() { switchPage(4); });
    connect(m_btn6, &QPushButton::clicked, [this]() { switchPage(5); });
}

三、页面

cpp 复制代码 
void MainWindow::createPages()
{
    m_stacketedWidget=new QStackedWidget();

    // 页面1
    widget1=new QWidget();
    QVBoxLayout *layout1 = new QVBoxLayout(widget1);
    QLabel *title1 = new QLabel("页面 1");
    title1->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title1->setAlignment(Qt::AlignCenter);

    QLabel *content1 = new QLabel("这是第一个页面的内容区域。\n您可以在这里添加各种控件和功能。");
    content1->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content1->setAlignment(Qt::AlignCenter);
    content1->setWordWrap(true);

    layout1->addWidget(title1);
    layout1->addWidget(content1);
    layout1->addStretch();

    // 页面2
    widget2=new QWidget();
    QVBoxLayout *layout2 = new QVBoxLayout(widget2);
    QLabel *title2 = new QLabel("页面 2");
    title2->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title2->setAlignment(Qt::AlignCenter);

    QLabel *content2 = new QLabel("这是第二个页面的内容区域。\n每个页面都可以有不同的布局和功能。");
    content2->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content2->setAlignment(Qt::AlignCenter);
    content2->setWordWrap(true);

    layout2->addWidget(title2);
    layout2->addWidget(content2);
    layout2->addStretch();

    // 页面3
    widget3=new QWidget();
    QVBoxLayout *layout3 = new QVBoxLayout(widget3);
    QLabel *title3 = new QLabel("页面 3");
    title3->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title3->setAlignment(Qt::AlignCenter);

    QLabel *content3 = new QLabel("这是第三个页面的内容区域。\n通过导航栏可以在不同页面间切换。");
    content3->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content3->setAlignment(Qt::AlignCenter);
    content3->setWordWrap(true);

    layout3->addWidget(title3);
    layout3->addWidget(content3);
    layout3->addStretch();

    // 页面4
    widget4=new QWidget();
    QVBoxLayout *layout4 = new QVBoxLayout(widget4);
    QLabel *title4 = new QLabel("页面 4");
    title4->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title4->setAlignment(Qt::AlignCenter);

    QLabel *content4 = new QLabel("这是第四个页面的内容区域。\n当前选中的按钮会有高亮显示。");
    content4->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content4->setAlignment(Qt::AlignCenter);
    content4->setWordWrap(true);

    layout4->addWidget(title4);
    layout4->addWidget(content4);
    layout4->addStretch();

    // 页面5
    widget5=new QWidget();
    QVBoxLayout *layout5 = new QVBoxLayout(widget5);
    QLabel *title5 = new QLabel("页面 5");
    title5->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title5->setAlignment(Qt::AlignCenter);

    QLabel *content5 = new QLabel("这是第五个页面的内容区域。\n您可以自定义每个页面的样式和内容。");
    content5->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content5->setAlignment(Qt::AlignCenter);
    content5->setWordWrap(true);

    layout5->addWidget(title5);
    layout5->addWidget(content5);
    layout5->addStretch();

    // 页面6
    widget6=new QWidget();
    QVBoxLayout *layout6 = new QVBoxLayout(widget6);
    QLabel *title6 = new QLabel("页面 6");
    title6->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title6->setAlignment(Qt::AlignCenter);

    QLabel *content6 = new QLabel("这是第六个页面的内容区域。\n感谢使用本导航栏布局系统。");
    content6->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content6->setAlignment(Qt::AlignCenter);
    content6->setWordWrap(true);

    layout6->addWidget(title6);
    layout6->addWidget(content6);
    layout6->addStretch();

    m_stacketedWidget->addWidget(widget1);
    m_stacketedWidget->addWidget(widget2);
    m_stacketedWidget->addWidget(widget3);
    m_stacketedWidget->addWidget(widget4);
    m_stacketedWidget->addWidget(widget5);
    m_stacketedWidget->addWidget(widget6);

    m_mainLayout->addWidget(m_stacketedWidget, 1);
}

四、联系

cpp 复制代码 
void MainWindow::switchPage(int index)
{
    m_stacketedWidget->setCurrentIndex(index);

    // 定义样式
    QString defaultStyle = "QPushButton {"
                           "text-align: left;"
                           "padding: 15px 20px;"
                           "border: none;"
                           "background-color: transparent;"
                           "color: #bdc3c7;"
                           "font-size: 14px;"
                           "border-left: 4px solid transparent;"
                           "}"
                           "QPushButton:hover {"
                           "background-color: rgba(255,255,255,0.1);"
                           "color: #ecf0f1;"
                           "}";

    QString activeStyle = "QPushButton {"
                          "text-align: left;"
                          "padding: 15px 20px;"
                          "border: none;"
                          "background-color: #3498db;"
                          "color: white;"
                          "font-size: 14px;"
                          "border-left: 4px solid #2980b9;"
                          "}";

    // 重置所有按钮样式
    m_btn1->setStyleSheet(defaultStyle);
    m_btn2->setStyleSheet(defaultStyle);
    m_btn3->setStyleSheet(defaultStyle);
    m_btn4->setStyleSheet(defaultStyle);
    m_btn5->setStyleSheet(defaultStyle);
    m_btn6->setStyleSheet(defaultStyle);

    // 设置当前选中按钮的样式
    switch (index) {
    case 0: m_btn1->setStyleSheet(activeStyle); break;
    case 1: m_btn2->setStyleSheet(activeStyle); break;
    case 2: m_btn3->setStyleSheet(activeStyle); break;
    case 3: m_btn4->setStyleSheet(activeStyle); break;
    case 4: m_btn5->setStyleSheet(activeStyle); break;
    case 5: m_btn6->setStyleSheet(activeStyle); break;
    }
}

也就是通过QStackedWidget 的index链接。

五、整体代码

mainwindow.h

cpp 复制代码 
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QStackedWidget>
#include<QHBoxLayout>
#include<QPushButton>
#include<QLabel>
class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private slots:
    void switchPage(int index);
private:
    void setupUI();
    void createNavBar();
    void createPages();

    QWidget *m_centralWidget;
    QHBoxLayout *m_mainLayout;
    QStackedWidget *m_stacketedWidget;

    QPushButton *m_btn1;
    QPushButton *m_btn2;
    QPushButton *m_btn3;
    QPushButton *m_btn4;
    QPushButton *m_btn5;
    QPushButton *m_btn6;


    QWidget *widget1;
    QWidget *widget2;
    QWidget *widget3;
    QWidget *widget4;
    QWidget *widget5;
    QWidget *widget6;




};
#endif // MAINWINDOW_H

mainwindow.cpp

cpp 复制代码 
#include "mainwindow.h"
#include <QVBoxLayout>
#include <QLabel>
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setupUI();
}

MainWindow::~MainWindow() {}

void MainWindow::setupUI()
{
    setWindowTitle("侧边导航栏布局");
    resize(1385,780);
    m_centralWidget=new QWidget(this);
    m_mainLayout=new QHBoxLayout(m_centralWidget);

    setCentralWidget(m_centralWidget);  // 设置中央部件
    createNavBar();
    createPages();

    // 设置初始页面
    switchPage(0);
}

void MainWindow::createNavBar()
{
    //创建导航栏容器
    QWidget *navWidget=new QWidget();
    navWidget->setFixedWidth(150);//导航栏的宽度
    navWidget->setStyleSheet("background-color: #2c3e50;"); // 添加深色背景

    //导航栏布局
    QVBoxLayout *navLayout=new QVBoxLayout(navWidget);
    navLayout->setContentsMargins(0,30,0,30);
    navLayout->setSpacing(0); // 设置间距为0，用边框分隔

    m_btn1=new QPushButton("按钮1");
    m_btn2=new QPushButton("按钮2");
    m_btn3=new QPushButton("按钮3");
    m_btn4=new QPushButton("按钮4");
    m_btn5=new QPushButton("按钮5");
    m_btn6=new QPushButton("按钮6");

    // 设置按钮固定高度
    m_btn1->setFixedHeight(50);
    m_btn2->setFixedHeight(50);
    m_btn3->setFixedHeight(50);
    m_btn4->setFixedHeight(50);
    m_btn5->setFixedHeight(50);
    m_btn6->setFixedHeight(50);

    // 设置按钮默认样式
    QString buttonStyle = "QPushButton {"
                          "text-align: left;"
                          "padding: 15px 20px;"
                          "border: none;"
                          "background-color: transparent;"
                          "color: #bdc3c7;"
                          "font-size: 14px;"
                          "border-left: 4px solid transparent;"
                          "}"
                          "QPushButton:hover {"
                          "background-color: rgba(255,255,255,0.1);"
                          "color: #ecf0f1;"
                          "}"
                          "QPushButton:pressed {"
                          "background-color: rgba(255,255,255,0.2);"
                          "}";

    m_btn1->setStyleSheet(buttonStyle);
    m_btn2->setStyleSheet(buttonStyle);
    m_btn3->setStyleSheet(buttonStyle);
    m_btn4->setStyleSheet(buttonStyle);
    m_btn5->setStyleSheet(buttonStyle);
    m_btn6->setStyleSheet(buttonStyle);

    navLayout->addWidget(m_btn1);
    navLayout->addWidget(m_btn2);
    navLayout->addWidget(m_btn3);
    navLayout->addWidget(m_btn4);
    navLayout->addWidget(m_btn5);
    navLayout->addWidget(m_btn6);
    navLayout->addStretch();

    m_mainLayout->addWidget(navWidget);

    // 连接信号
    connect(m_btn1, &QPushButton::clicked, [this]() { switchPage(0); });
    connect(m_btn2, &QPushButton::clicked, [this]() { switchPage(1); });
    connect(m_btn3, &QPushButton::clicked, [this]() { switchPage(2); });
    connect(m_btn4, &QPushButton::clicked, [this]() { switchPage(3); });
    connect(m_btn5, &QPushButton::clicked, [this]() { switchPage(4); });
    connect(m_btn6, &QPushButton::clicked, [this]() { switchPage(5); });
}

void MainWindow::createPages()
{
    m_stacketedWidget=new QStackedWidget();

    // 页面1
    widget1=new QWidget();
    QVBoxLayout *layout1 = new QVBoxLayout(widget1);
    QLabel *title1 = new QLabel("页面 1");
    title1->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title1->setAlignment(Qt::AlignCenter);

    QLabel *content1 = new QLabel("这是第一个页面的内容区域。\n您可以在这里添加各种控件和功能。");
    content1->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content1->setAlignment(Qt::AlignCenter);
    content1->setWordWrap(true);

    layout1->addWidget(title1);
    layout1->addWidget(content1);
    layout1->addStretch();

    // 页面2
    widget2=new QWidget();
    QVBoxLayout *layout2 = new QVBoxLayout(widget2);
    QLabel *title2 = new QLabel("页面 2");
    title2->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title2->setAlignment(Qt::AlignCenter);

    QLabel *content2 = new QLabel("这是第二个页面的内容区域。\n每个页面都可以有不同的布局和功能。");
    content2->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content2->setAlignment(Qt::AlignCenter);
    content2->setWordWrap(true);

    layout2->addWidget(title2);
    layout2->addWidget(content2);
    layout2->addStretch();

    // 页面3
    widget3=new QWidget();
    QVBoxLayout *layout3 = new QVBoxLayout(widget3);
    QLabel *title3 = new QLabel("页面 3");
    title3->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title3->setAlignment(Qt::AlignCenter);

    QLabel *content3 = new QLabel("这是第三个页面的内容区域。\n通过导航栏可以在不同页面间切换。");
    content3->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content3->setAlignment(Qt::AlignCenter);
    content3->setWordWrap(true);

    layout3->addWidget(title3);
    layout3->addWidget(content3);
    layout3->addStretch();

    // 页面4
    widget4=new QWidget();
    QVBoxLayout *layout4 = new QVBoxLayout(widget4);
    QLabel *title4 = new QLabel("页面 4");
    title4->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title4->setAlignment(Qt::AlignCenter);

    QLabel *content4 = new QLabel("这是第四个页面的内容区域。\n当前选中的按钮会有高亮显示。");
    content4->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content4->setAlignment(Qt::AlignCenter);
    content4->setWordWrap(true);

    layout4->addWidget(title4);
    layout4->addWidget(content4);
    layout4->addStretch();

    // 页面5
    widget5=new QWidget();
    QVBoxLayout *layout5 = new QVBoxLayout(widget5);
    QLabel *title5 = new QLabel("页面 5");
    title5->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title5->setAlignment(Qt::AlignCenter);

    QLabel *content5 = new QLabel("这是第五个页面的内容区域。\n您可以自定义每个页面的样式和内容。");
    content5->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content5->setAlignment(Qt::AlignCenter);
    content5->setWordWrap(true);

    layout5->addWidget(title5);
    layout5->addWidget(content5);
    layout5->addStretch();

    // 页面6
    widget6=new QWidget();
    QVBoxLayout *layout6 = new QVBoxLayout(widget6);
    QLabel *title6 = new QLabel("页面 6");
    title6->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title6->setAlignment(Qt::AlignCenter);

    QLabel *content6 = new QLabel("这是第六个页面的内容区域。\n感谢使用本导航栏布局系统。");
    content6->setStyleSheet("font-size: 16px; color: #7f8c8d; margin: 10px 0;");
    content6->setAlignment(Qt::AlignCenter);
    content6->setWordWrap(true);

    layout6->addWidget(title6);
    layout6->addWidget(content6);
    layout6->addStretch();

    m_stacketedWidget->addWidget(widget1);
    m_stacketedWidget->addWidget(widget2);
    m_stacketedWidget->addWidget(widget3);
    m_stacketedWidget->addWidget(widget4);
    m_stacketedWidget->addWidget(widget5);
    m_stacketedWidget->addWidget(widget6);

    m_mainLayout->addWidget(m_stacketedWidget, 1);
}

void MainWindow::switchPage(int index)
{
    m_stacketedWidget->setCurrentIndex(index);

    // 定义样式
    QString defaultStyle = "QPushButton {"
                           "text-align: left;"
                           "padding: 15px 20px;"
                           "border: none;"
                           "background-color: transparent;"
                           "color: #bdc3c7;"
                           "font-size: 14px;"
                           "border-left: 4px solid transparent;"
                           "}"
                           "QPushButton:hover {"
                           "background-color: rgba(255,255,255,0.1);"
                           "color: #ecf0f1;"
                           "}";

    QString activeStyle = "QPushButton {"
                          "text-align: left;"
                          "padding: 15px 20px;"
                          "border: none;"
                          "background-color: #3498db;"
                          "color: white;"
                          "font-size: 14px;"
                          "border-left: 4px solid #2980b9;"
                          "}";

    // 重置所有按钮样式
    m_btn1->setStyleSheet(defaultStyle);
    m_btn2->setStyleSheet(defaultStyle);
    m_btn3->setStyleSheet(defaultStyle);
    m_btn4->setStyleSheet(defaultStyle);
    m_btn5->setStyleSheet(defaultStyle);
    m_btn6->setStyleSheet(defaultStyle);

    // 设置当前选中按钮的样式
    switch (index) {
    case 0: m_btn1->setStyleSheet(activeStyle); break;
    case 1: m_btn2->setStyleSheet(activeStyle); break;
    case 2: m_btn3->setStyleSheet(activeStyle); break;
    case 3: m_btn4->setStyleSheet(activeStyle); break;
    case 4: m_btn5->setStyleSheet(activeStyle); break;
    case 5: m_btn6->setStyleSheet(activeStyle); break;
    }
}

六、效果

相关推荐
用户805533698033 天前
不止三件套：QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner3 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz8 天前
QML Hello World 入门示例
qt
xcyxiner11 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner12 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner12 天前
DicomViewer (添加模型类)3
qt
xcyxiner13 天前
DicomViewer (目录调整) 2
qt
xcyxiner13 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
LDR00615 天前
Type-C 快充全面升级！LDR6601 赋能个人护理便携电机，重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术15 天前
Tree.js是什么？一文讲透
开发语言·javascript·ecmascript
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04Trae国际版与国内版深度测评：AI原生IDE的双生花05GitHub 镜像站点06飞书长连接_事件订阅（接收消息，审批任务状态变更）07【AI】2026 年具身智能模型和世界模型总结08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）