Qt Tutorial
Iniziare con Qt

Osservazioni

Versioni

Installazione e installazione su Windows e Linux

Scarica Qt per Linux Open Source Version

Vai a https://www.qt.io/download-open-source/ e fai clic su Scarica ora, assicurati di scaricare il programma di installazione Qt per Linux.

Un file con il nome qt-unified-linux-x-online.run verrà scaricato, quindi aggiungere il permesso exec

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

Ricordarsi di cambiare "x" per la versione attuale del programma di installazione. Quindi esegui il programma di installazione

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

Scarica Qt per Windows Open Source Version

Vai a https://www.qt.io/download-open-source/ . La seguente schermata mostra la pagina di download su Windows:

Quello che dovresti fare ora dipende da quale IDE intendi utilizzare. Se si intende utilizzare Qt Creator, incluso nel programma di installazione, fare clic su Scarica ora ed eseguire l'eseguibile.

Se si utilizza Qt in Visual Studio, normalmente anche il pulsante Scarica ora dovrebbe funzionare. Assicurati che il file scaricato si chiami qt-opensource-windows-x86-msvc2015_64-xxxexe o qt-opensource-windows-x86-msvc2015_32-xxxexe (dove xxx è la versione di Qt, ad esempio 5.7.0). In caso contrario, fai clic su Visualizza tutti i download e seleziona una delle prime quattro opzioni in Windows Host.

Se si utilizza Qt in Code :: Blocks, fare clic su Visualizza tutti i download e selezionare Qt xxx per Windows a 32 bit (MinGW xxx, 1,2 GB) in Host Windows.

Una volta scaricato il file di installazione appropriato, esegui il file eseguibile e segui le istruzioni di seguito. Nota che devi essere un amministratore per installare Qt. Se non sei un amministratore, puoi trovare diverse soluzioni alternative qui .

Installa Qt in qualsiasi sistema operativo

Una volta scaricato Qt e aperto il programma di installazione, la procedura di installazione è la stessa per tutti i sistemi operativi, anche se gli screenshot potrebbero sembrare un po 'diversi. Gli screenshot qui forniti sono di Linux.

Accedi con un account Qt esistente o creane uno nuovo:

Selezionare un percorso per installare le librerie e gli strumenti Qt

Seleziona la versione della libreria e le funzionalità che desideri

Dopo aver scaricato e completata l'installazione, accedere alla directory di installazione Qt e avviare Qt Creator o eseguirlo direttamente dalla riga di comando.

Ciao mondo

In questo esempio, semplicemente creiamo e mostriamo un pulsante in una cornice della finestra sul desktop. Il pulsante avrà l'etichetta Hello world!

Questo rappresenta il programma Qt più semplice possibile.

Prima di tutto abbiamo bisogno di un file di progetto:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp

• QT viene utilizzato per indicare quali librerie (moduli Qt) vengono utilizzate in questo progetto. Poiché la nostra prima app è una piccola GUI, avremo bisogno di QtCore e QtGui. Essendo Qt5 separato da QtWidgets da QtGui, abbiamo bisogno di aggiungere greaterThan riga più grande per compilarlo con Qt5.
• TARGET è il nome dell'app o della biblioteca.
• TEMPLATE descrive il tipo da costruire. Può essere un'applicazione (app), una libreria (lib) o semplicemente sottodirectory (sottodirectory).
• SOURCES è un elenco di file di codice sorgente da utilizzare durante la creazione del progetto.

Abbiamo anche bisogno del main.cpp che contiene un'applicazione Qt:

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'    
}

• QApplicazione oggetto. Questo oggetto gestisce le risorse a livello di applicazione ed è necessario per eseguire qualsiasi programma Qt con una GUI. Ha bisogno di argv e arg perché Qt accetta alcuni argomenti della riga di comando. Quando si chiama a.exec() viene avviato il ciclo di eventi Qt.
• Oggetto QPushButton. Il pulsante con l'etichetta Hello world! . La riga successiva, button.show() , mostra il pulsante sullo schermo nella sua cornice della finestra.

Infine, per eseguire l'applicazione, apri un prompt dei comandi e inserisci la directory in cui è presente il file .cpp del programma. Digitare i seguenti comandi della shell per creare il programma.

qmake -project
qmake
make

Applicazione di base con QtCreator e QtDesigner

QtCreator è, al momento, lo strumento migliore per creare un'applicazione Qt. In questo esempio, vedremo come creare una semplice applicazione Qt che gestisca un pulsante e scriva del testo.

Per creare una nuova applicazione, fare clic su File-> Nuovo file o progetto:

Quindi scegli l'applicazione Progetti-> Applicazione-> Qt Widget

Quindi puoi scegliere il nome e il percorso del tuo progetto:

Successivamente, puoi scegliere i kit che utilizzerai. Se non hai alcun kit, QtCreator creerà un kit con la tua versione Qt e il compilatore principale del tuo computer. Se non hai alcun compilatore, puoi installarne uno. Su Windows: installa Visual Studio. Su Linux / Mac: installa g ++ o clang ++.

Quindi è possibile scegliere il nome della classe della finestra principale, la classe ereditata, il nome del file corrispondente alla classe della finestra principale. Se stai imparando o testando Qt, non hai davvero bisogno di cambiarli.

L'ultimo passaggio può essere quello di scegliere un sottoprogetto di questo progetto e aggiungere un controllo di versione come git e svn. Anche in questo caso, se è solo per i test, non è necessario modificarli.

