devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Qt做导航页面左侧_qt左侧导航栏

作者：我家小花儿 | 2024-02-18 18:39:06

赞

踩

qt左侧导航栏

解决的问题：

实现一个左侧导航界面，单独封装，按下对应的按钮，弹出对应的界面在中间区域

Axure设计图：

需求：按钮，中间区域跳转

 

如何实现：

跳转界面当然用Qt自带的 QStackedWidget类咯

QStackedWidget类提供了一个小部件堆栈，其中一次只有一个小部件可见。

QStackedWidget可用于创建类似于QTabWidget提供的用户界面。它是建立在QStackedLayout类之上的一个方便的布局小部件。

左侧导航页面也是相当简单的：qt designer

咱们有啥拖啥，QPushButton，拖起来

 

 

 

代码块解析：

.ui文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <ui version="4.0">
  3.  <class>DebugLeftWidget</class>
  4.  <widget class="QWidget" name="DebugLeftWidget">
  5.   <property name="geometry">
  6.    <rect>
  7.     <x>0</x>
  8.     <y>0</y>
  9.     <width>157</width>
  10.     <height>354</height>
  11.    </rect>
  12.   </property>
  13.   <property name="windowTitle">
  14.    <string>Form</string>
  15.   </property>
  16.   <property name="styleSheet">
  17.    <string notr="true">#DebugLeftWidget
  18. {	
  19. 	background-color:#383F47;
  20. 	border-width:1px;
  21. }
  22.  
  23. #pushButton_0 {
  24. 	qproperty-icon: url(:/resource/image/systemPage.png);
  25. 	background-repeat: no-repeat;
  26. 	background-origin: padding;
  27. 	background-position: left center;
  28.     background-color: rgb(56, 63, 71);
  29. 	min-height: 30px;
  30. 	color:white;
  31.     text-align: left center;
  32.     padding-left: 30px;
  33.     padding-top: 1px;
  34. 	
  35. 	border-style: solid;
  36. 	border-width: 2px;
  37. 	border-color: rgb(121, 121, 121);
  38. 	border-radius:5px;
  39.  
  40. }
  41.  
  42. #pushButton_1 {
  43. 	qproperty-icon: url(:/resource/image/testPage.png);
  44. 	background-repeat: no-repeat;
  45. 	background-origin: padding;
  46. 	background-position: left center;
  47.     background-color: rgb(56, 63, 71);  
  48. 	min-height: 30px;
  49. 	color:white;
  50.     text-align: left center;
  51.     padding-left: 30px;
  52.     padding-top: 1px;
  53.  
  54. 	border-style: solid;
  55. 	border-width: 2px;
  56. 	border-color: rgb(121, 121, 121);
  57. 	border-radius:5px;
  58. }
  59.  
  60. #pushButton_2 {
  61. 	qproperty-icon: url(:/resource/image/tablePage.png);
  62. 	background-repeat: no-repeat;
  63. 	background-origin: padding;
  64. 	background-position: left center;
  65.     background-color: rgb(56, 63, 71); 
  66. 	min-height: 30px;
  67. 	color:white;
  68.     text-align: left center;
  69.     padding-left: 30px;
  70.     padding-top: 1px;
  71.  
  72. 	border-style: solid;
  73. 	border-width: 2px;
  74. 	border-color: rgb(121, 121, 121);
  75. 	border-radius:5px;
  76. }
  77.  
  78. #pushButton_3 {
  79. 	qproperty-icon: url(:/resource/image/shrinkage2.png);
  80. 	background-repeat: no-repeat;
  81. 	background-origin: padding;
  82. 	background-position: left center;
  83.     background-color: rgb(56, 63, 71);
  84. 	min-height: 30px;
  85. 	color:white;
  86.     text-align: left center;
  87.     padding-left: 30px;
  88.     padding-top: 1px;
  89.  
  90. 	border-style: solid;
  91. 	border-width: 2px;
  92. 	border-color: rgb(121, 121, 121);
  93. 	border-radius:5px;
  94. }
  95.  
  96.  
  97. #shrinkBtn{
  98. 	qproperty-icon: url(:/resource/image/shrinkage2.png);
  99. 	background-repeat: no-repeat;
  100. 	background-origin: padding;
  101. 	background-position: left center;
  102.     background-color: rgb(56, 63, 71);
  103. }
  104.  
  105. #unfoldBtn{
  106. 	qproperty-icon: url(:/resource/image/unfold2.png);
  107. 	background-repeat: no-repeat;
  108. 	background-origin: padding;
  109. 	background-position: left center;
  110.     background-color: rgb(56, 63, 71);
  111. }
  112.  
  113. </string>
  114.   </property>
  115.   <layout class="QGridLayout" name="gridLayout">
  116.    <item row="0" column="0" colspan="2">
  117.     <spacer name="horizontalSpacer">
  118.      <property name="orientation">
  119.       <enum>Qt::Horizontal</enum>
  120.      </property>
  121.      <property name="sizeHint" stdset="0">
  122.       <size>
  123.        <width>85</width>
  124.        <height>20</height>
  125.       </size>
  126.      </property>
  127.     </spacer>
  128.    </item>
  129.    <item row="0" column="2">
  130.     <widget class="QPushButton" name="shrinkBtn">
  131.      <property name="maximumSize">
  132.       <size>
  133.        <width>16</width>
  134.        <height>16</height>
  135.       </size>
  136.      </property>
  137.      <property name="styleSheet">
  138.       <string notr="true">QPushButton:hover{
  139.     background-color: rgb(98,102,105);
  140. }
  141. QPushButton:pressed{
  142. 	color: black;
  143.     background-color: rgb(153,153,153);
  144. }</string>
  145.      </property>
  146.      <property name="text">
  147.       <string/>
  148.      </property>
  149.     </widget>
  150.    </item>
  151.    <item row="1" column="0" colspan="3">
  152.     <widget class="QPushButton" name="pushButton_0">
  153.      <property name="minimumSize">
  154.       <size>
  155.        <width>0</width>
  156.        <height>35</height>
  157.       </size>
  158.      </property>
  159.      <property name="styleSheet">
  160.       <string notr="true">QPushButton:hover{
  161.     background-color: rgb(98,102,105);
  162. }
  163. QPushButton:pressed{
  164. 	color: black;
  165.     background-color: rgb(153,153,153);
  166. }</string>
  167.      </property>
  168.      <property name="text">
  169.       <string>系统设置</string>
  170.      </property>
  171.      <property name="checkable">
  172.       <bool>true</bool>
  173.      </property>
  174.      <property name="checked">
  175.       <bool>true</bool>
  176.      </property>
  177.     </widget>
  178.    </item>
  179.    <item row="2" column="0" colspan="3">
  180.     <widget class="QPushButton" name="pushButton_1">
  181.      <property name="minimumSize">
  182.       <size>
  183.        <width>0</width>
  184.        <height>35</height>
  185.       </size>
  186.      </property>
  187.      <property name="styleSheet">
  188.       <string notr="true">QPushButton:hover{
  189.     background-color: rgb(98,102,105);
  190. }
  191. QPushButton:pressed{
  192. 	color: black;
  193.     background-color: rgb(153,153,153);
  194. }</string>
  195.      </property>
  196.      <property name="text">
  197.       <string>测试参数</string>
  198.      </property>
  199.      <property name="checkable">
  200.       <bool>false</bool>
  201.      </property>
  202.     </widget>
  203.    </item>
  204.    <item row="3" column="0" colspan="3">
  205.     <widget class="QPushButton" name="pushButton_2">
  206.      <property name="minimumSize">
  207.       <size>
  208.        <width>0</width>
  209.        <height>35</height>
  210.       </size>
  211.      </property>
  212.      <property name="styleSheet">
  213.       <string notr="true">QPushButton:hover{
  214.     background-color: rgb(98,102,105);
  215. }
  216. QPushButton:pressed{
  217. 	color: black;
  218.     background-color: rgb(153,153,153);
  219. }</string>
  220.      </property>
  221.      <property name="text">
  222.       <string>表格参数</string>
  223.      </property>
  224.      <property name="checkable">
  225.       <bool>false</bool>
  226.      </property>
  227.     </widget>
  228.    </item>
  229.    <item row="4" column="0" colspan="3">
  230.     <widget class="QPushButton" name="pushButton_3">
  231.      <property name="minimumSize">
  232.       <size>
  233.        <width>0</width>
  234.        <height>35</height>
  235.       </size>
  236.      </property>
  237.      <property name="styleSheet">
  238.       <string notr="true">QPushButton:hover{
  239.     background-color: rgb(98,102,105);
  240. }
  241. QPushButton:pressed{
  242. 	color: black;
  243.     background-color: rgb(153,153,153);
  244. }</string>
  245.      </property>
  246.      <property name="text">
  247.       <string>PushButton</string>
  248.      </property>
  249.      <property name="checkable">
  250.       <bool>false</bool>
  251.      </property>
  252.     </widget>
  253.    </item>
  254.    <item row="5" column="1">
  255.     <spacer name="verticalSpacer">
  256.      <property name="orientation">
  257.       <enum>Qt::Vertical</enum>
  258.      </property>
  259.      <property name="sizeHint" stdset="0">
  260.       <size>
  261.        <width>20</width>
  262.        <height>102</height>
  263.       </size>
  264.      </property>
  265.     </spacer>
  266.    </item>
  267.    <item row="6" column="0">
  268.     <widget class="QPushButton" name="unfoldBtn">
  269.      <property name="maximumSize">
  270.       <size>
  271.        <width>16</width>
  272.        <height>16</height>
  273.       </size>
  274.      </property>
  275.      <property name="styleSheet">
  276.       <string notr="true">QPushButton:hover{
  277.     background-color: rgb(98,102,105);
  278. }
  279. QPushButton:pressed{
  280. 	color: black;
  281.     background-color: rgb(153,153,153);
  282. }</string>
  283.      </property>
  284.      <property name="text">
  285.       <string/>
  286.      </property>
  287.     </widget>
  288.    </item>
  289.    <item row="6" column="1" colspan="2">
  290.     <spacer name="horizontalSpacer_2">
  291.      <property name="orientation">
  292.       <enum>Qt::Horizontal</enum>
  293.      </property>
  294.      <property name="sizeHint" stdset="0">
  295.       <size>
  296.        <width>85</width>
  297.        <height>20</height>
  298.       </size>
  299.      </property>
  300.     </spacer>
  301.    </item>
  302.   </layout>
  303.  </widget>
  304.  <resources/>
  305.  <connections/>
  306. </ui>

