Qt Reference Documentation

# Using QML elements

# Groups Of Related QML Elements

QML Elements are grouped by their respective functionalities. Certain elements are suited for building complex components while other elements strictly dictate appearances and color.

add something about elements in use in general

### image heading

img descr.

## Basic QML Elements

Basic elements can be extended to form more complex elements.

Elements:

- Item Element - The Item is the most basic of all visual items in QML. Many visual elements inherit properties from the Item element.
- Component Element - The Component element encapsulates a QML component definition.

### image heading

img descr.

## QML Visual Elements

Visual elements offer various interactive and graphical functionalities. Visual elements can directly set properties that dictate appearances.

Elements:

- BorderImage Element - The BorderImage element provides an image that can be used as a border.
- Gradient Element - The Gradient item defines a gradient fill.
- GradientStop Element - The GradientStop item defines the color at a position in a Gradient.
- Image Element - The Image element displays an image from a source.
- Rectangle Element - The Rectangle item provides a filled rectangle.
- Text Element - The Text item allows the addition of formatted text to a scene.
- TextEdit Element - The TextEdit item displays multiple lines of editable formatted text.
- TextInput Element - The TextInput item displays an editable line of text.

### image heading

img descr.

## QML Animation and Transition Elements

Animation and transition elements control animation behaviors. Animations can run in parallel or in series for different value types.

Elements:

- AnchorAnimation Element - The AnchorAnimation element animates changes in anchor values.
- Animation Element - The Animation element is the base of all QML animations.
- Behavior Element - The Behavior element allows you to specify a default animation for a property change.
- ColorAnimation Element - The ColorAnimation element animates changes in color values.
- NumberAnimation Element - The NumberAnimation element animates changes in qreal-type values.
- ParallelAnimation Element - The ParallelAnimation element allows animations to be run in parallel.
- ParentAnimation Element - The ParentAnimation element animates changes in parent values.
- PauseAnimation Element - The PauseAnimation element provides a pause during an animation.
- PropertyAction Element - The PropertyAction element allows immediate property changes during animation.
- PropertyAnimation Element - The PropertyAnimation element animates changes in property values.
- RotationAnimation Element - The RotationAnimation element animates changes in rotational values.
- ScriptAction Element - The ScriptAction element allows scripts to be run during an animation.
- SequentialAnimation Element - The SequentialAnimation element allows animations to be run sequentially.
- SmoothedAnimation Element - The SmoothedAnimation element allows a property to smoothly track a value.
- SpringAnimation Element - The SpringAnimation element allows a property to track a value in a spring-like motion.
- Transition Element - The Transition element defines animated transitions that occur on state changes.
- Vector3dAnimation Element - The Vector3dAnimation element animates changes in QVector3d values.

### image heading

img descr.

## QML Interaction Elements

These elements define basic interactions such as touch movements and focus management.

Elements:

- Flickable Element - The Flickable item provides a surface that can be "flicked".
- Flipable Element - The Flipable item provides a surface that can be flipped or reflected.
- FocusPanel Element - The FocusPanel item explicitly creates a focus panel.
- FocusScope Element - The FocusScope object explicitly creates a focus scope for focus management.
- PinchArea Element - The PinchArea item enables simple pinch gesture handling.
- KeyNavigation Element - The KeyNavigation attached property supports key navigation by arrow keys.
- Keys Element - The Keys attached property provides key handling to Items.
- MouseArea Element - The MouseArea item enables simple mouse handling.

### image heading

img descr.

## QML Event Elements

Key and mouse events information are provided in these event elements.

Elements:

- KeyEvent Element - The KeyEvent object provides information about a key event.
- MouseEvent Element - The MouseEvent object provides information about a mouse event.

### image heading

img descr.

## QML Positioning Elements

Using positioning elements, layouts can be defined and their children accessed through an index.

Elements:

- Column Element - The Column item arranges its children vertically.
- Flow Element - The Flow item arranges its children side by side, wrapping as necessary.
- Grid Element - The Grid item positions its children in a grid.
- Row Element - The Row item arranges its children horizontally.
- Repeater Element - The Repeater element allows you to repeat an Item-based component using a model.

### image heading

img descr.

## QML State Elements

States and groups of states are formed using state elements.

Elements:

