Qt Zelfstudie
Aan de slag met Qt

Opmerkingen

versies

Installatie en instellingen op Windows en Linux

Download Qt voor Linux Open Source-versie

Ga naar https://www.qt.io/download-open-source/ en klik op Nu downloaden, zorg ervoor dat u het Qt-installatieprogramma voor Linux downloadt.

Een bestand met de naam qt-unified-linux-x-online.run wordt gedownload en voeg vervolgens exec-machtiging toe

chmod +x qt-unified-linux-x-online.run

Vergeet niet om 'x' te wijzigen voor de daadwerkelijke versie van het installatieprogramma. Voer vervolgens het installatieprogramma uit

./qt-unified-linux-x-online.run

Download Qt voor Windows Open Source-versie

Ga naar https://www.qt.io/download-open-source/ . De volgende schermafbeelding toont de downloadpagina op Windows:

Wat u nu moet doen, hangt af van welke IDE u gaat gebruiken. Als u Qt Creator gaat gebruiken, dat is opgenomen in het installatieprogramma, klikt u op Nu downloaden en voert u het uitvoerbare bestand uit.

Als u Qt in Visual Studio gaat gebruiken, werkt normaal gesproken de knop Nu downloaden ook. Zorg ervoor dat het gedownloade bestand qt-opensource-windows-x86-msvc2015_64-xxxexe of qt-opensource-windows-x86-msvc2015_32-xxxexe heet (waarbij xxx de versie van Qt is, bijvoorbeeld 5.7.0). Als dat niet het geval is, klikt u op Alle downloads bekijken en selecteert u een van de eerste vier opties onder Windows Host.

Als je Qt in Code :: Blocks gaat gebruiken, klik dan op Alle downloads bekijken en selecteer Qt xxx voor Windows 32-bit (MinGW xxx, 1,2 GB) onder Windows Host.

Nadat u het juiste installatiebestand hebt gedownload, voert u het uitvoerbare bestand uit en volgt u de onderstaande instructies. Merk op dat u een beheerder moet zijn om Qt te installeren. Als u geen beheerder bent, kunt u hier verschillende alternatieve oplossingen vinden .

Installeer Qt in elk besturingssysteem

Nadat u Qt hebt gedownload en het installatieprogramma hebt geopend, is de installatieprocedure voor alle besturingssystemen hetzelfde, hoewel de schermafbeeldingen er misschien iets anders uit kunnen zien. De schermafbeeldingen hier zijn afkomstig van Linux.

Log in met een bestaand Qt-account of maak een nieuw account:

Selecteer een pad om de Qt-bibliotheken en hulpmiddelen te installeren

Selecteer de bibliotheekversie en de gewenste functies

Nadat het downloaden is voltooid en de installatie is voltooid, gaat u naar de Qt-installatiemap en start u Qt Creator of voert u het rechtstreeks uit vanaf de opdrachtregel.

Hallo Wereld

In dit voorbeeld maken en tonen we eenvoudig een drukknop in een raamkozijn op het bureaublad. De drukknop heeft het label Hello world!

Dit vertegenwoordigt het eenvoudigst mogelijke Qt-programma.

Allereerst hebben we een projectbestand nodig:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp

• QT wordt gebruikt om aan te geven welke bibliotheken (Qt-modules) in dit project worden gebruikt. Omdat onze eerste app een kleine GUI is, hebben we QtCore en QtGui nodig. Omdat Qt5 QtWidgets van QtGui scheidt, moeten we een greaterThan regel toevoegen om het te compileren met Qt5.
• TARGET is de naam van de app of de bibliotheek.
• TEMPLATE beschrijft het te bouwen type. Het kan een applicatie (app), een bibliotheek (lib) zijn, of gewoon subdirectories (subdirs).
• SOURCES is een lijst met broncodebestanden die kunnen worden gebruikt bij het bouwen van het project.

We hebben ook de main.cpp nodig die een Qt-toepassing bevat:

main.cpp

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button ("Hello world!");
    button.show();

    return a.exec(); // .exec starts QApplication and related GUI, this line starts 'event loop'    
}

• QApplication-object. Dit object beheert toepassingsbrede bronnen en is nodig om elk Qt-programma met een GUI uit te voeren. Het heeft argv en args nodig omdat Qt enkele commandoregelargumenten accepteert. Bij het aanroepen van a.exec() de Qt-gebeurtenislus gestart.
• QPushButton-object. De drukknop met het label Hello world! . De volgende regel, button.show() , toont de drukknop op het scherm in een eigen raamkozijn.

Ten slotte, om de toepassing uit te voeren, opent u een opdrachtprompt en voert u de map in waarin u het .cpp-bestand van het programma hebt. Typ de volgende shell-opdrachten om het programma te bouwen.

qmake -project
qmake
make

Basistoepassing met QtCreator en QtDesigner

QtCreator is op dit moment de beste tool om een Qt-applicatie te maken. In dit voorbeeld zullen we zien hoe u een eenvoudige Qt-toepassing kunt maken die een knop beheert en tekst schrijft.

Om een nieuwe applicatie te maken, klik op Bestand-> Nieuw bestand of project:

Kies vervolgens de Projecten> Toepassing-> Qt Widgets Toepassing

Vervolgens kunt u de naam en het pad van uw project kiezen:

Vervolgens kunt u de kits kiezen die u gaat gebruiken. Als u geen kit hebt, maakt QtCreator een kit met uw Qt-versie en de hoofdcompiler van uw computer. Als u geen compiler hebt, kunt u er een installeren. Op Windows: installeer Visual Studio. Op Linux / Mac: installeer g ++ of clang ++.