.h文件

  1. #ifndef DEBUGLEFTWIDGET_H
  2. #define DEBUGLEFTWIDGET_H
  3.  
  4. #include <QWidget>
  5. #include <QAbstractButton>
  6.  
  7. namespace Ui {
  8. class DebugLeftWidget;
  9. }
  10.  
  11. class DebugLeftWidget : public QWidget
  12. {
  13.     Q_OBJECT
  14.  
  15. public:
  16.     explicit DebugLeftWidget(QWidget *parent = 0);
  17.     ~DebugLeftWidget();
  18.  
  19. signals:
  20.     void changePage(int index);
  21.  
  22. private:
  23.     void init();
  24.     void initConnect();
  25.  
  26. private slots:
  27.     void btnClicked();
  28.  
  29. private:
  30.     Ui::DebugLeftWidget *ui;
  31.     QList<QAbstractButton *> btnsMain;
  32.     QString strBtnStyle;
  33. };
  34.  
  35. #endif // DEBUGLEFTWIDGET_H

.cpp文件

  1. #include "debugleftwidget.h"
  2. #include "ui_debugleftwidget.h"
  3. #include <QDebug>
  4. #include <QPalette>
  5.  
  6. DebugLeftWidget::DebugLeftWidget(QWidget *parent) :
  7.     QWidget(parent),
  8.     ui(new Ui::DebugLeftWidget)
  9. {
  10.     ui->setupUi(this);
  11.     init();
  12.     initConnect();
  13. }
  14.  
  15. DebugLeftWidget::~DebugLeftWidget()
  16. {
  17.     delete ui;
  18. }
  19.  
  20. void DebugLeftWidget::init()
  21. {
  22.     btnsMain << ui->pushButton_0
  23.              << ui->pushButton_1
  24.              << ui->pushButton_2
  25.              << ui->pushButton_3;
  26.     strBtnStyle = ui->pushButton_0->styleSheet();
  27. }
  28.  
  29. void DebugLeftWidget::initConnect()
  30. {
  31.     for (int i = 0; i < btnsMain.size(); ++i) {
  32.         QPushButton *btn = (QPushButton *)btnsMain.at(i);
  33.         connect(btn, &QPushButton::clicked, this, &DebugLeftWidget::btnClicked);
  34.     }
  35.     ui->pushButton_0->click();
  36. }
  37.  
  38. void DebugLeftWidget::btnClicked()
  39. {
  40.     QPushButton *btn = qobject_cast<QPushButton *>(sender());
  41.     foreach (auto elemBtn, btnsMain) {
  42.         if(elemBtn->objectName() == btn->objectName()){
  43.             elemBtn->setStyleSheet("background: rgb(98,102,105)");
  44. //            qDebug() << "object name: " << btn->objectName().mid(11);
  45.             emit changePage(btn->objectName().mid(11).toInt());
  46.         }else{
  47.             elemBtn->setStyleSheet(strBtnStyle);
  48.         }
  49.     }
  50. }

代码太简单，就不用多说了，可以直接拷贝过去用

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读