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侧边栏布局内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Qt侧边栏布局的实现示例

目录

一、绪论

二、导航栏

三、页面

四、联系

五、整体代码

六、效果

评论(0)

提示：请文明发言取消回复

近期文章

近期评论

Qt侧边栏布局的实现示例

目录

一、绪论

二、导航栏

三、页面

四、联系

五、整体代码

六、效果

评论(0)

提示：请文明发言 取消回复

相关文章

Go语言实现IP段范围校验示例

Go中如何使用set的方法示例

用gomock进行mock测试的方法示例

android 限制某个操作每天只能操作指定的次数(示例代码详解)

近期文章

近期评论

提示：请文明发言取消回复