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

#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

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