Basic ElementsQt Quick includes elements for placing components. These can be combined to form other components. import QtQuick 2.0 Basic ElementsThis is a list of some of the elements readily available for users. For a complete list of QML elements, please visit the QML Elements page. Item ElementMany QML elements inherit Item properties. Item possesses important properties such as focus, children, and dimension properties such as width and height. Although Item has physical properties, it is not a visual element. Using Item as the top-level QML element (as the screen) will not produce a visual result, use the Rectangle element instead. Use the Item to create opacity effects, such as when creating an invisible container to hold other components. Rectangle ElementThe Rectangle element is the basic visual element, for displaying different types of items onto the screen. The Rectangle is customizable and utilizes other elements such as Gradient and BorderImage for displaying advanced customized graphics. Image ElementTo insert an image into a QML scene, merely declare an Image element. The Image element can load images in formats supported by Qt. Text ElementsThe Text and TextEdit elements display formatted text onto the screen. TextEdit features multi-line editing while the TextInput element is for single line text input. Using Elements as the Top-Level ComponentFor creating components, there are different elements that could be used as the top-level component. To display a simple scene, a Rectangle as the top-level component may suffice. Rectangle, FocusScope, Component, QtObject, Item, are some of the commonly used elements as the top-level component. When importing components, the top-level component is important because the top-level component's properties are the only properties exposed to the parent. For example, a Button component may be implemented using different elements as its top-level component. When this component is loaded into another QML scene, the component will retain the top-level component's properties. If a non-visual component is the top-level component, the visual properties should be aliased to the top-level to display the component properly. For more information on how to build upon QML elements, see the QML Components document. Additional ElementsThe SQL Local Storage API provides a JavaScript interface to an SQL relational database. The import statement needs a namespace import QtQuick.LocalStorage 2.0 as SQL The QtQuick.Particles module provides a particle system for additional graphics. The Using the Qt Quick Particle System article outlines the system features. import QtQuick.Particles 2.0 Extending and Importing ElementsComponents may use the basic elements to create new components or to add functionality to existing components. In addition, external component sets may exist to perform logic or provide plugins. To extend existing elements or to create a custom component, the articles Creating QML Types and The QML Engine contain information about registering new types into the QML engine. |