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_Hmainwindow.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侧边栏布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
雨量分布图是在区域地图基础上，针对区域中的每个最小单位区域比如县城点位不同颜色显示。本文将详细为大家介绍如何通过QT编写绘制雨量分布，感兴趣的小伙伴可以了解一下2021-12-12
rand()函数用来产生随机数，但是，rand()的内部实现是用线性同余法实现的，是伪随机数，由于周期较长，因此在一定范围内可以看成是随机的。srand()用来设置rand()产生随机数时的随机数种子。参数seed是整数，通常可以利用time(0)或geypid(0)的返回值作为seed2023-02-02
本文主要介绍了哈希表简单知识及C语言实现哈希表实例，文中利用图片以及代码简单讲解了相关知识，感兴趣的小伙伴可以多多学习这篇文章2021-09-09
这篇文章主要介绍了实现把表的数据导出到EXCEL并打印实例代码的相关资料,需要的朋友可以参考下2017-04-04
本文主要介绍了Windows安装Qt6.4.2及简单验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章介绍了C语言GetStdHandle函数的使用方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-12
这篇文章主要为大家详细介绍了C语言实现简单的聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了关于C++中大随机数的问题,文中给出了详细的示例代码，相信对大家的学习或者工作具有一定的参考借鉴价值，有需要的朋友可以一起来学习学习。2017-01-01
这篇文章主要为大家详细介绍了C语言实现弹跳小球项目，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了C++控制台用定时器实例代码，分享了相关代码示例，小编觉得还是挺不错的，具有一定借鉴价值，需要的朋友可以参考下2018-02-02
最新评论