Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Create a page based UI with QStackedWidget and QToolbar

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (based on QWidget) is deprecated.

This example shows how to create a page based user interface, this interface style is common in many applications of devices like the iPhone. This example doesn't shows how to add animated transitions to the page changes. See the Extending QStackedWidget for sliding page animations in Qt article if you are interested in add an sliding animated transition between the page changes.

Article Metadata
Created: mkfnx (13 Oct 2010)
Last edited: hamishwillee (11 Oct 2012)


Source Code

This section shows and describe the code of the example. A complete code example can be downloaded from here.

The Page class

The page class represents a page of the application. It's only a simple example of how a page could be. In this particular example the page only contains one label for the title, one label to show an image an one label for the contents of the page, but since the Page class inherits QWidget it can be as complex as any other widget or window.

Page Class Definition

#ifndef PAGE_H
#define PAGE_H
#include <QWidget>
#include <QString>
class QLabel;
class Page : public QWidget
explicit Page(const QString &title, const QString &content, const QString &imagePath, QWidget *parent = 0);
public slots:
QLabel *titleLabel;
QLabel *contentLabel;
QLabel *imageLabel;
#endif // PAGE_H

Page Class Implementation

#include "page.h"
#include <QLabel>
#include <QPixmap>
#include <QVBoxLayout>
Page::Page(const QString &title, const QString &content, const QString &imagePath, QWidget *parent) :
//Layout for organizing the widgets of the page
QVBoxLayout *mainLayout = new QVBoxLayout(this);
//Labels with the content of the page
titleLabel = new QLabel(title, this);
contentLabel = new QLabel(content, this);
imageLabel = new QLabel(this);
//Set a bigger font for the title
titleLabel->setFont(QFont("Sans-Serif", 15));
//Set the pixmap for the image
//Tell the content label to expand vertically and horizontally to all the space available
//Useful for device rotation
contentLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
//Add the content widgets to the main layout

MainWindow Class Definition

The MainWindow class inherits QMainWindow it's composed by:

  • QStackedWidget: This is the central widget of the MainWindow class it can contain widgets of the Page class or any other QWidget subclass
  • QToolbar: It's positioned at the bottom of the screen and contains the widgets to change between pages.

This class uses a QSignalMapper to map the value of a widget in the toolbar with a page on the central widget.

#include <QtGui/QMainWindow>
class Page;
class QStackedWidget;
class QToolButton;
class MainWindow : public QMainWindow
MainWindow(QWidget *parent = 0);
QStackedWidget *pagesWidget;
QToolButton *homeButton;
QToolButton *page1Button;
QToolButton *page2Button;
Page *homePage;
Page *page1;
Page *page2;
#endif // MAINWINDOW_H

MainWinidow Class Implementation

#include "mainwindow.h"
#include "page.h"
#include <QHBoxLayout>
#include <QToolButton>
#include <QSignalMapper>
#include <QStackedWidget>
#include <QToolBar>
#include <QVBoxLayout>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
//Create toolbar
QToolBar *toolBar = new QToolBar(this);
//Create a QMapper to map the values of the tool buttons with the indexes of the stacked widget
QSignalMapper *mapper = new QSignalMapper(this);
//Create QStackedWidget used as central widget
pagesWidget = new QStackedWidget(this);
//Create QToolButton used to change between "pages" of the central widget
homeButton = new QToolButton(this);
page1Button = new QToolButton(this);
page2Button = new QToolButton(this);
//Create widgets of the custom class Page which would be used as pages
homePage = new Page(tr("Home Page"), tr("Welcome, this is the home page!"), "home.png", this);
page1 = new Page(tr("Page 1"), tr("This is the page 1"), "1.png", this);
page2 = new Page(tr("Page 2"), tr("This is the page 2"), "2.png", this);
//Set a descriptive icon for the toolbuttons
//Add a toolbar at the bottom of the screen and set fixed in that position
addToolBar(Qt::BottomToolBarArea, toolBar);
//Add pages to the central widget
//Add buttons to the toolbar
//Tell the toolbuttons that expand horizontally to all the available space in the screen
//Useful for screen rotation
homeButton->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
page1Button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
page2Button->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
//Connect the clicked signal with the QSignalMapper
connect(homeButton, SIGNAL(clicked()), mapper, SLOT(map()));
connect(page1Button, SIGNAL(clicked()), mapper, SLOT(map()));
connect(page2Button, SIGNAL(clicked()), mapper, SLOT(map()));
//Set a value for each button
mapper->setMapping(homeButton, 0);
mapper->setMapping(page1Button, 1);
mapper->setMapping(page2Button, 2);
//Connect the mapper to the central widget
//The mapper will set a value to each button and set that value to the central widget
connect(mapper, SIGNAL(mapped(int)), pagesWidget, SLOT(setCurrentIndex(int)));
//Set the stacked widget as the central widget of the main window

Main file

The main file is just the one that QtCreator automatically generates, it simply creates a QApplication and an object of the MainWindow class, shows the MainWindow and starts the application.


#include <QtGui/QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[])
QApplication a(argc, argv);
MainWindow w;
#if defined(Q_WS_S60)
return a.exec();


Home page in Simulator, portrait orientation Page 1 in Simulator, landscape orientation

This page was last modified on 11 October 2012, at 01:14.
136 page views in the last 30 days.