User Tools

Site Tools


qt-quick-for-designers-1:layout_basics

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
qt-quick-for-designers-1:layout_basics [2013/06/21 22:06] mithatqt-quick-for-designers-1:layout_basics [2013/07/06 22:51] – [Resources] mithat
Line 5: Line 5:
   * Structures in the QML markup language are called **elements**.   * Structures in the QML markup language are called **elements**.
   * Some elements are //visual// (e.g., images, shapes).   * Some elements are //visual// (e.g., images, shapes).
 +    * These are called **Item**s.
   * Some elements are //non-visual// (e.g., animations).   * Some elements are //non-visual// (e.g., animations).
  
Line 13: Line 14:
     * ''anchors'', ''clip'', ''width'', ''height'', ''opacity'', ''x'', ''y'', ''rotation'', ''scale'', ...     * ''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):   * The following creates an Item of size 100 pixels by 100 pixels (but it shows nothing):
- 
 <file javascript item-example.qml> <file javascript item-example.qml>
 import QtQuick 1.0 import QtQuick 1.0
Line 22: Line 22:
 } }
 </file> </file>
 +  * ''width'' and ''height'' are **properties**.
 +  * You can place multiple properties on the same line if you separate them with semicolons:
 +<code javascript>
 +Item {
 +   width: 100; height: 100
 +}
 +</code>
  
 ===== Rectangle ===== ===== Rectangle =====
Line 35: Line 42:
    border.color: "black"    border.color: "black"
    border.width: 5    border.width: 5
-   radius: 10 
-} 
-</file> 
-  * You can place multiple properties on the same line if you separate them with semicolons: 
-<file javascript rectangle-example2.qml> 
-import QtQuick 1.0 
- 
-Rectangle { 
-   width: 100; height: 100 
-   color: "red"; border.color: "black"; border.width: 5 
    radius: 10    radius: 10
 } }
Line 154: Line 151:
 ===== Naming things ===== ===== Naming things =====
   * Elements can be named using the ''id'' property.   * Elements can be named using the ''id'' property.
-  * You often need to name an element so you can access it from outside itself.+  * You often need to name an element so you can refer to it from outside itself.
  
 <code javascript> <code javascript>
Line 179: Line 176:
 -------------------------------------------------------------- --------------------------------------------------------------
 ====== Resources ====== ====== Resources ======
-{{:qt-quick-for-designers-1:background.png?24|}} +  * {{:qt-quick-for-designers-1:images.zip|}} 
-{{:qt-quick-for-designers-1:button.png?24|}} +  * All source code is subject to this [[copyright header|copyright]].
-{{:qt-quick-for-designers-1:spaceship.png?24|}} +
qt-quick-for-designers-1/layout_basics.txt · Last modified: 2013/07/06 23:04 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki