Introducció al QML. Curs 2023-2024

Comencem provant els codis qmlXX presents al recull de codis del dia 5 de desembre de 2023 usuari: dam / contrasenya: dam2324

Qt Quick tutorial

Accés al llibre de Qt/QML en línia

Execució de codis QML des del terminal:

/home/jordi/Qt/6.1.3/gcc_64/bin/qmlscene showcase.qml

Dependències

KeysExample.qml, present a ch04-qmlstart-assets/ch04-qmlstart/src/input, depèn de DarkSquare.qml i GreenSquare.qml

jordi@iot-clot:~/Documents/curs2021-2022/dam/20211115/exQml_02/ch04-qmlstart-assets/ch04-qmlstart/src/input$ /home/jordi/Qt/6.0.1/gcc_64/bin/qmlscene KeysExample.qml

Consultem ancoratgesQml.pdf

KDAB

Codis QML dels vídeos de KDAB

qml_02_kdab

Ancoratge

anchors.qml:

anchors2.qml:

anchors-centerin-parent-keyword.qml:

anchors-expanding.qml:

anchors-fill.qml:

Bucles de vinculació

Bucles de vinculació (binding loop)

Exemple de bucle de vinculació:

import QtQuick 2.0

Rectangle {
   color: "black"
   width: child.width
   height: child.width

   Image {
       id: child
       source : "../images/vertical-gradient.png"
       anchors.fill: parent
       anchors.margins: 5
   }
}

Una solució per a evitar bucles de vinculació:

import QtQuick 2.0

Rectangle {
   color: "black"
   implicitWidth: child.implicitWidth
   implicitHeight: child.implicitWidth

   Image {
       id: child
       source : "../images/vertical-gradient.png"
       anchors.fill: parent
       anchors.margins: 5
   }
}

Extres sobre QML

Per afegir QMLDesigner a l'entorn del QtCreator: Aneu al menú Help / About pluggins / Seleccioneu QMLDesigner

Per afegir un nou formulari: nomForm.ui.qml

Introduction to Qt / QML - all videos so far by KDAB (Codis QML de la sèrie de vídeos)

Vídeos QML de connexió entre el rerefons en C++ i el frontal en QML.

Photoshop to QML exporter

Exercicis

Feu els exercicis de QML presents al Recull de pràctiques de 2n de DAM. Curs 2023-2024