" />

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Qt側(cè)邊欄布局的實(shí)現(xiàn)示例

 更新時(shí)間：2026年03月26日 09:26:53   作者：尋找華年的錦瑟  
現(xiàn)在的很多桌面端軟件或后端管理系統(tǒng)等都有側(cè)邊導(dǎo)航欄,本文就來(lái)詳細(xì)的介紹一下Qt側(cè)邊欄布局的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、緒論

現(xiàn)在的很多桌面端軟件或后端管理系統(tǒng)等都有側(cè)邊導(dǎo)航欄，下面介紹一下如何用Qt純代碼的形式實(shí)現(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è)置按鈕默認(rèn)樣式
    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);
    // 連接信號(hào)
    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); });
}

三、頁(yè)面

void MainWindow::createPages()
{
    m_stacketedWidget=new QStackedWidget();
    // 頁(yè)面1
    widget1=new QWidget();
    QVBoxLayout *layout1 = new QVBoxLayout(widget1);
    QLabel *title1 = new QLabel("頁(yè)面 1");
    title1->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title1->setAlignment(Qt::AlignCenter);
    QLabel *content1 = new QLabel("這是第一個(gè)頁(yè)面的內(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();
    // 頁(yè)面2
    widget2=new QWidget();
    QVBoxLayout *layout2 = new QVBoxLayout(widget2);
    QLabel *title2 = new QLabel("頁(yè)面 2");
    title2->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title2->setAlignment(Qt::AlignCenter);
    QLabel *content2 = new QLabel("這是第二個(gè)頁(yè)面的內(nèi)容區(qū)域。\n每個(gè)頁(yè)面都可以有不同的布局和功能。");
    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();
    // 頁(yè)面3
    widget3=new QWidget();
    QVBoxLayout *layout3 = new QVBoxLayout(widget3);
    QLabel *title3 = new QLabel("頁(yè)面 3");
    title3->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title3->setAlignment(Qt::AlignCenter);
    QLabel *content3 = new QLabel("這是第三個(gè)頁(yè)面的內(nèi)容區(qū)域。\n通過(guò)導(dǎo)航欄可以在不同頁(yè)面間切換。");
    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();
    // 頁(yè)面4
    widget4=new QWidget();
    QVBoxLayout *layout4 = new QVBoxLayout(widget4);
    QLabel *title4 = new QLabel("頁(yè)面 4");
    title4->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title4->setAlignment(Qt::AlignCenter);
    QLabel *content4 = new QLabel("這是第四個(gè)頁(yè)面的內(nèi)容區(qū)域。\n當(dāng)前選中的按鈕會(huì)有高亮顯示。");
    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();
    // 頁(yè)面5
    widget5=new QWidget();
    QVBoxLayout *layout5 = new QVBoxLayout(widget5);
    QLabel *title5 = new QLabel("頁(yè)面 5");
    title5->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title5->setAlignment(Qt::AlignCenter);
    QLabel *content5 = new QLabel("這是第五個(gè)頁(yè)面的內(nèi)容區(qū)域。\n您可以自定義每個(gè)頁(yè)面的樣式和內(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();
    // 頁(yè)面6
    widget6=new QWidget();
    QVBoxLayout *layout6 = new QVBoxLayout(widget6);
    QLabel *title6 = new QLabel("頁(yè)面 6");
    title6->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title6->setAlignment(Qt::AlignCenter);
    QLabel *content6 = new QLabel("這是第六個(gè)頁(yè)面的內(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è)置當(dāng)前選中按鈕的樣式
    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ò)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("側(cè)邊導(dǎo)航欄布局");
    resize(1385,780);
    m_centralWidget=new QWidget(this);
    m_mainLayout=new QHBoxLayout(m_centralWidget);
    setCentralWidget(m_centralWidget);  // 設(shè)置中央部件
    createNavBar();
    createPages();
    // 設(shè)置初始頁(yè)面
    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è)置按鈕默認(rèn)樣式
    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);
    // 連接信號(hào)
    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();
    // 頁(yè)面1
    widget1=new QWidget();
    QVBoxLayout *layout1 = new QVBoxLayout(widget1);
    QLabel *title1 = new QLabel("頁(yè)面 1");
    title1->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title1->setAlignment(Qt::AlignCenter);
    QLabel *content1 = new QLabel("這是第一個(gè)頁(yè)面的內(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();
    // 頁(yè)面2
    widget2=new QWidget();
    QVBoxLayout *layout2 = new QVBoxLayout(widget2);
    QLabel *title2 = new QLabel("頁(yè)面 2");
    title2->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title2->setAlignment(Qt::AlignCenter);
    QLabel *content2 = new QLabel("這是第二個(gè)頁(yè)面的內(nèi)容區(qū)域。\n每個(gè)頁(yè)面都可以有不同的布局和功能。");
    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();
    // 頁(yè)面3
    widget3=new QWidget();
    QVBoxLayout *layout3 = new QVBoxLayout(widget3);
    QLabel *title3 = new QLabel("頁(yè)面 3");
    title3->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title3->setAlignment(Qt::AlignCenter);
    QLabel *content3 = new QLabel("這是第三個(gè)頁(yè)面的內(nèi)容區(qū)域。\n通過(guò)導(dǎo)航欄可以在不同頁(yè)面間切換。");
    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();
    // 頁(yè)面4
    widget4=new QWidget();
    QVBoxLayout *layout4 = new QVBoxLayout(widget4);
    QLabel *title4 = new QLabel("頁(yè)面 4");
    title4->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title4->setAlignment(Qt::AlignCenter);
    QLabel *content4 = new QLabel("這是第四個(gè)頁(yè)面的內(nèi)容區(qū)域。\n當(dāng)前選中的按鈕會(huì)有高亮顯示。");
    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();
    // 頁(yè)面5
    widget5=new QWidget();
    QVBoxLayout *layout5 = new QVBoxLayout(widget5);
    QLabel *title5 = new QLabel("頁(yè)面 5");
    title5->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title5->setAlignment(Qt::AlignCenter);
    QLabel *content5 = new QLabel("這是第五個(gè)頁(yè)面的內(nèi)容區(qū)域。\n您可以自定義每個(gè)頁(yè)面的樣式和內(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();
    // 頁(yè)面6
    widget6=new QWidget();
    QVBoxLayout *layout6 = new QVBoxLayout(widget6);
    QLabel *title6 = new QLabel("頁(yè)面 6");
    title6->setStyleSheet("font-size: 32px; color: #2c3e50; font-weight: bold; margin-bottom: 20px;");
    title6->setAlignment(Qt::AlignCenter);
    QLabel *content6 = new QLabel("這是第六個(gè)頁(yè)面的內(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è)置當(dāng)前選中按鈕的樣式
    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è)邊欄布局的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Qt側(cè)邊欄布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論

化州市| 科技| 体育| 咸丰县| 大新县| 临武县| 江陵县| 金山区| 兖州市| 海晏县| 江陵县| 子洲县| 尉氏县| 涿鹿县| 大石桥市| 江津市| 武清区| 新民市| 广南县| 惠水县| 洛川县| 固原市| 南昌县| 松溪县| 马山县| 卫辉市| 吉木乃县| 彩票| 上虞市| 成武县| 东光县| 始兴县| 海宁市| 和田县| 葫芦岛市| 云安县| 奎屯市| 濮阳县| 沾化县| 西青区| 侯马市|