Basic Qt Programming Tutorial: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(<pre> → <syntaxhighlight lang="cpp">)
 
(13 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:HowTo]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::General]]
[[Category:Tutorial]]


'''English''' [[Basic_Qt_Programming_Tutorial_SimplifiedChinese|简体中文]] [[Basic_Qt_Programming_Tutorial_Persian|فارسی]] [[Temel_Qt_Programlama_Egitimi|Türkçe]] [[Basic_Qt_Programming_Tutorial_Spanish|Español]]
{{LangSwitch}}


= Introduction =
== Introduction ==


This tutorial will explain in detail how to take your first steps in programming with Qt using the Qt Creator integrated development environment (IDE).
This tutorial will explain in detail how to take your first steps in programming with Qt using the Qt Creator integrated development environment (IDE).
Line 15: Line 13:
We will start off simple and build up in complexity as you get more familiar with the widgets and other facilities at your disposal.
We will start off simple and build up in complexity as you get more familiar with the widgets and other facilities at your disposal.


So, grab yourself a copy of the Qt SDK or if you are on Linux the system-provided copy of Qt and a compiler and let's get started!
So, let's get started!
 
== Before you start: Download and install Qt and Qt Creator ==
Grab yourself a copy of the Qt SDK or if you are on Linux the system-provided copy of Qt and a compiler.
 
If you are starting off you might want to consider the open source LGPL version.
 
The open source downloads can be found on the [http://www.qt.io/ qt.io] website [http://www.qt.io/download-open-source/ here].
 
For commercial use consider getting a Qt Commercial [http://www.qt.io/qt-licensing-terms/ license]. 


== Baby steps: Creating a new project ==
== Baby steps: Creating a new project ==
Line 21: Line 28:
Let's try making a trivial application that has a single window that shows a QLabel and a QLineEdit. To do this follow these simple steps:
Let's try making a trivial application that has a single window that shows a QLabel and a QLineEdit. To do this follow these simple steps:


# Start up Qt Creator.
Start up Qt Creator:
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152033-f24040e3.jpg|Start Qt-Creator]]":http://gallery.theharmers.co.uk/picture.php?/22/category/7
 
# Go to File->"New File or Project…" menu entry.
[[File:Qtcreator-001.png|600px]]
# Choose Qt Gui Application and choose a name for it.
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152034-ea9bb58a.jpg|Select project type]]":http://gallery.theharmers.co.uk/picture.php?/23/category/7
Go to ''File'' &mdash; ''New File or Project'' menu entry
# Enter a project name, "qt-tutorial-01", say.
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152034-8dabd337.jpg|Choose project name]]":http://gallery.theharmers.co.uk/picture.php?/24/category/7
Choose Qt Gui Application and choose a name for it:
# Select one or more versions of Qt to target. A desktop build is fine for this tutorial.
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152034-35f9e7cb.jpg|Choose Qt build to target]]":http://gallery.theharmers.co.uk/picture.php?/25/category/7
[[File:Qtcreator-002.png|600px]]
# Select the base class to be QWidget (leave the class name as Widget which is the default).
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152034-26f92911.jpg|Select project generation options]]":http://gallery.theharmers.co.uk/picture.php?/26/category/7
Enter a project name, "qt-tutorial-01", say.
# Check project creation options on summary and click "Finish".
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503152034-95ce9f30.jpg|Check project summary]]":http://gallery.theharmers.co.uk/picture.php?/27/category/7
[[File:Qtcreator-003.png|600px]]
 
Select one or more versions of Qt to target. A desktop build is fine for this tutorial.
 
[[File:Qtcreator-004.png|600px]]
 
Select the base class to be QWidget (leave the class name as Widget which is the default).
 
[[File:Qtcreator-005.png|600px]]
 
Check project creation options on summary and click "Finish".
 
[[File:Qtcreator-006.png|600px]]


The above will create you a simple project consisting of four files:
The above will create you a simple project consisting of four files:
Line 46: Line 65:
We will edit the widget.ui file first so:
We will edit the widget.ui file first so:


