Qt侧边栏布局的实现示例

2026-03-26 09:26:53 作者：寻找华年的锦瑟

现在的很多桌面端软件或后端管理系统等都有侧边导航栏,本文就来详细的介绍一下Qt侧边栏布局的实现示例,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

一、绪论

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

二、导航栏

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

也就是通过QStackedWidget 的index链接。

五、整体代码

mainwindow.h

#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

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

六、效果

到此这篇关于Qt侧边栏布局的实现示例的文章就介绍到这了,更多相关Qt侧边栏布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！