implementing Qstackedwidget programatically

[VikramSamy]

Hi i used Qt creator to create a Qwidget appications and it automatically create a UI files together. anyway i plan to write the stacked widget without using the QTdesigner drag&drop which i have tried and it worked.

anyway, as im trying to do it by coding it but didnt worked yet. my code is as below:-

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow) // this the mainwindow [m]
{
     ui->setupUi(this); 
    //start my user code:
     ui->statusBar->setStyleSheet("background-color: gold");
     ui->centralWidget->setStyleSheet("background-color: white");

 //create the stacked widget ,add the pages, set as central
 //1st- create the pages, page already defined in separate files
     home = new Page1(this);
  monitor = new page2(this);
  setting = new page3(this);
 
//set color to each page for differentiation
  home->setStyleSheet("background-color: red");
monitor->setStyleSheet("background-color: blue");
setting->setStyleSheet("background-color: green");

//2nd- create new stackedwidget
 stackedpages = new QStackedWidget(this); 

//3rd
    stackedpages->addWidget(home);
    stackedpages->addWidget(monitor);
    stackedpages->addWidget(setting);
  
     //4th- a new layout to put in all 3 the pages
     ctrlayout = new QHBoxLayout(centralWidget()); // <---- is this correct?? 
     ctrlayout->addWidget(stackedpages);
     ui->centralWidget->setLayout(ctrlayout);
    // this->setCentralWidget(stackedpages);

   //stackedpages->setCurrentWidget(home);
    stackedpages->setCurrentIndex(2); // set default page (green color)


//------------buttons-------------------
    buttonwidget = new QWidget(this); 
    buttonwidget->setStyleSheet("background-color: black");

    B1 = new QPushButton(this);         // created a button   o
    B2 = new QPushButton(this);        // created a button   o
    B3 = new QPushButton(this);       // created a button   o
    B4 = new QPushButton(this);      // created a button   o
    B5 = new QPushButton(this);     // created a button   o
    B6 = new QPushButton(this);

    B1->setStyleSheet("background-color: white");
    B2->setStyleSheet("background-color: white");
    B3->setStyleSheet("background-color: white");
    B4->setStyleSheet("background-color: white");
    B5->setStyleSheet("background-color: white");
    B6->setStyleSheet("background-color: white");


    B1->setText(tr("B1"));
    B2->setText(tr("B2"));
    B3->setText(tr("B3"));
    B4->setText(tr("B4"));
    B5->setText(tr("B5"));
    B6->setText(tr("EXIT"));

    //3rd create a layout to arrange the buttons on it
    blayout = new QHBoxLayout(buttonwidget);   //create a layout {  } to put all above 
                                                                                           //inside and arrange it

      //4th
     blayout->addWidget(B1);
     blayout->addWidget(B2);
     blayout->addWidget(B3);
     blayout->addWidget(B4);
     blayout->addWidget(B5);
     blayout->addWidget(B6);

      buttonwidget->setLayout(blayout);

       //setCentralWidget(buttonwidget);
       setMenuWidget(buttonwidget);   //

}

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

ok my question is does the index follow the sequence of how i add the pages, as per that page1 is index 0, page2 index 1, page3 index 3....

anyway just with above code i expected the output screen of the centralwidget would display the setting page which will be green color. but the stackedwidget pages is not shown and the centralWidget background color is shown which white color.

i expected a green color shown(page 3 color) and not white (centralWidget color) as in the pic.

suppose the idea is as i clicked a button the corresponding page will be loaded, but i not yet implement the buttons, but before that, atleast for above code i expected to see page3@settings page loaded in green color?? but it didnt...looked like my stacked pages object not inserted into the central widget at all or wat wrong im doing here as for the buttons i follow similar steps and it turn out as expected like in the pic.

i thought i just need to create

1. a new Qstackedwidget
2. create the pages
3. add the pages
4. create a layout for the pages
5. set the layout into centralWidget ( centralwidget already created by the UI designer)
6. set a index to display the default widget..

[SGaist]

Hi,

Do you really want to mix Designer and code ?

