• Structures in the QML markup language are called elements.
• Some elements are visual (e.g., images, shapes).
  • A visual element is an Item.
• Some elements are non-visual (e.g., animations).

• The Item is the basis of all visual elements in Qt Quick.
• Has no visual appearance itself.
• Has definitions for properties that are common across visual items:
  • anchors, clip, width, height, opacity, x, y, rotation, scale, …
• The following creates an Item of size 100 pixels by 100 pixels (but it shows nothing):

item-example.qml

import QtQuick 1.0
 
Item {
   width: 100
   height: 100
}

• width and height are properties.
• You can place multiple properties on the same line if you separate them with semicolons:

Item {
   width: 100; height: 100
}

• A Rectangle is an Item that is painted using a solid color and an optional border.
• You can use the radius property to create rounded borders.

rectangle-example.qml

import QtQuick 1.0
 
Rectangle {
   width: 100
   height: 100
   color: "red"
   border.color: "black"
   border.width: 5
   radius: 10
}

• You can put Items inside other Items.
• In the example below, a Rectangle is placed inside a regular (invisible) Item.
• The anchors.fill: parent line says that the Rectangle should fill its parent (i.e., the Item).

item-nested-example.qml

import QtQuick 1.0 
 
Item {
   width: 100
   height: 100
 
   Rectangle {
      anchors.fill: parent
      color: "red"
      border.color: "black"
      border.width: 5
      radius: 10
   }
}

• The Image element allows you to add a bitmap to a scene.
• It is a good practice not to hardcode the image width and height. (Qt Quick will automatically do this job.)

image-example-abs.qml

import QtQuick 1.0
 
Item {
   width: 300
   height: 300
 
   Image {
       x: 30
       y: 40
       source:"images/spaceship.png"
   }
}

• The following is identical to the above except it uses anchors to place the image in the dead center of the enclosing Item:

image-example.qml

import QtQuick 1.0
 
Item {
   width: 300
   height: 300
 
   Image {
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
       source:"images/spaceship.png"
   }
}

• Text and TextInput items allow you to add formatted texts to a scene.
• Getting user input from TextInput will be covered later

text-example.qml

import QtQuick 1.0 
 
Item {
   width: 100
   height: 100
 
   Text {
      text: "Hello World!"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }
}

textinput-example.qml

import QtQuick 1.0 
 
Item {
   width: 200
   height: 100
 
   Text {
      text: "Enter your name:"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }
 
   TextInput {
      text: "Default Text"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "red"
      x: 10
      y: 20
      focus: true
   }
}

• Elements can be named using the id property.
• You often need to name an element so you can refer to it from outside itself.

...
   Text {
      id: myMessage
      text: "Hello World!"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }
 
   Image {
       id: spaceshipImage
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
       source:"images/spaceship.png"
   }
...

• images.zip
• All source code is subject to this copyright.