Quindi fare clic sul pulsante Fine. Ora dovresti essere qui:

Questa è la base della tua applicazione. se lo esegui ora facendo clic su Build-> Esegui o ctrl + R (per impostazione predefinita) vedrai una finestra vuota.

Ora aggiungeremo un testo e un pulsante. per farlo, utilizzeremo Qt Designer. Fai doppio clic sul file mainwindow.ui Quindi ora dovresti vedere: (se no e vedi qualche file xml, clicca sul pulsante Design a sinistra)

Qui Designer Qt! Sembra abbastanza complicato. Ma una volta che ci si abitua, è davvero fantastico. Aggiungeremo del testo e un pulsante. A sinistra, c'è l'elenco degli articoli. È possibile fare clic su uno e trascinare e rilasciare gli oggetti. Fare clic sul pulsante Push e rilasciarlo nella finestra. Quindi cerca l'etichetta e fai lo stesso (hai un filtro in alto a sinistra dove puoi scrivere l'oggetto che stai cercando).

Dovresti avere qualcosa di simile ora:

Facendo doppio clic sull'oggetto, è possibile modificare il testo su di essi. Oppure puoi vedere in basso a destra le proprietà dell'oggetto che sei ora e trovare la proprietà del testo. Qui puoi anche cambiare il nome.

Ora se si salva ed è eseguito (meglio fare clic sul pulsante Modifica quindi salvare di nuovo per essere sicuri che le modifiche siano state salvate), si ottiene:

Eh? Perché la mia etichetta e il mio pulsante sono così quando corro? È perché non c'è un layout nel nostro oggetto centrale. A proposito, se ridimensionate la finestra principale, potete vedere che l'oggetto mantiene il loro posto. Quindi per risolverlo aggiungeremo un layout. Diciamo un layout verticale. Quindi trascina e rilascia un layout verticale dall'elenco degli oggetti a sinistra. Ora dovresti vedere:

Un layout fluttuante.

Quindi ora fai clic destro sulla finestra principale, ovunque tranne sull'etichetta e sul pulsante. c \ Fare clic su Lay out-> Lay Out Vertically. Ora dovresti vedere che i tuoi oggetti sono allineati verticalmente nella tua finestra. Quindi ora sposta (con trascina e rilascia di nuovo) l'etichetta e il pulsante nel layout. ora dovresti ottenere:

Nel tuo designer. E se esegui l'applicazione:

Qui puoi vedere la tua applicazione con l'etichetta e il pulsante. E se ridimensionate la finestra, anche l'etichetta e il pulsante si ridimensionano.

Ma il nostro pulsante non sta ancora facendo nulla. Possiamo cambiarlo in 2 modi diversi. Il primo è connettere il pulsante con un metodo che abbiamo creato. Possiamo farlo con il nome del metodo connect. Quindi torniamo al nostro codice e andiamo a mainwindow.cpp ora aggiungiamo:

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

Nel costruttore della tua MainWindow DOPO ui->setupUI(this); che inizializza l'interfaccia utente.

Quindi possiamo creare MainWindow :: whenButtonIsClicked () nella nostra classe .cpp che potrebbe cambiare il testo dell'etichetta in questo modo:

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

E nella nostra mainwindow.h, dobbiamo aggiungere:

public slots:
    void whenButtonIsClicked();

Le aree pubbliche indicano che questo metodo può essere chiamato quando viene ricevuto un segnale. collegare collegare il segnale quando si fa clic sul pulsante e un metodo per chiamare.

Quindi ora se eseguiamo la nostra applicazione e clicchiamo sul pulsante, otteniamo:

Il che significa che la nostra connessione funziona. Ma con Qt Designer abbiamo un modo ancora più semplice per farlo. Se vuoi fare l'altro modo, rimuovi il collegamento per scollegare il pulsante (poiché lo collegheremo in modo diverso), torna a mainwindow.ui e fai clic con il pulsante destro del mouse sul pulsante. Clicca su Vai allo slot ..., seleziona cliccato () e premi ok.

Quindi dovresti essere spostato su questa funzione:

void MainWindow::on_pushButton_clicked()
{
}

Questa è la funzione che verrà chiamata quando si fa clic sul pulsante. Quindi puoi aggiungere

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

Dentro. Vai al mainwindow.h per salvare la modifica (quando fai un passaggio allo slot, crea un metodo collegato al segnale che hai richiesto. Definisce la funzione nel file .h ma non la salva. al file e salvarlo).

E ora quando esegui la tua applicazione e premi il pulsante, puoi vedere il nuovo messaggio (se vedi ancora quello vecchio, è che non hai rimosso la connessione).

Possiamo anche aggiungere un int, double, etc nella nostra etichetta grazie a QVariant che è una classe fantastica che può convertire molte cose in molte altre cose. Così a sinistra aggiungi un int che aumenta quando premiamo il pulsante.

Quindi il .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

Il .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());
}

E ora, possiamo salvare e correre di nuovo. Ogni volta che fai clic sul pulsante, mostra "è ancora più semplice!" Con il valore di _smallCounter. Quindi dovresti avere qualcosa del tipo:

Questo tutorial è fatto. Se vuoi saperne di più su Qt, vediamo gli altri esempi e la documentazione di Qt sulla Documentazione StackOverflow o sulla documentazione Qt