[mrjj]

Hi
just as a note
if i run your code without the button part, i do get the expected result:

[VikramSamy]

@SGaist said in implementing Qstackedwidget programatically:

Hi,

Do you really want to mix Designer and code ?

as your have ask this question....thats what im confused too... is it QT is designed in a way that we can mix designer & code?? or we have to pick either one?? i believe my problems were because when i started a new project,it is basically started as a designer files, but i started working on it programatically and not use the ui designer.

[mrjj]

@VikramSamy
The is really no difference. when you use a UI files, c++ code is generated and run in setupUI()
so no magic going on.
Its 100% like you did it yourself in code.
but its silly to draw half in UI and add rest in code unless its something
Designer cant handle.
Often u design the layout and add data in code.
Or both in code.

[VikramSamy]

@mrjj said in implementing Qstackedwidget programatically:

Hi
just as a note
if i run your code without the button part, i do get the expected result:

anyway after i modifying my coding and add the button functions finally i can index the pages accordingly...but i didn't get a full screen green color pages as like u.

anyway my new code and the code posted here previously both also worked but in my case i only could see the page pointed by the stackwidget index , after i add a new label (pagename) on the page class as below, without it, the page seems like not existence, the code i add is below, i only show page3 here:-

#include "page3.h"
#include "ui_page3.h"

page3::page3(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::page3)
{
    ui->setupUi(this);
   pagename = new QLabel (this);  //need add this line
   pagename->setText("page3");   //

}

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

then i could see this:-

anyway il paste my overall code here , its working and can index the pages but the pages are small andnot fullscreen like your screenshot, i added showfullscreen command but it didnt worked too:-

#include "mainwindow.h"
#include "ui_mainwindow.h"


//-------------CREATE  PAGES-------

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow) // this the mainwindow [m]
{
     ui->setupUi(this);
    //start my user code:
     ui->statusBar->setStyleSheet("background-color: gold");
     ui->centralWidget->setStyleSheet("background-color: white");

   //1st create a stack & style to differentiate it
   //stackedpages is a child of central widget
   stackedpages = new QStackedWidget(ui->centralWidget);
   stackedpages->setStyleSheet("background-color: white");

//2nd - create instances of page and add into stackeWidget
//page becomes child of stackedpages
    home = new Page1(stackedpages);
    monitor = new page2(stackedpages);
    setting = new page3(stackedpages);

   home->setStyleSheet("background-color: red");
   monitor->setStyleSheet("background-color: blue");
   setting->setStyleSheet("background-color: green");

//home,monitor,setting become child of stackedpages
   stackedpages->addWidget(home); //0    
   stackedpages->addWidget(monitor); //1
   stackedpages->addWidget(setting);//2

   //2nd
   stacklayout = new QHBoxLayout(ui->centralWidget);
   stacklayout->addWidget(stackedpages);

   //stacklayout = new QHBoxLayout(ui->centralWidget);
   //stackedpages->setLayout(stacklayout);
    ui->centralWidget->setLayout(stacklayout);


    stackedpages->setCurrentIndex(2);
   // setCentralWidget(stackedpages);


    //---button implementations----

   /*1st:- create the widget and add the buttons..
     (new) instiating a class&make it as object,
     (this) passing the current object as a
      parameter to Qpushbutton class*/

    //this buttonwidget will be inside main window,child of mainwindow
    buttonwidget = new QWidget();
    buttonwidget->setStyleSheet("background-color: black");

    //2nd created a button & style it
    B1 = new QPushButton();
    B2 = new QPushButton();
    B3 = new QPushButton();
    B4 = new QPushButton();
    B5 = new QPushButton();
    B6 = new QPushButton();

    B1->setStyleSheet("background-color: white");
    B2->setStyleSheet("background-color: white");
    B3->setStyleSheet("background-color: white");
    B4->setStyleSheet("background-color: white");
    B5->setStyleSheet("background-color: white");
    B6->setStyleSheet("background-color: white");
    B1->setText(tr("B1"));
    B2->setText(tr("B2"));
    B3->setText(tr("B3"));
    B4->setText(tr("B4"));
    B5->setText(tr("B5"));
    B6->setText(tr("EXIT"));

    //3rd-layout for autoarrange
    blayout = new QHBoxLayout(buttonwidget);

   
    //4th,arrange all button in blayout, button now child of blayout
      blayout->addWidget(B1);
      blayout->addWidget(B2);
      blayout->addWidget(B3);
      blayout->addWidget(B4);
      blayout->addWidget(B5);
      blayout->addWidget(B6);

// all become child of buttonwidget
      buttonwidget->setLayout(blayout); 

    //5th establish communications
      connect(B1,SIGNAL(clicked(bool)),SLOT(B1_clicked()));
      connect(B2,SIGNAL(clicked(bool)),SLOT(B2_clicked()));
      connect(B3,SIGNAL(clicked(bool)),SLOT(B3_clicked()));

     /*as designer ui has already hv menuwidget
      as child of mainwindows,i simply add button
       widget into menuwidget & try*/

     setMenuWidget(buttonwidget);

}

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

