User Tools

Site Tools


qt-quick-for-designers-1:layout_basics

Layout basics

Element

  • 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).

Item

  • 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
}

Rectangle

  • 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
}

Nesting Items

  • 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
   }
}

Image

  • 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

  • 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
   }
}

Naming things

  • 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"
   }
...

Resources

qt-quick-for-designers-1/layout_basics.txt · Last modified: 2013/07/06 23:04 by mithat