Qt側(cè)邊欄布局的實現(xiàn)示例
一、緒論
現(xiàn)在的很多桌面端軟件或后端管理系統(tǒng)等都有側(cè)邊導(dǎo)航欄,下面介紹一下如何用Qt純代碼的形式實現(xiàn)。
二、導(dǎo)航欄
void MainWindow::createNavBar()
{
//創(chuàng)建導(dǎo)航欄容器
QWidget *navWidget=new QWidget();
navWidget->setFixedWidth(150);//導(dǎo)航欄的寬度
navWidget->setStyleSheet("background-color: #2c3e50;"); // 添加深色背景
//導(dǎo)航欄布局
QVBoxLayout *navLayout=new QVBoxLayout(navWidget);
navLayout->setContentsMargins(0,30,0,30);
navLayout->setSpacing(0); // 設(shè)置間距為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");
// 設(shè)置按鈕固定高度
m_btn1->setFixedHeight(50);
m_btn2->setFixedHeight(50);
m_btn3->setFixedHeight(50);
m_btn4->setFixedHeight(50);
m_btn5->setFixedHeight(50);
m_btn6->setFixedHeight(50);
// 設(shè)置按鈕默認樣式
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èi)容區(qū)域。\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èi)容區(qū)域。\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èi)容區(qū)域。\n通過導(dǎo)航欄可以在不同頁面間切換。");
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èi)容區(qū)域。\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èi)容區(qū)域。\n您可以自定義每個頁面的樣式和內(nèi)容。");
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èi)容區(qū)域。\n感謝使用本導(dǎo)航欄布局系統(tǒng)。");
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);
}四、聯(lián)系
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);
// 設(shè)置當前選中按鈕的樣式
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("側(cè)邊導(dǎo)航欄布局");
resize(1385,780);
m_centralWidget=new QWidget(this);
m_mainLayout=new QHBoxLayout(m_centralWidget);
setCentralWidget(m_centralWidget); // 設(shè)置中央部件
createNavBar();
createPages();
// 設(shè)置初始頁面
switchPage(0);
}
void MainWindow::createNavBar()
{
//創(chuàng)建導(dǎo)航欄容器
QWidget *navWidget=new QWidget();
navWidget->setFixedWidth(150);//導(dǎo)航欄的寬度
navWidget->setStyleSheet("background-color: #2c3e50;"); // 添加深色背景
//導(dǎo)航欄布局
QVBoxLayout *navLayout=new QVBoxLayout(navWidget);
navLayout->setContentsMargins(0,30,0,30);
navLayout->setSpacing(0); // 設(shè)置間距為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");
// 設(shè)置按鈕固定高度
m_btn1->setFixedHeight(50);
m_btn2->setFixedHeight(50);
m_btn3->setFixedHeight(50);
m_btn4->setFixedHeight(50);
m_btn5->setFixedHeight(50);
m_btn6->setFixedHeight(50);
// 設(shè)置按鈕默認樣式
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èi)容區(qū)域。\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èi)容區(qū)域。\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èi)容區(qū)域。\n通過導(dǎo)航欄可以在不同頁面間切換。");
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èi)容區(qū)域。\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èi)容區(qū)域。\n您可以自定義每個頁面的樣式和內(nèi)容。");
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èi)容區(qū)域。\n感謝使用本導(dǎo)航欄布局系統(tǒng)。");
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);
// 設(shè)置當前選中按鈕的樣式
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;
}
}六、效果

到此這篇關(guān)于Qt側(cè)邊欄布局的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Qt側(cè)邊欄布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
C語言中判斷兩個IPv4地址是否屬于同一個子網(wǎng)的代碼
這篇文章主要介紹了C語言中判斷兩個IPv4地址是否屬于同一個子網(wǎng)的代碼,需要的朋友可以參考下2017-09-09
分享一下8年C++面向?qū)ο笤O(shè)計的經(jīng)驗體會
關(guān)于C++程序設(shè)計的書藉非常多,本章不講C++的語法,只講一些小小的編程道理。如果我能早幾年明白這些小道理,就可以大大改善數(shù)十萬行程序的質(zhì)量了2017-07-07
linux安裝mysql和使用c語言操作數(shù)據(jù)庫的方法 c語言連接mysql
Linux下使用C語言操作數(shù)據(jù)庫的方法,我將從MySQL環(huán)境的搭建,MySQL命令的使用到使用C接口來操作MySQL等過程詳細的介紹在Linux下管理MySQL數(shù)據(jù)庫的方法2014-01-01

