Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler
ReadyDev
Présentation
Admin
Le but de ce tutoriel est de vous apprendre à créer des Interfaces homme machine avec Qt en C++.
Produit par Gérard KESSE.
Introduction
Qt est un Framework de développement d'applications multiplateformes largement utilisé pour développer des applications pouvant s'exécuter sur un large éventail de plates-formes matérielles avec peu ou pas de changement dans la base de code sous-jacente. Si vous avez des connaissances de base en C++ et souhaitez créer des applications de bureau ou mobiles avec une interface utilisateur graphique (GUI) moderne, Qt est le bon choix pour vous. Le développement multiplateforme avec Qt 6 et le C++ Moderne vous aide à comprendre pourquoi Qt est l'un des Framework GUI préférés adoptés par les industries du monde entier, couvrant l'essentiel de la programmation d'applications GUI sur une multitude de plates-formes en utilisant les fonctionnalités standard C++17 et Qt 6.
Recommandations techniques
Pour tester les extraits de code dans ce tutoriel, vous aurez besoin des éléments suivants:
Une bibliothèque de création d'interface homme machine Qt.
Activer les standards c++17.
Lien vers la bibliothèque Qt: https://www.qt.io/download
Utilisation d'une fenêtre principale (QMainWindow)
Une fenêtre principale fournit un cadre pour créer l'interface utilisateur d'une application.
Création d'une fenêtre principale dans Qt Designer
Résultat:
Liste des objets:
Affichage d'une fenêtre principale
Résultat:
Affichage d'une fenêtre principale:
//===============================================
int main(int argc, char** argv) {
QApplication lApp(argc, argv);
GWindow* lWindow = new GWindow;
lWindow->show();
return lApp.exec();
}
//===============================================
GWindow::GWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GWindow) {
ui->setupUi(this);
}
//===============================================Utilisation d'une connexion signal/slot
Résultat:
Utilisation d'une connexion signal/slot:
//===============================================
int main(int argc, char** argv) {
QApplication lApp(argc, argv);
GWindow* lWindow = new GWindow;
lWindow->show();
return lApp.exec();
}
//===============================================
GWindow::GWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GWindow) {
ui->setupUi(this);
}
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
qDebug() << __PRETTY_FUNCTION__;
}
//===============================================Utilisation d'une vue graphique (QGraphicsView)
QGraphicsView visualise le contenu d'un QGraphicsScene dans une fenêtre scrollable.
Initialisation d'une scène
Résultat:
Initialisation d'une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
}
//===============================================Traçage du contour d'une scène
Résultat:
Traçage du contour d'une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
}
//===============================================Ajout d'un texte dans une scène
Résultat:
Ajout d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
QGraphicsSimpleTextItem* lText = new QGraphicsSimpleTextItem("Qt Mobile");
m_scene->addItem(lText);
}
//===============================================Déplacement d'un texte dans une scène
Résultat:
Déplacement d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
QGraphicsSimpleTextItem* lText = new QGraphicsSimpleTextItem("Qt Mobile");
lText->setFlags(QGraphicsSimpleTextItem::ItemIsMovable);
m_scene->addItem(lText);
}
//===============================================Modification d'un texte dans une scène
Résultat:
Modification d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
GTextGraphic* lText = new GTextGraphic("Qt Mobile");
lText->setFlags(QGraphicsSimpleTextItem::ItemIsMovable);
m_scene->addItem(lText);
}
//===============================================
GTextGraphic::GTextGraphic(const QString& _text)
: QGraphicsSimpleTextItem(_text)
, m_text(_text) {
}
//===============================================
void GTextGraphic::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {
if (scene()->collidingItems(this).isEmpty())
QGraphicsSimpleTextItem::setText("BOOM!");
else
QGraphicsSimpleTextItem::setText(m_text);
QGraphicsSimpleTextItem::paint(painter, option, widget);
}
//===============================================Utilisation d'une liaison Bluetooth (QtBluetooth)
L'API Bluetooth fournit une connectivité entre les appareils compatibles Bluetooth.
Bluetooth est une technologie sans fil à courte portée (moins de 100 mètres). Il a un taux de transfert de données de 2,1 Mbps, ce qui le rend idéal pour transférer des données entre appareils. La connectivité Bluetooth est basée sur la gestion de base des appareils, telle que la recherche d'appareils, la collecte d'informations à leur sujet et l'échange de données entre eux.
Qt Bluetooth prend en charge le développement Bluetooth Low Energy pour les cas d'utilisation de rôle client/central.
Initialisation d'une scène
Résultat:
Initialisation d'une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
}
//===============================================Traçage du contour d'une scène
Résultat:
Traçage du contour d'une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
}
//===============================================Ajout d'un texte dans une scène
Résultat:
Ajout d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
QGraphicsSimpleTextItem* lText = new QGraphicsSimpleTextItem("Qt Mobile");
m_scene->addItem(lText);
}
//===============================================Déplacement d'un texte dans une scène
Résultat:
Déplacement d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
QGraphicsSimpleTextItem* lText = new QGraphicsSimpleTextItem("Qt Mobile");
lText->setFlags(QGraphicsSimpleTextItem::ItemIsMovable);
m_scene->addItem(lText);
}
//===============================================Modification d'un texte dans une scène
Résultat:
Modification d'un texte dans une scène:
//===============================================
void GWindow::on_actionOpen_triggered(bool checked) {
GGraphicsView* lGraphicsView = new GGraphicsView;
lGraphicsView->show();
}
//===============================================
GGraphicsView::GGraphicsView(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::GGraphicsView) {
ui->setupUi(this);
setAttribute(Qt::WA_DeleteOnClose);
m_scene = new QGraphicsScene(this);
ui->graphicsView->setScene(m_scene);
m_scene->setSceneRect(-50, -50, 120, 120);
QPen pen = QPen(Qt::red);
m_scene->addRect(m_scene->sceneRect(), pen);
GTextGraphic* lText = new GTextGraphic("Qt Mobile");
lText->setFlags(QGraphicsSimpleTextItem::ItemIsMovable);
m_scene->addItem(lText);
}
//===============================================
GTextGraphic::GTextGraphic(const QString& _text)
: QGraphicsSimpleTextItem(_text)
, m_text(_text) {
}
//===============================================
void GTextGraphic::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {
if (scene()->collidingItems(this).isEmpty())
QGraphicsSimpleTextItem::setText("BOOM!");
else
QGraphicsSimpleTextItem::setText(m_text);
QGraphicsSimpleTextItem::paint(painter, option, widget);
}
//===============================================Utilisation d'un effet graphique QML (GraphicalEffects)
Le module QtGraphicalEffects fournit un ensemble de types QML pour ajouter des effets visuellement impressionnants et configurables aux interfaces utilisateur.
Affichage d'une fenêtre QML
Résultat:
Programme principal:
//===============================================
int main(int argc, char** argv) {
QGuiApplication lApp(argc, argv);
QQmlApplicationEngine lEngine;
const QUrl lUrl(u"qrc:/qml/main.qml"_qs);
QObject::connect(&lEngine, &QQmlApplicationEngine::objectCreationFailed,
&lApp, []() { QCoreApplication::exit(-1); },
Qt::QueuedConnection);
lEngine.load(lUrl);
return lApp.exec();
}
//===============================================Affichage d'une fenêtre principale:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
}
//===============================================Traçage d'un rectangle
Résultat:
Traçage d'un rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
x: 10; y: 10; width: 100; height: 100
color: "red"
}
}
//===============================================Remplissage de toute la fenêtre
Résultat:
Remplissage de toute la fenêtre:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "red"
}
}
//===============================================Ajout d'un effet gradient
Résultat:
Ajout d'un effet gradient:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "green"; }
GradientStop { position: 0.25; color: "purple"; }
GradientStop { position: 0.75; color: "yellow"; }
GradientStop { position: 1.0; color: "black"; }
}
}
}
//===============================================Ajout d'un texte dans un rectangle
Résultat:
Ajout d'un texte dans un rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "green"; }
GradientStop { position: 0.25; color: "purple"; }
GradientStop { position: 0.75; color: "yellow"; }
GradientStop { position: 1.0; color: "black"; }
}
Text {
id: textLabel
text: "ReadyApp QML App"
color: "cyan"
font.pointSize: 20
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
//===============================================Ajout d'un effet de flou gaussien sur un texte
Résultat:
Ajout d'un effet de flou gaussien sur un texte:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "green"; }
GradientStop { position: 0.25; color: "purple"; }
GradientStop { position: 0.75; color: "yellow"; }
GradientStop { position: 1.0; color: "black"; }
}
Text {
id: textLabel
text: "ReadyApp QML App"
color: "cyan"
font.pointSize: 20
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
}
GaussianBlur {
anchors.fill: textLabel
source: textLabel
radius: 8
samples: 16
}
}
}
//===============================================Utilisation d'une vue en grille QML (GridView)
Un GridView affiche les données des modèles créés à partir de types QML intégrés comme ListModel et XmlListModel, ou des classes de modèles personnalisées définies en C++ qui héritent de QAbstractListModel.
Affichage d'un rectangle
Résultat:
Affichage d'un rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
}
}
//===============================================Création d'une liste de modèle
Création d'une liste de modèle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Création d'une vue en grille
Création d'une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Liaison d'une vue en grille à une liste de modèle
Résultat:
Liaison d'une vue en grille à une liste de modèle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
width: 50; height: 50
color: "red"
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'un rôle d'une liste de modèle dans une vue en grille
Résultat:
Utilisation d'un rôle d'une liste de modèle dans une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
width: 50; height: 50
color: "red"
Text {
text: carModel
}
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'une image dans un délégué d'une vue en grille
Résultat:
Utilisation d'une image dans un délégué d'une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Autorisation d'un scroll vertical dans une vue en grille
Résultat:
Autorisation d'un scroll vertical dans une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowLeftToRight
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//=============================================== Autorisation d'un scroll horizontal dans une vue en grille
Résultat:
Autorisation d'un scroll horizontal dans une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowTopToBottom
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Affichage des éléments d'une vue en grille de la gauche vers la droite
Résultat:
Affichage des éléments d'une vue en grille de la gauche vers la droite:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowTopToBottom
layoutDirection: Qt.LeftToRight
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//=============================================== Affichage des éléments d'une vue en grille de la droite vers la gauche
Résultat:
Affichage des éléments d'une vue en grille de la droite vers la gauche:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowTopToBottom
layoutDirection: Qt.RightToLeft
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Affichage des éléments d'une vue en grille du haut vers le bas
Résultat:
Affichage des éléments d'une vue en grille du haut vers le bas:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowTopToBottom
layoutDirection: Qt.LeftToRight
verticalLayoutDirection: GridView.TopToBottom
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Affichage des éléments d'une vue en grille du bas vers le haut
Résultat:
Affichage des éléments d'une vue en grille du bas vers le haut
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
GridView {
id: gridView
anchors.fill: parent
anchors.margins: 30
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
flow: GridView.FlowTopToBottom
layoutDirection: Qt.LeftToRight
verticalLayoutDirection: GridView.BottomToTop
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'une vue en chemin QML (PathView)
Un PathView affiche les données des modèles créés à partir de types QML intégrés comme ListModel et XmlListModel, ou des classes de modèles personnalisées définies en C++ qui héritent de QAbstractListModel.
Affichage d'un rectangle
Résultat:
Affichage d'un rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
}
}
//===============================================Création d'une liste de modèle
Création d'une liste de modèle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Création d'une vue en chemin
Création d'une vue en grille:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 30
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Création d'un chemin en arc
Création d'un chemin en arc:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 30
path: Path {
startX: 0; startY: 0
PathArc { x: 0; y: 200; radiusX: 10; radiusY: 4 }
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Liaison d'une vue en chemin à une liste de modèle
Résultat:
Liaison d'une vue en chemin à une liste de modèle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 30
path: Path {
startX: 0; startY: 0
PathArc { x: 0; y: 200; radiusX: 10; radiusY: 4 }
}
model: myListModel
delegate: Rectangle {
id: theDelegate
width: 50; height: 50; color: "red"
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'un rôle d'une liste de modèle dans une vue en chemin
Résultat:
Utilisation d'un rôle d'une liste de modèle dans une vue en chemin:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
color: "gray"
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 30
path: Path {
startX: 0; startY: 0
PathArc { x: 0; y: 200; radiusX: 10; radiusY: 4 }
}
model: myListModel
delegate: Rectangle {
id: theDelegate
width: 50; height: 50; color: "red"
Text {
text: carModel
}
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'une image dans un délégué d'une vue en chemin
Résultat:
Utilisation d'une image dans un délégué d'une vue en chemin:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Rectangle {
anchors.fill: parent
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 30
path: Path {
startX: 0; startY: 0
PathArc { x: 0; y: 200; radiusX: 10; radiusY: 4 }
}
model: myListModel
delegate: Rectangle {
id: theDelegate
Text {
text: carModel
}
Image {
source: "/img/icons8-sedan-64.png"
}
}
}
}
ListModel {
id: myListModel
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
ListElement { carModel: "Tesla" }
ListElement { carModel: "Ford Sync 3" }
ListElement { carModel: "Unknown" }
}
}
//===============================================Utilisation d'un flux de données QML (Flow)
L'élément Flow positionne ses éléments enfants comme des mots sur une page, en les enveloppant pour créer des lignes ou des colonnes d'éléments.
Utilisation d'un flux de rectangles
Résultat:
Utilisation d'un flux de rectangles:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Rectangle {
width: 50; height: 50; color: "red"
}
Rectangle {
width: 50; height: 50; color: "green"
}
Rectangle {
width: 50; height: 50; color: "blue"
}
}
}
//===============================================Utilisation d'un flux de textes
Résultat:
Utilisation d'un flux de textes:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Text {
text: "ReadyApp"
color: "purple"
font.pointSize: 20
}
Text {
text: "QML"
color: "red"
font.pointSize: 20
}
Text {
text: "Mobile"
color: "blue"
font.pointSize: 20
}
}
}
//===============================================Utilisation d'un flux de rectangles et de textes
Résultat:
Utilisation d'un flux de rectangles et de textes:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10
Rectangle {
width: 35
height: 35
gradient: Gradient {
GradientStop { position: 0.0; color: "green"; }
GradientStop { position: 0.25; color: "purple"; }
GradientStop { position: 0.5; color: "yellow"; }
GradientStop { position: 1.0; color: "black"; }
}
}
Text {
text: "ReadyApp"
color: "purple"
font.pointSize: 20
}
Text {
text: "QML"
color: "red"
font.pointSize: 20
}
Text {
text: "Mobile"
color: "blue"
font.pointSize: 20
}
}
}
//===============================================Utilisation d'une liste de points de contact QML (MultiPointTouchArea)
Un MultiPointTouchArea est un élément invisible utilisé pour suivre plusieurs points de contact.
Initialisation d'une fenêtre
Résultat:
Initialisation d'une fenêtre:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
}
//===============================================Initialisation des points de contact
Initialisation des points de contact:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
}
}
//===============================================Utilisation d'un point de contact
Résultat:
Utilisation d'un point de contact:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
Rectangle {
width: 45; height: 45
color: "#80c342"
x: touch1.x
y: touch1.y
radius: 50
}
}
}
//===============================================Ajout d'une animation suivant x
Résultat:
Ajout d'une animation suivant x:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
Rectangle {
width: 45; height: 45
color: "#80c342"
x: touch1.x
y: touch1.y
radius: 50
Behavior on x {
PropertyAnimation {easing.type: Easing.OutBounce; duration: 500 }
}
}
}
}
//===============================================Ajout d'une animation suivant y
Résultat:
Ajout d'une animation suivant y:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
Rectangle {
width: 45; height: 45
color: "#80c342"
x: touch1.x
y: touch1.y
radius: 50
Behavior on x {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
}
}
}
//===============================================Animation d'un 2ème rectangle
Résultat:
Animation d'un 2ème rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
Rectangle {
width: 45; height: 45
color: "#80c342"
x: touch1.x
y: touch1.y
radius: 50
Behavior on x {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
}
Rectangle {
width: 45; height: 45
color: "#b40000"
x: touch2.x
y: touch2.y
radius: 50
Behavior on x {
PropertyAnimation {easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation {easing.type: Easing.OutBounce; duration: 500 }
}
}
}
}
//===============================================Animation d'un 3ème rectangle
Résultat:
Animation d'un 3ème rectangle:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
color: "black"
MultiPointTouchArea {
anchors.fill: parent
touchPoints: [
TouchPoint { id: touch1 },
TouchPoint { id: touch2 },
TouchPoint { id: touch3 }
]
Rectangle {
width: 45; height: 45
color: "#80c342"
x: touch1.x
y: touch1.y
radius: 50
Behavior on x {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
}
Rectangle {
width: 45; height: 45
color: "#b40000"
x: touch2.x
y: touch2.y
radius: 50
Behavior on x {
PropertyAnimation {easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation {easing.type: Easing.OutBounce; duration: 500 }
}
}
Rectangle {
width: 45; height: 45
color: "#6b11d8"
x: touch3.x
y: touch3.y
radius: 50
Behavior on x {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
Behavior on y {
PropertyAnimation { easing.type: Easing.OutBounce; duration: 500 }
}
}
}
}
//===============================================Utilisation d'un layout en grille QML (GridLayout)
GridLayout fournit un moyen d'organiser dynamiquement les éléments dans une grille.
Organisation de rectangles
Résultat:
Organisation de rectangles:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
GridLayout {
rows: 3
columns: 2
Rectangle {
width: 50; height: 50; color: "red"
}
Rectangle {
width: 50; height: 50; color: "green"
}
Rectangle {
width: 50; height: 50; color: "blue"
}
}
}
//===============================================Organisation de textes
Résultat:
Organisation de textes:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
GridLayout {
rows: 3
columns: 2
Text {
text: "ReadyApp"
color: "purple"
font.pointSize: 20
}
Text {
text: "QML"
color: "red"
font.pointSize: 20
}
Text {
text: "Mobile"
color: "blue"
font.pointSize: 20
Layout.fillHeight: true
}
}
}
//===============================================Utilisation d'une fenêtre de niveau supérieur QML (ApplicationWindow)
ApplicationWindow est une fenêtre de niveau supérieur stylisée avec prise en charge d'une entête et d'un pied de page.
Initialisation d'une fenêtre de niveau supérieur
Résultat:
Initialisation d'une fenêtre de niveau supérieur:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
}
//===============================================Initialisation d'une barre de menu
Résultat:
Initialisation d'une barre de menu:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
}
}
//===============================================Création d'un menu
Résultat:
Création d'un menu:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
}
}
}
//===============================================Création d'un élément de menu
Résultat:
Création d'un élément de menu:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
MenuItem {
text: "Ouvrir"
}
}
}
}
//===============================================Utilisation d'un signal sur un élément de menu
Résultat:
Utilisation d'un signal sur un élément de menu:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
MenuItem {
text: "Ouvrir"
onTriggered: {console.log("Ouverture d'un fichier...")}
}
}
}
}
//===============================================Ouverture d'une boîte de dialogue
Résultat:
Ouverture d'une boîte de dialogue:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
MenuItem {
text: "Ouvrir"
onTriggered: msgDialog.open()
}
}
}
MessageDialog {
id: msgDialog
title: qsTr("ReadyApp | Message")
text: qsTr("Ouverture d'un fichier...")
}
}
//===============================================Ajout d'une ligne d'édition dans l'entête
Résultat:
Ajout d'une ligne d'édition dans l'entête:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
MenuItem {
text: "Ouvrir"
onTriggered: {console.log("Ouverture d'un fichier...")}
}
}
}
header: TextField {
}
}
//===============================================Insertion d'un texte d'indication dans une ligne d'édition
Résultat:
Insertion d'un texte d'indication dans une ligne d'édition:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu {
title: "Fichier"
MenuItem {
text: "Ouvrir"
onTriggered: {console.log("Ouverture d'un fichier...")}
}
}
}
header: TextField {
placeholderText: "Saisissez un texte..."
}
}
//===============================================Utilisation d'une navigation par balayage (SwipeView)
SwipeView fournit un modèle de navigation par balayage.
Création d'une fenêtre principale
Résultat:
Création d'une fenêtre principale:
//===============================================
Window {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
}
//===============================================Création d'une navigation par balayage
Création d'une navigation par balayage:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
}
}
//===============================================Création d'une page de navigation
Création d'une page de navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
}
}
}
//===============================================Edition d'une page de navigation
Résultat:
Edition d'une page de navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "red"
Text {
text: qsTr("Page1")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
//===============================================Ajout d'un indicateur de page
Résultat:
Ajout d'un indicateur de page:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "red"
Text {
text: qsTr("Page1")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Ajustement d'une page de navigation
Résultat:
Ajustement d'une page de navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "red"
anchors.bottomMargin: 20
Text {
text: qsTr("Page1")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Insertion d'une 2ème page navigation
Résultat:
Insertion d'une 2ème page navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "red"
anchors.bottomMargin: 20
Text {
text: qsTr("Page1")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "green"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Insertion d'une 3ème page navigation
Résultat:
Insertion d'une 3ème page navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "red"
anchors.bottomMargin: 20
Text {
text: qsTr("Page1")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "green"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "blue"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Initialisation d'un style de matériau dark
Résultat:
Initialisation d'un style de matériau dark:
[Controls] Style=Material [Material] Theme=Dark
Mise en évidence d'un style de matériau dark
Résultat:
Mise en évidence d'un style de matériau dark:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page1")
font.pointSize: 20
color: "red"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
color: "blue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Ajout d'un menu
Résultat:
Ajout d'un menu:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu { title: "Fichier"
MenuItem { text: "Ouvrir"
onTriggered: msgDialog.open()
}
}
}
header: TextField {
placeholderText: "Saisissez un texte..."
}
MessageDialog {
id: msgDialog
title: "ReadyApp | Messages"
text: "Ouverture d'un fichier..."
}
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page1")
font.pointSize: 20
color: "red"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
color: "blue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Visualisation d'une boîte de dialogue dans un style de matériau dark
Résultat:
Insertion d'une entête dans une page de navigation
Résultat:
Insertion d'une entête dans une page de navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu { title: "Fichier"
MenuItem { text: "Ouvrir"
onTriggered: msgDialog.open()
}
}
}
header: TextField {
placeholderText: "Saisissez un texte..."
}
MessageDialog {
id: msgDialog
title: "ReadyApp | Messages"
text: "Ouverture d'un fichier..."
}
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
header: Label {
text: "Fonctionnement"
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
color: "blue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Ajout d'un indicateur d'activité en arrière-plan
Résultat:
Ajout d'un indicateur d'activité en arrière-plan:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu { title: "Fichier"
MenuItem { text: "Ouvrir"
onTriggered: msgDialog.open()
}
}
}
header: TextField {
placeholderText: "Saisissez un texte..."
}
MessageDialog {
id: msgDialog
title: "ReadyApp | Messages"
text: "Ouverture d'un fichier..."
}
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
header: Label {
text: "Fonctionnement"
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
BusyIndicator {
id: busyId
anchors.centerIn: parent
running: true;
}
Label {
text: "En cours de traitement..."
anchors.top: busyId.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
Page {
id: page2
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page2")
font.pointSize: 20
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
color: "blue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================Ajout d'un bouton de basculement vers une page de navigation
Résultat:
Ajout d'un bouton de basculement vers une page de navigation:
//===============================================
ApplicationWindow {
width: 400
height: 300
visible: true
title: qsTr("ReadyApp")
menuBar: MenuBar {
Menu { title: "Fichier"
MenuItem { text: "Ouvrir"
onTriggered: msgDialog.open()
}
}
}
header: TextField {
placeholderText: "Saisissez un texte..."
}
MessageDialog {
id: msgDialog
title: "ReadyApp | Messages"
text: "Ouverture d'un fichier..."
}
SwipeView {
id: swipeView
anchors.fill: parent
Page {
id: page1
anchors.fill: parent.fill
header: Label {
text: "Fonctionnement"
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
BusyIndicator {
id: busyId
anchors.centerIn: parent
running: true;
}
Label {
text: "En cours de traitement..."
anchors.top: busyId.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
Page {
id: page2
anchors.fill: parent.fill
header: Label {
text: "Retour"
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Column {
anchors.centerIn: parent
Button {
text: "Cliquer pour retourner"
background: Rectangle {
color: "#673AB7"
radius: 50
border.color: "#4CAF50"
border.width: 2
}
onClicked: swipeView.currentIndex = 0
}
Label {
text: "ReadyApp QML Mobile"
}
}
}
Page {
id: page3
anchors.fill: parent.fill
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.bottomMargin: 20
Text {
text: qsTr("Page3")
font.pointSize: 20
color: "blue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
//===============================================