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;
    }
}

六、效果

相关推荐
156082072191 小时前
QT的ComboBox使用QToolTip显示提示信息
开发语言
tyler-泰勒1 小时前
QT：基础概念操作
开发语言·qt
开始了码1 小时前
QT::对话框：消息对话框6
qt
9***P3341 小时前
Rust在网络中的Rocket
开发语言·后端·rust
大迪吃小迪1 小时前
每秒 400 请求场景下，线程池如何合理配置？
java·开发语言
xxp43212 小时前
Qt 网络编程 网络下载
网络·qt·php
Wzx1980122 小时前
go聊天室
开发语言·后端·golang
Mr_Xuhhh2 小时前
pytest -- 指定⽤例执⾏顺序
开发语言·python·pytest
F_D_Z2 小时前
【解决办法】网络训练报错AttributeError: module ‘jax.core‘ has no attribute ‘Shape‘.
开发语言·python·jax
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07“我的电脑”图标没了怎么办 4种方法找回08全球最强模型Grok4，国内已可免费使用！（附教程）09KGG转MP3工具|非KGM文件|解密音频1046个Nano-banana 精选提示词，持续更新中