天天看點

QStackedWidget 控件使用詳解

Qt系列文章目錄

文章目錄

  • ​​Qt系列文章目錄​​
  • ​​前言​​
  • ​​一、QStackedWidget​​
  • ​​例子​​
  • ​​源碼下載下傳​​

前言

我們在使用Qt設計複雜界面的時候:一般都會設計出一個主界面,主界面包含幾個主要視窗,可以拖拽和互相停靠。其中視窗2是主要的三維渲染展示視窗,視窗1和視窗3裡面也有很多的内部布局。我們首先想到的是使用QDockWidget來設定視窗1、視窗2、視窗3,其中這3個視窗裡面也會顯示各種widget視窗。我們一般都會想到使用QTableView/QTableWidget等控件來顯示目前哪個視窗顯示,哪些視窗隐藏。這時候QStackedWidget控件使用起來更友善。

QStackedWidget 控件使用詳解

visual studio也是這樣的風格

QStackedWidget 控件使用詳解

一、QStackedWidget

1.​​QStackedWidget 官方文檔​​ QStackedWidget 控件相當于一個容器,提供一個空間來存放一系列的控件,并且每次隻能有一個控件是可見的,即被設定為目前的控件。QStackedWidget可用于建立類似于QTabWidget提供的使用者界面。它是一個建構在QStackedLayout類之上的友善布局小部件。與QStackedLayout一樣,QStacked Widget可以建構并填充許多子Widget(“頁面”):

2.常用接口

QStackedWidget 控件使用詳解
*firstPageWidget = new QWidget;
    QWidget *secondPageWidget = new QWidget;
    QWidget *thirdPageWidget = new QWidget;

    QStackedWidget *stackedWidget = new QStackedWidget;
    stackedWidget->addWidget(firstPageWidget);
    stackedWidget->addWidget(secondPageWidget);
    stackedWidget->addWidget(thirdPageWidget);

    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(stackedWidget);
    setLayout(layout);      

QStackedWidget沒有為使用者提供切換頁面的内在方法。這通常通過QComboBox或QListWidget來完成,QListWidget存儲QStackedWidget頁面的标題。例如

*pageComboBox = new QComboBox;
    pageComboBox->addItem(tr("Page 1"));
    pageComboBox->addItem(tr("Page 2"));
    pageComboBox->addItem(tr("Page 3"));
    connect(pageComboBox, QOverload<int>::of(&QComboBox::activated),
            stackedWidget, &QStackedWidget::setCurrentIndex);      

例子

1.頭檔案

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPushButton>
#include <QStackedWidget>
#include <QLabel>
#include <QGridLayout>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    QWidget *pwind;
    //上方三個按鈕
    QPushButton *btnT1;
    QPushButton *btnT2;
    QPushButton *btnT3;


    //設定三個QStackedWidget 頁面,每個頁面包含一個按鈕(當然這裡面的按鈕隻是看看);
    QStackedWidget *m_pStackedWidget;
    QPushButton *btnT4;
    QPushButton *btnT5;
    QPushButton *btnT6;

public slots:
    void switchPage(int nIndex);//切換設定
   void sss1();//連結按鈕的槽
   void sss2();
   void sss3();


private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H      
#include "MainWindow.h"
#include "ui_MainWindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    pwind = new QWidget;
    setCentralWidget(pwind);
    QPushButton *btnT1= new QPushButton("btn1");
    QPushButton *btnT2= new QPushButton("btn2");
    QPushButton *btnT3= new QPushButton("btn3");

    QLabel *pttt1= new QLabel(u8"----->",this);
    QLabel *pttt2= new QLabel(u8"----->",this);

    m_pStackedWidget = new QStackedWidget();
    btnT4 = new QPushButton(u8"子頁面1");
    btnT5 = new QPushButton(u8"子頁面2");
    btnT6 = new QPushButton(u8"子頁面3");

    m_pStackedWidget->addWidget(btnT4);
    m_pStackedWidget->addWidget(btnT5);
    m_pStackedWidget->addWidget(btnT6);

    QGridLayout *pLayout = new QGridLayout();
    pLayout->addWidget(btnT1,0,0);
    pLayout->addWidget(pttt1,0,1);
    pLayout->addWidget(btnT2,0,2);
    pLayout->addWidget(pttt2,0,3);
    pLayout->addWidget(btnT3,0,4);
    pLayout->addWidget(m_pStackedWidget,1,0,2,5);  //addWidget(待添加QWidget,行數,列數,跨越行數,跨越列數);後面的參數可以預設


    pwind->setLayout(pLayout);
    connect(btnT1, &QPushButton::clicked, this, &MainWindow::sss1);
    connect(btnT2, &QPushButton::clicked, this, &MainWindow::sss2);
    connect(btnT3, &QPushButton::clicked, this, &MainWindow::sss3);//通過控制sss1、sss2、sss3的參數變化,來實作對switchPage(int nIndex)的控制
}

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


void MainWindow::sss1()//設定顯示頁面1
{
    int i = 0;
    switchPage(i);//将要顯示的頁面編号傳遞給switchPage(int nIndex);
}
void MainWindow::sss2()//設定顯示頁面2
{
    int i = 1;
    switchPage(i);
}
void MainWindow::sss3()//設定顯示頁面3
{
    int i = 2;
    switchPage(i);
}
void MainWindow::switchPage(int nIndex)
{
    m_pStackedWidget->setCurrentIndex(nIndex);
}      

源碼下載下傳