Diferència entre revisions de la pàgina «Introducció al QML. Curs 2021-2022»

De binefa.com
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «Comencem provant els codis qmlXX presents al [https://recull.binefa.cat/files/20211112/ recull de codis del dia 12 de novembre de 2021] usuari: ''dam'' / contrasenya:...».)
 
m
 
(Hi ha 5 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
 
Comencem provant els codis qmlXX presents al [https://recull.binefa.cat/files/20211112/ recull de codis del dia 12 de novembre de 2021] usuari: ''dam'' / contrasenya: ''dam2122''
 
Comencem provant els codis qmlXX presents al [https://recull.binefa.cat/files/20211112/ recull de codis del dia 12 de novembre de 2021] usuari: ''dam'' / contrasenya: ''dam2122''
 +
 +
[https://zetcode.com/gui/qtquick/ Qt Quick tutorial]
  
 
[https://qmlbook.github.io/ Accés al llibre de Qt/QML en línia]
 
[https://qmlbook.github.io/ Accés al llibre de Qt/QML en línia]
Línia 5: Línia 7:
 
Execució de codis QML des del terminal:
 
Execució de codis QML des del terminal:
 
  /home/jordi/Qt/5.15.2/gcc_64/bin/qmlscene showcase.qml
 
  /home/jordi/Qt/5.15.2/gcc_64/bin/qmlscene showcase.qml
 +
o
 +
/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 [https://recull.binefa.cat/files/20211115/ancoratgesQml.pdf ancoratgesQml.pdf]
 +
 +
== KDAB ==
 +
 +
[https://github.com/KDAB/kdabtv/tree/master/qml-intro Codis QML] dels [https://www.youtube.com/playlist?list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc vídeos de KDAB]
 +
 +
=== qml_02_kdab ===
 +
==== Ancoratge ====
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors.qml anchors.qml:]
 +
[[Image:00_anchors.png|center|anchors.qml]]
 +
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors2.qml anchors2.qml:]
 +
[[Image:01_anchors2.png|center|anchors2.qml]]
 +
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-centerin-parent-keyword.qml anchors-centerin-parent-keyword.qml:]
 +
[[Image:02_anchors-centerin-parent-keyword.png|center|anchors-centerin-parent-keyword.qml]]
 +
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-expanding.qml anchors-expanding.qml:]
 +
[[Image:03_anchors-expanding.png|center|anchors-expanding.qml]]
 +
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-anchor-layout/anchors-fill.qml anchors-fill.qml:]
 +
[[Image:04_anchors-expanding.png|center|anchors-fill.qml]]
 +
 +
==== Bucles de vinculació ====
 +
[https://github.com/KDAB/kdabtv/blob/master/qml-intro/ex-binding-loop/main.qml 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
 +
    }
 +
}
  
−
'''Exercicis QML''':
+
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
 +
    }
 +
}
  
−
* ex1) Feu un programa en QML que al principi hi surti un quadrat vermell centrat. Al prémer la tecla B hi sortirà de color blau, al prémer la tecla G hi sortirà de color verd i al prémer la tecla R torna a ser vermell.
 
  
−
* ex2) Feu un programa en QML a on hi aparegui centrat, horitzontalment i vertical, ben gros i en negreta el nom '''Escola del Clot'''. Al prémer la tecla + la lletra es farà més grossa. I al prémer la tecla - la lletra es farà més petita.
 
  
−
* ex3) Feu un programa que hi surti el text, centrat a la finestra, "Comptador: 0" de color vermell. Al prémer el botó + incrementarà el valor del comptador, i al prémer el botó '-' es decrementarà. Al prémer la tecla N el text serà de color negre i al prémer V tornarà a ser de color vermell.
+
Feu els exercicis de QML presents al [[Recull de pràctiques de 2n de DAM. Curs 2021-2022]]

Revisió de 13:06, 19 nov 2021

Comencem provant els codis qmlXX presents al recull de codis del dia 12 de novembre de 2021 usuari: dam / contrasenya: dam2122

Qt Quick tutorial

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

Execució de codis QML des del terminal: 

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

o 

/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:

anchors.qml

anchors2.qml:

anchors2.qml

anchors-centerin-parent-keyword.qml:

anchors-centerin-parent-keyword.qml

anchors-expanding.qml:

anchors-expanding.qml

anchors-fill.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
   }
}


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

Obtingut de «https://provisional.binefa.com/index.php?title=Introducció_al_QML._Curs_2021-2022&oldid=3841»