Vervolgens kunt u de naam van uw hoofdvenster-klasse, de overgenomen klasse, de naam van het bestand dat overeenkomt met uw hoofdvenster-klasse kiezen. Als je Qt leert of test, hoef je ze niet echt te veranderen.

De laatste stap kan zijn om een subproject van dit project te kiezen en een versiebeheer toe te voegen zoals git en svn. Nogmaals, als het alleen voor tests is, hoeft u ze niet te wijzigen.

Klik vervolgens op de knop Voltooien. Nu zou je hier moeten zijn:

Dit is de basis van uw applicatie. als u het nu uitvoert door op Build-> Run of ctrl + R (standaard) te klikken, ziet u een leeg venster.

Nu zullen we een tekst en een knop toevoegen. om dat te doen, zullen we Qt Designer gebruiken. Dubbelklik op mainwindow.ui Dus nu zou u moeten zien: (als dit niet het geval is en u ziet een xml-bestand, klik dan links op de knop Design)

Hier Qt Designer! Lijkt nogal ingewikkeld. Maar als je er eenmaal aan gewend bent, is het echt geweldig. We zullen wat tekst en een knop toevoegen. Aan de linkerkant is er de lijst met items. U kunt op één klikken en de objecten slepen en neerzetten. Klik op de drukknop en laat deze in het venster vallen. Zoek vervolgens op het label en doe hetzelfde (linksboven ziet u een filter waarin u het gewenste object kunt schrijven).

Je zou nu zoiets moeten hebben:

Door op het object te dubbelklikken, kunt u de tekst erop wijzigen. Of u ziet rechtsonder de eigenschappen van het object dat u nu bent en vindt de teksteigenschap. Hier kunt u ook de naam wijzigen.

Als u nu opslaat en uitvoert (klik beter op de knop Bewerken en vervolgens opnieuw opslaan om er zeker van te zijn dat uw wijzigingen zijn opgeslagen), krijgt u:

Huh? Waarom zijn mijn label en knop zo als ik ren? Dit komt omdat er geen indeling is in ons centrale object. Trouwens, als je het formaat van je hoofdvenster wijzigt, kun je zien dat het object zijn plaats behoudt. Dus om het te repareren zullen we een lay-out toevoegen. Laten we zeggen een verticale lay-out. Sleep dus een verticale lay-out uit de objectenlijst aan de linkerkant. Nu zou je moeten zien:

Een zwevende lay-out.

Klik nu met de rechtermuisknop op het hoofdvenster, overal behalve op het label en de knop. c \ Klik op Lay-out-> Lay-out verticaal. Nu zou u moeten zien dat uw objecten verticaal in uw venster zijn uitgelijnd. Verplaats nu (met slepen en neerzetten) uw label en knop in de lay-out. nu zou u moeten krijgen:

In je ontwerper. En als u uw applicatie uitvoert:

Hier ziet u uw toepassing met het label en de knop. En als u het formaat van uw venster wijzigt, wordt het formaat van het label en de knop ook gewijzigd.

Maar onze knop doet nog steeds niets. We kunnen het op 2 verschillende manieren veranderen. De eerste is om de knop te verbinden met een methode die we hebben gemaakt. We kunnen het doen met de methode naam connect. Dus laten we teruggaan naar onze code en ga naar mainwindow.cpp voeg nu toe:

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));

In de constructor van uw MainWindow NA de ui->setupUI(this); die de ui initialiseren.

Vervolgens kunnen we MainWindow :: whenButtonIsClicked () maken in onze .cpp-klasse die de tekst van het label als volgt zou kunnen wijzigen:

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

En in ons hoofdvenster moeten we toevoegen:

public slots:
    void whenButtonIsClicked();

Openbare slots betekenen dat deze methode kan worden opgeroepen wanneer een signaal wordt ontvangen. verbinden koppel het signaal wanneer we op de knop klikken en een methode om op te roepen.

Dus als we onze applicatie uitvoeren en op de knop klikken, krijgen we:

Wat betekent dat onze connect werkt. Maar met Qt Designer hebben we een nog eenvoudigere manier om het te doen. Als u de andere manier wilt doen, verwijdert u de verbinding om de knop los te koppelen (omdat we deze anders verbinden), gaat u terug naar mainwindow.ui en klikt u met de rechtermuisknop op de knop. Klik op Ga naar slot ..., klik op () en druk op ok.

Dan moet u naar deze functie worden verplaatst:

void MainWindow::on_pushButton_clicked()
{
}

Dit is de functie die wordt opgeroepen wanneer u op de knop klikt. Dus je kunt toevoegen

ui->label->setText("it's even easier !");

Erin. Ga naar het hoofdvenster. H om de wijziging op te slaan (wanneer u een 'go to slot' doet, creëert het een methode die is gekoppeld aan het gevraagde signaal. Het definieert de functie in het .h maar slaat het niet op. U moet dus gaan naar het bestand en sla het op).

En nu wanneer u uw toepassing uitvoert en op de knop drukt, ziet u het nieuwe bericht (als u het oude nog steeds ziet, is dat u de verbinding niet hebt verwijderd).

We kunnen ook een int, double, enz. Aan ons label toevoegen dankzij de QVariant , een geweldige klasse die veel dingen in veel andere dingen kan omzetten. Dus links voeg een int toe die groter wordt als we op de knop drukken.

Dus de .h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H

De .cpp:

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

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

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

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}

En nu kunnen we opslaan en opnieuw uitvoeren. Elke keer dat u op de knop klikt, wordt "het is nog eenvoudiger!" Weergegeven met de waarde _smallCounter. Dus je zou zoiets moeten hebben als:

Deze tutorial is klaar. Als u meer wilt weten over Qt, laten we de andere voorbeelden en documentatie van Qt bekijken in de StackOverflow-documentatie of de Qt-documentatie