logo

TechCodeview

Introduzione alla programmazione GUI in C++

In C++, la programmazione dell'interfaccia utente grafica (GUI) è importante nello sviluppo di applicazioni moderne in cui gli utenti hanno una bella grafica con cui lavorare. Sebbene il C++ sia comunemente collegato alla programmazione di sistema e alla scrittura di giochi, può essere un'ottima alternativa alla scrittura di GUI. In questo articolo discuteremo della programmazione GUI in C++, di alcune librerie GUI popolari per C++ e di come creare un'applicazione GUI di base in C++.

Prerequisiti: Fondamenti di C++, OOP C++, alcune librerie GUI.



Cos'è la GUI (interfaccia utente grafica)?

L'interfaccia utente grafica (GUI) è un'interfaccia dell'applicazione visiva fornita utilizzando elementi grafici come finestre, caselle di testo e pulsanti attraverso i quali gli utenti possono comunicare con il software. La GUI offre una piattaforma interattiva e facile da usare rispetto all'interfaccia a riga di comando (CLI) poiché gli utenti possono utilizzare il mouse o altri dispositivi di input come un touchscreen, ecc. senza fare affidamento solo sulla tastiera.

Concetti principali di programmazione GUI

Un'interfaccia utente grafica (GUI) implica la progettazione di finestre, finestre di dialogo, pulsanti, ecc., che sono tutti componenti interattivi dell'interfaccia utente. Quindi controlliamo questi widget utilizzando gestori di eventi come onClick, onHover, ecc.

I concetti principali della programmazione GUI sono:



Widget

Un'interfaccia utente grafica (GUI) è composta da widget. Questi includono, ad esempio, pulsanti, caselle di testo, etichette, ecc. Le proprietà e i comportamenti di ciascun widget possono essere personalizzati in base alle esigenze specifiche di un'applicazione. Generalmente in una libreria GUI sono presenti i seguenti widget:

  1. Finestra: Una cornice di finestra di livello superiore che ospita altri widget al suo interno.
  2. Pulsante: Un pulsante cliccabile a cui è associato un evento al clic.
  3. Etichetta: Testo semplice di sola lettura
  4. Casella di controllo : casella che fornisce le opzioni per l'attivazione o la disattivazione.
  5. Pulsante di opzione: Casella che fornisce le opzioni per l'attivazione o la disattivazione, ma possiamo scegliere solo un pulsante di opzione in un gruppo.
  6. Casella a discesa/combinata : apre un menu a discesa quando si fa clic. Nel modulo non aperto è possibile visualizzare un solo elemento.
  7. Casella di testo: Area di testo modificabile.
  8. Casella di riepilogo: La casella con più elementi e una barra di scorrimento per esaminarli tutti.
  9. Dispositivo di scorrimento: Un widget di navigazione utilizzato per spostarsi nell'applicazione.
  10. Menù: Mostrato in alto, il menu fornisce diverse opzioni all'utente dell'applicazione.
  11. La finestra di dialogo: Una casella visualizzata nella parte superiore di una finestra. A volte per visualizzare la notifica.
  12. Griglia: Utilizzato per la gestione del layout dell'interfaccia utente.

Gestione del layout

Le applicazioni GUI devono essere ottimizzate per vari schermi di diverse dimensioni, risoluzioni ecc., cercando di mantenere un'interfaccia utente attraente ma efficace con i vari widget organizzati sullo schermo.

Gestione degli eventi

Nella programmazione della GUI, eventi come il clic sui pulsanti o la pressione dei tasti sono fondamentali. Questi eventi vengono gestiti dall'app in modo che possa seguire le azioni dell'utente. Esistono diversi eventi associati a diversi widget. Ad esempio, per un pulsante cliccabile, gli eventi associati sono:



  1. Fare clic su Evento
  2. Evento di spostamento del mouse
  3. Concentrarsi sull'evento
  4. Evento Focus Out

Librerie GUI popolari per C++

Il C++ dispone di molte librerie GUI indipendenti dalla piattaforma che possono essere utilizzate per sviluppare un'applicazione GUI. Alcuni di quelli popolari sono:

  1. gtkmm
  2. Qt
  3. wxWidgets
  4. Caro ImuGui