- AnchorChanges Element - The AnchorChanges element allows you to change the anchors of an item in a state.
- ParentChange Element - The ParentChange element allows you to reparent an Item in a state change.
- PropertyChanges Element - The PropertyChanges element describes new property bindings or values for a state.
- State Element - The State element defines configurations of objects and properties.
- StateChangeScript Element - The StateChangeScript element allows you to run a script in a state.
- StateGroup Element - The StateGroup element provides state support for non-Item elements.

### image heading

img descr.

## QML Transform Elements

Advanced handling of transformations is controlled in transform elements.

Elements:

- Rotation Element - The Rotation object provides a way to rotate an Item.
- Scale Element - The Scale element provides a way to scale an Item.
- Transform Element - The Transform element provide a way of building advanced transformations on Items.
- Translate Element - The Translate object provides a way to move an Item without changing its x or y properties.

### image heading

img descr.

## QML Utility Elements

These elements handle assorted operations such as event timing, Qt enumerations, and font loading.

Elements:

- Binding Element - The Binding element allows arbitrary property bindings to be created.
- Connections Element - A Connections element describes generalized connections to signals.
- DoubleValidator Element - Provides a validator for non-integer numbers.
- FontLoader Element - The FontLoader element allows fonts to be loaded by name or URL.
- IntValidator Element - This element provides a validator for integer values.
- LayoutItem Element - The LayoutItem element allows declarative UI elements to be placed inside Qt's Graphics View layouts.
- Loader Element - The Loader item allows dynamically loading an Item-based subtree from a URL or Component.
- Package Element - Package provides a bundle for shared contexts in multiple views.
- Qt Element - The QML global Qt object provides useful enums and functions from Qt.
- QtObject Element - The QtObject element is the most basic element in QML.
- RegExpValidator Element - This element provides a validator for regular expressions.
- SystemPalette Element - The SystemPalette element provides access to the Qt palettes.
- Timer Element - The Timer item triggers a handler at a specified interval.
- WorkerScript Element - The WorkerScript element enables the use of threads in QML.

### image heading

img descr.

## Models and View Elements

Models and views are used to organize data and control their layouts using delegates. Models dictate the data formation and views control the layouts of data in the model.

View Elements:

- GridView Element - The GridView item provides a grid view of items provided by a model.
- ListView Element - The ListView item provides a list view of items provided by a model.
- PathView Element - The PathView element lays out model-provided items on a path.
- WebView Element - The WebView item allows you to add Web content to a canvas.

Model Elements:

- FolderListModel Element - The FolderListModel provides a model of the contents of a file system folder.
- ListElement Element - A ListElement defines a data item in a ListModel.
- ListModel Element - The ListModel element defines a free-form list data source.
- VisualDataModel Element - The VisualDataModel encapsulates a model and delegate.
- VisualItemModel Element - The VisualItemModel allows items to be provided to a view.
- XmlListModel Element - The XmlListModel element is used to specify a model using XPath expressions.
- XmlRole Element - The XmlRole element allows you to specify a role for an XmlListModel.

### image heading

img descr.

## Paths

QML components can be arranged along paths. Path elements allow control over different path types.

Elements:

- Path Element - A Path object defines a path for use by PathView.
- PathAttribute Element - The PathAttribute allows setting an attribute at a given position in a Path.
- PathCubic Element - The PathCubic defines a cubic Bezier curve with two control points.
- PathElement Element - PathElement is the base path type.
- PathLine Element - The PathLine defines a straight line.
- PathPercent Element - The PathPercent manipulates the way a path is interpreted.
- PathQuad Element - The PathQuad defines a quadratic Bezier curve with a control point.

### image heading

img descr.

## Particle Elements

Particle effects are declared and controlled using particle elements.

Elements:

- ParticleMotionGravity Element - The ParticleMotionGravity object moves particles towards a point.
- ParticleMotionLinear Element - The ParticleMotionLinear object moves particles linearly.
- ParticleMotionWander Element - The ParticleMotionWander object moves particles in a somewhat random fashion.
- Particles Element - The Particles object generates and moves particles.

### image heading

img descr.

## Bridge Elements

Bridge elements allow direct communication between C++ and QML entities.

Elements:

- LayoutItem Element - The LayoutItem element allows declarative UI elements to be placed inside Qt's Graphics View layouts.