Qt做导航页面左侧

解决的问题：

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

Axure设计图：

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

---

 

如何实现：

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

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

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

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

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

---

 

 

 

代码块解析：

.ui文件

 DebugLeftWidget
 
  
   
    0
    0
    157
    354
   
  
  
   Form
  
  
   #DebugLeftWidget
{	
	background-color:#383F47;
	border-width:1px;
}

#pushButton_0 {
	qproperty-icon: url(:/resource/image/systemPage.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71);
	min-height: 30px;
	color:white;
    text-align: left center;
    padding-left: 30px;
    padding-top: 1px;
	
	border-style: solid;
	border-width: 2px;
	border-color: rgb(121, 121, 121);
	border-radius:5px;

}

#pushButton_1 {
	qproperty-icon: url(:/resource/image/testPage.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71);  
	min-height: 30px;
	color:white;
    text-align: left center;
    padding-left: 30px;
    padding-top: 1px;

	border-style: solid;
	border-width: 2px;
	border-color: rgb(121, 121, 121);
	border-radius:5px;
}

#pushButton_2 {
	qproperty-icon: url(:/resource/image/tablePage.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71); 
	min-height: 30px;
	color:white;
    text-align: left center;
    padding-left: 30px;
    padding-top: 1px;

	border-style: solid;
	border-width: 2px;
	border-color: rgb(121, 121, 121);
	border-radius:5px;
}

#pushButton_3 {
	qproperty-icon: url(:/resource/image/shrinkage2.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71);
	min-height: 30px;
	color:white;
    text-align: left center;
    padding-left: 30px;
    padding-top: 1px;

	border-style: solid;
	border-width: 2px;
	border-color: rgb(121, 121, 121);
	border-radius:5px;
}


#shrinkBtn{
	qproperty-icon: url(:/resource/image/shrinkage2.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71);
}

#unfoldBtn{
	qproperty-icon: url(:/resource/image/unfold2.png);
	background-repeat: no-repeat;
	background-origin: padding;
	background-position: left center;
    background-color: rgb(56, 63, 71);
}


  
  
   
    
     
      Qt::Horizontal
     
     
      
       85
       20
      
     
    
   
   
    
     
      
       16
       16
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      
     
    
   
   
    
     
      
       0
       35
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      系统设置
     
     
      true
     
     
      true
     
    
   
   
    
     
      
       0
       35
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      测试参数
     
     
      false
     
    
   
   
    
     
      
       0
       35
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      表格参数
     
     
      false
     
    
   
   
    
     
      
       0
       35
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      PushButton
     
     
      false
     
    
   
   
    
     
      Qt::Vertical
     
     
      
       20
       102
      
     
    
   
   
    
     
      
       16
       16
      
     
     
      QPushButton:hover{
    background-color: rgb(98,102,105);
}
QPushButton:pressed{
	color: black;
    background-color: rgb(153,153,153);
}
     
     
      
     
    
   
   
    
     
      Qt::Horizontal
     
     
      
       85
       20
      
     
    
   
  
 
 
 

.h文件

#ifndef DEBUGLEFTWIDGET_H
#define DEBUGLEFTWIDGET_H

#include 
#include 

namespace Ui {
class DebugLeftWidget;
}

class DebugLeftWidget : public QWidget
{
    Q_OBJECT

public:
    explicit DebugLeftWidget(QWidget *parent = 0);
    ~DebugLeftWidget();

signals:
    void changePage(int index);

private:
    void init();
    void initConnect();

private slots:
    void btnClicked();

private:
    Ui::DebugLeftWidget *ui;
    QList btnsMain;
    QString strBtnStyle;
};

#endif // DEBUGLEFTWIDGET_H

.cpp文件

#include "debugleftwidget.h"
#include "ui_debugleftwidget.h"
#include 
#include 

DebugLeftWidget::DebugLeftWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::DebugLeftWidget)
{
    ui->setupUi(this);
    init();
    initConnect();
}

DebugLeftWidget::~DebugLeftWidget()
{
    delete ui;
}

void DebugLeftWidget::init()
{
    btnsMain << ui->pushButton_0
             << ui->pushButton_1
             << ui->pushButton_2
             << ui->pushButton_3;
    strBtnStyle = ui->pushButton_0->styleSheet();
}

void DebugLeftWidget::initConnect()
{
    for (int i = 0; i < btnsMain.size(); ++i) {
        QPushButton *btn = (QPushButton *)btnsMain.at(i);
        connect(btn, &QPushButton::clicked, this, &DebugLeftWidget::btnClicked);
    }
    ui->pushButton_0->click();
}

void DebugLeftWidget::btnClicked()
{
    QPushButton *btn = qobject_cast(sender());
    foreach (auto elemBtn, btnsMain) {
        if(elemBtn->objectName() == btn->objectName()){
            elemBtn->setStyleSheet("background: rgb(98,102,105)");
//            qDebug() << "object name: " << btn->objectName().mid(11);
            emit changePage(btn->objectName().mid(11).toInt());
        }else{
            elemBtn->setStyleSheet(strBtnStyle);
        }
    }
}

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