Esempio di applicazione GUI C++

Utilizzeremo i seguenti strumenti per i seguenti programmi:

  1. Libreria Qt : La libreria GUI per il nostro programma.
  2. Progettista Qt: Un progettista di modelli GUI interattivo per Qt.
  3. Creatore Qt: IDE per applicazioni GUI Qt

Ora esamineremo casi reali di programmazione GUI con C++ e Qt. Svilupperemo un'applicazione Hello World di base: un pulsante e quando si fa clic sul pulsante, verrà visualizzata una finestra di dialogo con il testo Hello World scritto su di esso. Lo implementeremo utilizzando questi passaggi:

Passaggio 1: creazione di un progetto Qt

Apriremo Qt Creator e creeremo un nuovo progetto di tipo Qt Widget Application. Inserisci il nome, seleziona la posizione e sei a posto. Il creatore di Qt creerà il progetto con tutti i file richiesti.

creazione-progetto

Java localdatetime

Passaggio 2: progettazione della finestra

Successivamente apriremo il file mainWindow.ui . Questo file contiene l'interfaccia utente dell'applicazione. Aggiungeremo un'etichetta di testo utilizzando il designer appena aperto.

Ora i nostri file conterranno il seguente codice:

mainWindow.h

C++




stringa multilinea JavaScript
#ifndef MAINWINDOW_H> #define MAINWINDOW_H> > #include> > QT_BEGIN_NAMESPACE> namespace> Ui {>class> MainWindow; }> QT_END_NAMESPACE> > class> MainWindow :>public> QMainWindow> {> >Q_OBJECT> > public>:> >MainWindow(QWidget *parent = nullptr);> >~MainWindow();> > private>:> >Ui::MainWindow *ui;> };> #endif // MAINWINDOW_H> 

>

>

main.cpp

C++




#include 'mainwindow.h'> > #include> > int> main(>int> argc,>char> *argv[])> {> >QApplication a(argc, argv);> >MainWindow w;> >w.show();> >return> a.exec();> }> 

>

>

mainWindow.cpp

C++




#include 'mainwindow.h'> #include './ui_mainwindow.h'> > MainWindow::MainWindow(QWidget *parent)> >: QMainWindow(parent)> >, ui(>new> Ui::MainWindow)> {> >ui->setupUi(>this>);> }> > MainWindow::~MainWindow()> {> >delete> ui;> }> 

>

>

mainWindow.ui

XML




xml version='1.0' encoding='UTF-8'?> MainWindowclass> 0x>0y>800larghezza>600altezza> rect> proprietà> MainWindowsstring> proprietà> 260x>140 anni>81larghezza>71altezza> rect> proprietà> Ciao Worldstring> proprietà> widget> widget> 0x>0y>800larghezza>22altezza> rect> proprietà> widget>widget> ui>> 

>

>

Si noti che mainWindow.ui è scritto in XML. È perché Qt scrive i suoi file UI in XML.

stringa in data

Passaggio 4: creazione ed esecuzione

Possiamo creare ed eseguire il progetto Qt in Qt Creator con un solo clic.

Produzione

Ciao mondo

Vantaggi delle applicazioni GUI

Le applicazioni GUI offrono numerosi vantaggi, contribuendo a una migliore esperienza utente e a uno sviluppo semplificato:

  • Interfaccia intuitiva: L'uso di interfacce utente grafiche (GUI) fornisce un approccio semplice e facile da usare verso le applicazioni software rispetto ad altri approcci che richiederebbero più tempo.
  • Interattività migliorata: Comprende funzionalità interattive come pulsanti, menu a discesa, caselle di controllo e dispositivi di scorrimento che offrono agli utenti il ​​controllo delle proprie esperienze.
  • Compatibilità multipiattaforma: Linguaggi come Qt consentono la creazione di applicazioni GUI per Windows, macOS, Linux con C++.
  • Prototipazione rapida: La presenza di molti costruttori di GUI e strumenti di progettazione nei framework GUI promuove la prototipazione rapida delle interfacce, rendendo più veloce l'intero processo di sviluppo.