void MainWindow::B1_clicked()
{
stackedpages->setCurrentIndex(0);

//ui->centralWidget->setStyleSheet("background-color: red");

}
void MainWindow::B2_clicked()
{
stackedpages->setCurrentIndex(1);
//ui->centralWidget->setStyleSheet("background-color: green");
}
void MainWindow::B3_clicked()
{
stackedpages->setCurrentIndex(2);
//ui->centralWidget->setStyleSheet("background-color: blue");
}

with all the codes i can get the same output as i posted above screenshot for the remaining pages and i can change the pages accordingly by clicking b1 b2 and b3.

and my question is why u can get a 'full screen green page widget' although i use the same code, and i still also need to create a label on the page class files if not i cant see the page being indexed by the buttons.

the UI CentralWidget which in white is still visible and pages i create is shown just as a small label with the given background color.

[mrjj]

it seems like your "page" do not contain layout so
the label is just shown in small size ?

[VikramSamy]

@mrjj said in implementing Qstackedwidget programatically:

it seems like your "page" do not contain layout so
the label is just shown in small size ?

the snippet below from my above overall code , i set the layout like this

//2nd
   stacklayout = new QHBoxLayout(ui->centralWidget);
   stacklayout->addWidget(stackedpages);
   ui->centralWidget->setLayout(stacklayout);

this should be ok?? or i still need to create a layout in the page3 files class??

[mrjj]

@VikramSamy
well if the pages are the content it should be fine.
I mean if u dont add more widgets to "home"
it should be ok.
since u seems to put stackedpages in layout.

But you seem to do
Page3::page3(QWidget *parent) :
QWidget(parent),
ui(new Ui::page3)
{
ui->setupUi(this);
pagename = new QLabel (this); //need add this line

and then pagename will not auto scale as its not in layout.
But page 3 has UI files. why dont u just add it there ?

The whole excise is just to learn to do it by code ?

[VikramSamy]

@mrjj said in implementing Qstackedwidget programatically:

@VikramSamy
well if the pages are the content it should be fine.
I mean if u dont add more widgets to "home"
it should be ok.
since u seems to put stackedpages in layout.

But you seem to do
Page3::page3(QWidget *parent) :
QWidget(parent),
ui(new Ui::page3)
{
ui->setupUi(this);
pagename = new QLabel (this); //need add this line

and then pagename will not auto scale as its not in layout.
But page 3 has UI files. why dont u just add it there ?

The whole excise is just to learn to do it by code ?

when i first created the project it started using QT designer ,
but my actual plan is to do it by code to learn the concepts....

anyway il try add the labels into the layout and see the results.

so from what u say previously, basically we can use UI to do the layouts and then add other codes programatically....or just pick 1 way and do it.

[mrjj]

@VikramSamy
yep. just see inside ui->setupUi(this);
I also sometimes construct some nested layout and then take the code
and reuse.
Also notice you can use http://doc.qt.io/qt-5/quiloader.html
for very dynamic ui usage.