QML-DRAW

compile draw.bac and run it 
./draw

it will load rect.qml for you

---

later you just edit rect.qml
and think of it as dynamic
code no compiling needed to edit it
any text editor will work to make changes
but if you can qtcreator has built in tools

Here is my personal take on QML
from zero on up I am writing this
as my notebook to remember key points along the way
maybe you want to test code and dont where to start

official docs for this demo qt5 and qt6 are the same
https://doc.qt.io/qt-6/qml-qtquick-rectangle.html

you have to look at things differently
but in the end it is easy to use

think a moment how would you express this "idea"

LEFT SIDE = RIGHT SIDE
LEFT SIDE : RIGHT SIDE

the symbols we use can be different but the "idea" is the same
getting past this point its smooth sailing
dont translate think idea = idea

Hey Joe thats plain ugly dont show me that stuff!
well there is a deeper reason for it
all QML gets parsed and that ugly : is needed
so for the moment just think LEFT SIDE is the "result" your variable
the RIGHT SIDE is some value ,string,function and more...

so = and : are the same for the moment

the next ugly part is CURLY BRACKETS {}
well yes just like c code it sucks but
all the code starts { and ends } in that block
we just have to remember to use them
that is the hardest part
just think {BLOCK of code} when your looking
at a long list of code

just going over some details
that helped me see things
one part is left out in the Docs and is very important
because nothing works without it

we need a WINDOW and we get it by importing it

---

import QtQuick.Window 2.2


Window {
    visible: true
    width: 640
    height: 480


// END all your code goes inside this Window
// and above this line 
}

---

to draw we need to import QtQuick 2.0

---

Rectangle {
    color: "blue"
    width: 80
    height: 80
}

---

put it all together we get
two library IMPORTS needed
then the code

---

import QtQuick 2.0
import QtQuick.Window 2.2



Window {
    visible: true
    width: 640
    height: 480


Rectangle {
    color: "blue"
    width: 80
    height: 80
}

} //END Window

---

even if you never coded
using QML you can understand
quicky what is happening
just by reading it

from this simple demo you can copy and paste the more
advanced examples into the Window and test them as you go
to get a feel of how to edit the code and where