# Click on that and designer will switch to design mode and open up the file. You should see a blank widget. Now do this:
Click on that and designer will switch to design mode and open up the file. You should see a blank widget. Now do this:
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-af1ea190.jpg|Open designer]]":http://gallery.theharmers.co.uk/picture.php?/28/category/7
 
# Using the toolbox on the left, drag a Label onto the widget form
[[File:Qtcreator-007.png|600px]]
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-661b1ceb.jpg|Add label]]":http://gallery.theharmers.co.uk/picture.php?/29/category/7
 
# Do similarly for a Line Edit and place it to the right of the Label. The exact position is not important.
Using the toolbox on the left, drag a Label onto the widget form
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-8c16787b.jpg|Add line edit]]":http://gallery.theharmers.co.uk/picture.php?/30/category/7
 
# Click on the widget background so that both of your new widgets (the label and line edit) get deselected.
[[File:Qtcreator-008.png|600px]]
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-5084f96c.jpg|Select parent widget]]":http://gallery.theharmers.co.uk/picture.php?/31/category/7
 
# In the toolbar at the top click on the "Lay out Horizontally" button or press Ctrl-H to add all widgets to a horizontal layout. The layout will take care of resizing your widgets for you if the parent widget's size changes.
Do similarly for a Line Edit and place it to the right of the Label. The exact position is not important.
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-01e7e207.jpg|Apply horizontal layout]]":http://gallery.theharmers.co.uk/picture.php?/32/category/7
 
# Double click on the Label and it will switch to edit mode. Change the text to "My name is:"
[[File:Qtcreator-009.png|600px]]
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-4e8b7939.jpg|Change label text]]":http://gallery.theharmers.co.uk/picture.php?/33/category/7
 
# Press Ctrl-S to save the form.
Click on the widget background so that both of your new widgets (the label and line edit) get deselected.
# Click on the Edit mode button in the left hand panel of creator to switch back to the text editor. You will probably see the raw xml content of the UI file at this point. Just close it we are done with it for now.
 
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503154826-abad6378.jpg|Switch to Edit mode]]":http://gallery.theharmers.co.uk/picture.php?/34/category/7
[[File:Qtcreator-010.png|600px]]
 
In the toolbar at the top click on the "Lay out Horizontally" button or press Ctrl-H to add all widgets to a horizontal layout. The layout will take care of resizing your widgets for you if the parent widget's size changes.
 
[[File:Qtcreator-011.png|600px]]
 
Double click on the Label and it will switch to edit mode. Change the text to "My name is:"
 
[[File:Qtcreator-012.png|600px]]
 
Press Ctrl-S to save the form.
 
Click on the Edit mode button in the left hand panel of creator to switch back to the text editor. You will probably see the raw xml content of the UI file at this point. Just close it we are done with it for now.
 
[[File:Qtcreator-013.png|600px]]


Now open up the widget.h file and edit it so that it looks like this:
Now open up the widget.h file and edit it so that it looks like this:


<code>
<syntaxhighlight lang="cpp">
  #ifndef WIDGET_H
  #ifndef WIDGET_H
  #define WIDGET_H  
  #define WIDGET_H  
 
  #include <QWidget>
  #include <QWidget>
   
   
Line 81: Line 114:
   explicit Widget(QWidget *parent = 0);
   explicit Widget(QWidget *parent = 0);
   ~Widget();
   ~Widget();
 
  void setName(const QString &amp;name);
  void setName(const QString &name);
   QString name() const;
   QString name() const;
 
  private:
  private:
   Ui::Widget *ui;
   Ui::Widget *ui;
  };
  };
 
  #endif // WIDGET_H
  #endif // WIDGET_H
</code>
</syntaxhighlight>


Now edit the corresponding .cpp file to look like this:
Now edit the corresponding .cpp file to look like this:


<code>
<syntaxhighlight lang="cpp">
  #include "widget.h"
  #include "widget.h"
  #include "ui_widget.h"
  #include "ui_widget.h"
Line 109: Line 142:
   delete ui;
   delete ui;
  }
  }
 
  void Widget::setName(const QString &amp;name)
  void Widget::setName(const QString &name)
  {
  {
   ui->lineEdit->setText(name);
   ui->lineEdit->setText(name);
Line 119: Line 152:
   return ui->lineEdit->text();
   return ui->lineEdit->text();
  }
  }
