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

De binefa.com
Salta a la navegació Salta a la cerca
m
m
 
(Hi ha 4 revisions intermèdies del mateix usuari que no es mostren)
Línia 8: Línia 8:
  
 
  alumne@qtedu:~/QtPrj/20251124/Showcase$ /home/alumne/Qt/6.9.1/gcc_64/bin/qml Showcase.qml
 
  alumne@qtedu:~/QtPrj/20251124/Showcase$ /home/alumne/Qt/6.9.1/gcc_64/bin/qml Showcase.qml
 +
 +
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Showcase.qml
 +
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step01Root.qml
 +
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step02Background.qml
 +
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step03Pinwheel.qml
 +
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step04Animate.qml
 +
 +
 +
 +
== Dependències ==
 +
KeysExample.qml, present a qt6book-main/docs/ch04-qmlstart/src/input, depèn de DarkSquare.qml i GreenSquare.qml
 +
 +
jordi@iot-clot:/media/emmagatzematge/curs2023-2024/projecteGlobal/20231205/qt6book-main/docs/ch04-qmlstart/src/input$ '''/home/jordi/Qt/6.2.4/gcc_64/bin/qml KeysExample.qml'''
 +
 +
Consultem [https://recull.binefa.cat/files/20251124/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
 +
    }
 +
}
 +
 +
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'''
 +
 +
[https://www.youtube.com/playlist?list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc Introduction to Qt / QML - all videos so far] by [https://www.kdab.com/ KDAB] ([https://github.com/KDAB/kdabtv/tree/master/qml-intro Codis QML de la sèrie de vídeos])
 +
 +
[[Vídeos QML]] de connexió entre el rerefons en C++ i el frontal en QML.
 +
 +
[https://www.youtube.com/watch?v=9BRJ1qJkjZM Photoshop to QML exporter]
 +
== Repositori lliure d'arxius vectorials SVG i icones ==
 +
[https://www.svgrepo.com/ SVG repo] 500.000+ Open-licensed SVG Vector and Icons
 +
 +
[https://freesvg.org/ Free SVG vector files] Download and upload SVG images with CC0 public domain license
 +
 +
[https://iconscout.com/ Icon Scout] Over 12.1 Million+ Design Assets. Curated SVGs, Vector Icons, Illustrations, 3D Graphics, and Lottie Animations. Over 10,000+ new assets added every day. Integrated plugins, tools, editors, and more.

Revisió de 15:01, 24 nov 2025

QML Book per a Qt6 (QML Book a GitHub)

Comencem provant els codis qmlXX presents al recull de codis del dia 24 de novembre de 2025 usuari: dam / contrasenya: dam2526

Qt Quick tutorial

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

alumne@qtedu:~/QtPrj/20251124/Showcase$ /home/alumne/Qt/6.9.1/gcc_64/bin/qml Showcase.qml

jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Showcase.qml 
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step01Root.qml 
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step02Background.qml 
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step03Pinwheel.qml 
jb@clotfje:~/Documents/Curs2025-2026/dam/20251124/Showcase$ /home/jb/Qt/6.10.0/gcc_64/bin/qml Step04Animate.qml


Dependències

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

jordi@iot-clot:/media/emmagatzematge/curs2023-2024/projecteGlobal/20231205/qt6book-main/docs/ch04-qmlstart/src/input$ /home/jordi/Qt/6.2.4/gcc_64/bin/qml 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
   }
}

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

Repositori lliure d'arxius vectorials SVG i icones

SVG repo 500.000+ Open-licensed SVG Vector and Icons

Free SVG vector files Download and upload SVG images with CC0 public domain license

Icon Scout Over 12.1 Million+ Design Assets. Curated SVGs, Vector Icons, Illustrations, 3D Graphics, and Lottie Animations. Over 10,000+ new assets added every day. Integrated plugins, tools, editors, and more.

Obtingut de «https://www.binefa.com/index.php?title=Introducció_al_QML._Curs_2025-2026&oldid=11216»