</code>
</syntaxhighlight>


Finally edit main.cpp to this:
Finally edit main.cpp to this:


<code>
<syntaxhighlight lang="cpp">
  #include <QApplication>
  #include <QApplication>
  #include "widget.h"  
  #include "widget.h"  
   
   
  int main(int argc, char '''argv[])
  int main(int argc, char *argv[])
  {
  {
   QApplication a(argc, argv);
   QApplication a(argc, argv);
Line 138: Line 171:
   return a.exec();
   return a.exec();
  }
  }
</code>
</syntaxhighlight>


==Up and running: Building and running the application==
== Up and running: Building and running the application ==


Now build (Hammer icon in lower left or default shortcut of Ctrl-Shift-B) and run the application (green "play" icon in lower left corner). You will see some compiler messages go past in the "Compile Output" panel at the bottom whilst building.
Now build (Hammer icon in lower left or default shortcut of Ctrl-Shift-B) and run the application (green "play" icon in lower left corner). You will see some compiler messages go past in the "Compile Output" panel at the bottom whilst building.
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503160137-3e61f249.jpg|Compiling the project]]":http://gallery.theharmers.co.uk/picture.php?/35/category/7
 
[[File:Qtcreator-014.png|600px]]


This is what the application looks like when it is executed:
This is what the application looks like when it is executed:
"[[Image:http://gallery.theharmers.co.uk/upload/2011/05/03/thumbnail/TN-20110503160137-aac48922.jpg|The running application]]":http://gallery.theharmers.co.uk/picture.php?/36/category/7


As you can see the main() function is very simple. All we do is create a "QApplication":http://doc.qt.nokia.com/latest/qapplication.html and then a Widget (this is our custom widget that we layed out in designer and added custom behaviour to in code with the name() and setName() functions).
[[File:Qtcreator-015.png|600px]]


We then "just call":http://www.fixithere.net/sky-customer-service/ our custom setName function on the widget. This in turn gets a pointer to the "QLineEdit":http://doc.qt.nokia.com/latest/qlineedit.html widget that we placed on the form and calls the "setText()":http://doc.qt.nokia.com/latest/qlineedit.html#text-prop() function of QLineEdit.
As you can see the <tt>main()</tt> function is very simple. All we do is create a {{DocLink|QApplication}} and then a Widget (this is our custom widget that we layed out in designer and added custom behaviour to in code with the <tt>name()</tt> and <tt>setName()</tt> functions).


Finally we show the widget and enter the event loop by calling a.exec().
We then just call our custom setName function on the widget. This in turn gets a pointer to the {{DocLink|QLineEdit}} widget that we placed on the form and calls the {{DocLink|QLineEdit|text-prop|setText()}} function of QLineEdit.
 
Finally we show the widget and enter the event loop by calling <tt>a.exec()</tt>.


Once you understand how this simple app works then you can start adding some more bells and whistles like signal/slot connections.
Once you understand how this simple app works then you can start adding some more bells and whistles like signal/slot connections.
==See also==
''' [[Introduction_to_Qt_Quick_for_Cpp_developers|"Introduction to Qt Quick for C++ Developers"]]
''Note:'' The paper above is deprecated. Its content is now part of [[Introduction_to_Qt_Quick|"Introduction to Qt Quick"]].
* [[How_to_Use_QPushButton|"How to Use QPushButton"]]

Latest revision as of 23:31, 22 November 2022


En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

Introduction

This tutorial will explain in detail how to take your first steps in programming with Qt using the Qt Creator integrated development environment (IDE).

If you want to learn how to make powerful GUIs with all the latest fancy technologies, this is not the tutorial for you. This is firmly intended as a gentle introduction to help beginners get up and running without scaring them.

We will begin by creating a new Qt-based project and modifying the generated code to show a very simple graphical user interface (GUI). Once our basic application project is in place and running, we will go back and modify it to do some slightly useful things.

We will start off simple and build up in complexity as you get more familiar with the widgets and other facilities at your disposal.

So, let's get started!

Before you start: Download and install Qt and Qt Creator

Grab yourself a copy of the Qt SDK or if you are on Linux the system-provided copy of Qt and a compiler.

If you are starting off you might want to consider the open source LGPL version.

The open source downloads can be found on the qt.io website here.

For commercial use consider getting a Qt Commercial license.

Baby steps: Creating a new project

Let's try making a trivial application that has a single window that shows a QLabel and a QLineEdit. To do this follow these simple steps:

Start up Qt Creator:

Qtcreator-001.png

Go to FileNew File or Project menu entry

Choose Qt Gui Application and choose a name for it:

Qtcreator-002.png

Enter a project name, "qt-tutorial-01", say.

Qtcreator-003.png

Select one or more versions of Qt to target. A desktop build is fine for this tutorial.

Qtcreator-004.png

Select the base class to be QWidget (leave the class name as Widget which is the default).

Qtcreator-005.png

Check project creation options on summary and click "Finish".

Qtcreator-006.png

The above will create you a simple project consisting of four files:

  • main.cpp
  • widget.h
  • widget.cpp
  • widget.ui

Learning to crawl: Editing the project files

We will edit the widget.ui file first so:

Click on that and designer will switch to design mode and open up the file. You should see a blank widget. Now do this:

Qtcreator-007.png

Using the toolbox on the left, drag a Label onto the widget form

Qtcreator-008.png

Do similarly for a Line Edit and place it to the right of the Label. The exact position is not important.

Qtcreator-009.png

Click on the widget background so that both of your new widgets (the label and line edit) get deselected.

Qtcreator-010.png

In the toolbar at the top click on the "Lay out Horizontally" button or press Ctrl-H to add all widgets to a horizontal layout. The layout will take care of resizing your widgets for you if the parent widget's size changes.

Qtcreator-011.png

Double click on the Label and it will switch to edit mode. Change the text to "My name is:"

Qtcreator-012.png

Press Ctrl-S to save the form.

Click on the Edit mode button in the left hand panel of creator to switch back to the text editor. You will probably see the raw xml content of the UI file at this point. Just close it we are done with it for now.

Qtcreator-013.png

Now open up the widget.h file and edit it so that it looks like this:

 #ifndef WIDGET_H
 #define WIDGET_H 
 
 #include <QWidget>
 
 namespace Ui {
  class Widget;
 }
 
 class Widget : public QWidget
 {
  Q_OBJECT
 
 public:
  explicit Widget(QWidget *parent = 0);
  ~Widget();
 
 void setName(const QString &name);
  QString name() const;
 
 private:
  Ui::Widget *ui;
 };
 
 #endif // WIDGET_H

Now edit the corresponding .cpp file to look like this:

 #include "widget.h"
 #include "ui_widget.h"
 
 Widget::Widget(QWidget *parent) :
  QWidget(parent),
  ui(new Ui::Widget)
 {
  ui->setupUi(this);
 }
 
 Widget::~Widget()
 {
  delete ui;
 }
 
 void Widget::setName(const QString &name)
 {
  ui->lineEdit->setText(name);
 }
 
 QString Widget::name() const
 {
  return ui->lineEdit->text();
 }

Finally edit main.cpp to this:

 #include <QApplication>
 #include "widget.h" 
 
 int main(int argc, char *argv[])
 {
  QApplication a(argc, argv);
  Widget w;
 
  w.setName("Slim Shady");
 
  w.show();
 
  return a.exec();
 }

Up and running: Building and running the application

Now build (Hammer icon in lower left or default shortcut of Ctrl-Shift-B) and run the application (green "play" icon in lower left corner). You will see some compiler messages go past in the "Compile Output" panel at the bottom whilst building.

Qtcreator-014.png

This is what the application looks like when it is executed:

Qtcreator-015.png

As you can see the main() function is very simple. All we do is create a QApplication and then a Widget (this is our custom widget that we layed out in designer and added custom behaviour to in code with the name() and setName() functions).

We then just call our custom setName function on the widget. This in turn gets a pointer to the QLineEdit widget that we placed on the form and calls the setText() function of QLineEdit.

Finally we show the widget and enter the event loop by calling a.exec().

Once you understand how this simple app works then you can start adding some more bells and whistles like signal/slot connections.