Qt Quick in Qt 5.1

Qt Quick 2.1 is new in Qt 5.1. This is a summary of improvements and new features introduced by the new import and new classes in Qt 5.1:

• New threaded render loop for Mac, Linux, and Embedded.
• New render loop for windows for smoother animations.
• New Window properties: activeFocusItem, minimumWidth, minimumHeight, maximumWidth, maximumHeight, visibility, contentOrientation, and opacity.
• New Screen attached properties: name, desktopAvailableWidth, desktopAvailableHeight, logicalPixelDensity
• New Grid properties: horizontalAlignment, verticalAlignment, and effectiveHorizontalAlignment.
• New TextEdit properties: selectByKeyboard and textDocument
• A Window declared inside another Window or Item will automatically be transient for (centered upon) the outer window.
• These types are now part of Qt QML:
  • VisualItemModel
  • VisualDataModel - Encapsulates a model and a delegate
  • VisualDataGroup

  These types are kept due to compatibility reasons and are replaced by the Qt QML Models types.

New Submodules

In Qt 5.1, there are several new modules which extend Qt Quick functionalities.

• Qt Quick Dialogs - contains types for creating and interacting with system dialogs
• Qt Quick Controls - provides a set of reusable UI components
• Qt Quick Layouts - contains types that are used to arrange items in the user interface

The What's New in Qt 5.1 has more information about the Qt 5.1 release.

Qt Quick in Qt 5.0

The Qt Quick module is new in Qt 5. It provides the visual canvas and scenegraph back-end as well as the QtQuick QML module for QML application development.

As of Qt 5, the Qt Quick module is based on an OpenGL scenegraph. Many of the classes in the Qt Quick module have been ported from the QtDeclarative module from Qt 4.8 to use the scenegraph architecture; these classes have been renamed to use a QQuick* prefix. (See the Porting QML Applications to Qt 5 for porting information.)

The following classes provide the basic functionality for interacting with the QML visual canvas from C++:

• QQuickItem - the base visual QML type (replaces QDeclarativeItem)
• QQuickView - a convenience window for rendering a QML scene from a QML file (replaces QDeclarativeView)
• QQuickWindow - a base window for displaying a QML scene
• QQuickPaintedItem - convenience for using the QPainter API with the scenegraph
• QQuickImageProvider - fetches custom images for use in QML applications (replaces QDeclarativeImageProvider)
• QQuickTextureFactory - use with QQuickImageProvider::requestTexture()

Custom rendering can be performed on the scenegraph using the following new classes:

• QSGNode
• QSGMaterial
• QSGBasicGeometryNode
• QSGGeometryNode
• QSGClipNode
• QSGTransformNode
• QSGOpacityNode
• QSGFlatColorMaterial
• QSGSimpleRectNode
• QSGSimpleTextureNode
• QSGTexture
• QSGDynamicTexture
• QSGOpaqueTextureMaterial
• QSGTextureMaterial
• QSGTextureProvider
• QSGVertexColorMaterial

Qt 5.0 - QtQuick QML Module

The QtQuick 2.0 QML module is a major update.

Below are the additions in QtQuick 2.0. For a list of behavioral changes which may affect applications ported from QtQuick 1.x, see the Porting QML Applications to Qt 5.

Visual types, Graphical Effects and Sprites

• New Canvas type for drawing. This provides an API similar to that of the HTML5 Canvas API, along with some additional features.
  • Supports two render targets: Canvas.Image and Canvas.FramebufferObject.
  • Supports background thread rendering.
  • Supports tiled canvas rendering.
  • Supports most of the HTML5 context2d APIs.
• Item:
  • New layer.enabled property enables an item to be rendered into an offscreen cache for optimization.
  • New contains() method returns whether an item contains a specified point.
  • New anchors.alignWhenCentered property can force centered anchors to align on a whole pixel.
  • New enabled property is available, which stops input event delivery and removes active focus.
• Image:
  • New horizontalAlignment and verticalAlignment properties to set the image alignment.
  • New Image.Pad enumeration value for fillMode that does not transform the image, unlike other fillMode enumeration values.
• New ShaderEffect and ShaderEffectSource types enable GLSL shader programs to be integrated directly into QML code and applied to QML items and images. (This obsoletes the experimental Qt.labs.shaders module.)
• New SpriteSequence type renders animated sprites and can transition between animations. Each animation in a sequence is represented by the new Sprite type.
• New AnimatedSprite type for drawing single sprite animations.

Animations and Transitions

• New AnimationController type enables an animation to be manually driven by a progress value.
• New PathAnimation type animates an item along a Path.
• New PathInterpolator type provides updated attribute values for an item animating along a path. It can be used as an low-level alternative to PathAnimation.
• Transition:
  • New running property holds whether a transition is currently running.
  • New enabled property controls whether a transition is enabled.

Paths

• New PathArc type creates an arc-type path.
• New PathCurve type creates a catmull-rom curve path.
• New PathSvg type creates a path from a SVG string.
• Changes common to PathLine, PathQuad and PathCubic:
  • New relativeX and relativeY properties define the start and end points of a path relative to its start.
• PathCubic only:
  • New relativeControl1X, relativeControl1Y, relativeControl2X and relativeControl2Y properties define the positions of the control points relative to the start of the curve.
• PathQuad only:
  • New relativeControlX and relativeControlY define the positions of the control points relative to the start of the curve.

Text

• Changes common to Text, TextEdit and TextInput:
  • New contentWidth and contentHeight properties provide the dimensions of the textual content.
  • New effectiveHorizontalAlignment property provides the read-only actual horizontal alignment.
• Changes common to both TextEdit and TextInput:
  • New canUndo and canRedo properties specify whether undo and redo operations are available.
  • New getText() method returns the text located between specified start and end indexes. Additionally TextEdit has a getFormattedText() method that returns the formatted text.
• Text only:
  • Text.RightElide is now supported where text spans multiple lines.
  • New linkColor property controls the color of linked text.
  • New lineLaidOut signal is emitted for every line during the layout process to give the option of positioning and/or resizing lines as they are laid out.
  • New doLayout() method will trigger the text layout from Javascript.
  • New fontSizeMode property allows text to be fitted to the item size.
  • New minimumPixelSize and minimumPointSize properties can be used to specify a lower bound when auto-fitting.
• TextEdit only:
  • New baseUrl property specified the base URL used to resolve relative URLs within the text.
• TextInput only:
  • New wrapMode property sets the text wrapping mode.
  • New horizontalAlignment and verticalAlignment properties.
  • New length property provides the total number of text characters.
  • New persistentSelection property enables the text selection to persist when the window loses focus.
  • positionAt() method now takes a y parameter.

User Input

• New MultiPointTouchArea type processes multi-point touches and provides information on touch points including position, pressure and velocity. Touch point data is provided by the new TouchPoint type.
• New DropArea type provides more advanced drag and drop functionality.
• MouseArea:
  • Wheel events are now supported; events are provided through the new WheelEvent type.
  • New propagateComposedEvents property sets whether composed events are propagated to other mouse areas. If this property is true and the handlers of the clicked, doubleClicked or pressAndHold signals reject a mouse event, the event will be propagated to overlapping MouseArea items in the same area that are lower in the stacking order.
  • New cursorShape property controls the cursor shape.

Specialized Containers

• Flickable:
  • New rebound property specifies the transition to be applied when a flickable snaps back to its bounds.
  • New topMargin, bottomMargin, leftMargin, rightMargin allow extra margin space to be specified for a flickable. This can be used, for example, to implement pull-to-refresh functionality for a list.
  • New originX and originY properties provide the top left position of the content item.
  • New dragging, draggingHorizontally and draggingVertically properties provide information on whether a flickable is currently being dragged.
  • New flick() method flicks the view with a specific velocity.
  • New cancelFlick() method stops any current flicking movement.

Positioners (Row, Column, Grid, Flow types):

• Changes common to Row, Column, Grid and Flow:
  • The add and move transitions can access a new ViewTransition attached property (see the ViewTransition documentation for examples) and can now animate arbitrary item properties (instead of being restricted to animating an item's position).
  • New effectiveLayoutDirection property provides the read-only actual layout direction of a positioner.
  • New Positioner type provides index, isFirstItem and isLastItem attached properties for items within positioners.
  • All spacing properties on positioners now use real numbers instead of integers.
• Grid only:
  • New rowSpacing and columnSpacing properties.

Models and Views

• Any delegate of a view that uses a QAbstractItemModel-derived model type can use the syntax model.<role> = <newDataValue> to modify the data for a particular role. (Previously, the model.<role> syntax was only available for reading, not writing to, a role value.)
• ListModel:
  • By default, roles can no longer change type during a model's lifetime. The new dynamicRoles property can be set to restore the original (less performant) behavior.
• VisualDataModel:
  • Now has features to filter the items to be displayed in a view. This is supported by the new groups, filterOnGroup, items and persistedItems properties.
• Changes common to both ListView and GridView:
  • New transition support for animating the adding, removing and moving of items in a ListView or GridView. See the ViewTransition documentation for details.
  • New verticalLayoutDirection property enables items to be laid out from bottom-to-top using the new BottomToTop enumeration value.
  • New headerItem and footerItem properties provide access to the instantiated header and footer items.
  • The cacheBuffer property now has a non-zero default.
  • Delegates in the cache buffer are now created asynchronously.
  • Setting a RightToLeft layout now also reverses the preferredHighlightBegin and preferredHighlightEnd.
  • If the model is changed after the component is completed, currentIndex is reset to 0.
• ListView only:
  • New section.labelPositioning property can fix the current section label to the start of the view, and the next section label to the end of the view, to prevent labels from scrolling while section items are still in view.
  • highlightMoveSpeed and highlightResizeSpeed have been renamed to highlightMoveVelocity and highlightResizeVelocity.
• GridView only:
  • cellWidth and cellHeight now use real numbers instead of integers.
• PathView:
  • New currentItem property holds the current item in the view.
  • New maximumFlickVelocity property controls the maximum flick velocity of the view.
  • New snapMode property controls the snap model when flicking between items
  • If the model is changed after the component is completed, the offset and currentIndex are reset to 0.
  • New positionViewAtIndex() function allows the view to be moved to display the specified index.
  • New indexAt() and itemAt() functions return the index or item at a specified point in the view.

Utility types

• New Accessible attached property for implementing accessibility features in QML applications.
• Loader:
  • New asynchronous property allows components to be instantiated with lower chance of blocking. If source is used with asynchronous: true the component will be compiled in a background thread.
  • New active property can delay instantiation of a Loader object's item.
  • New setSource() method loads an object with specific initial property values, similar to Component::createObject().
• Binding:
  • This type can now be used as a value source, and will also restore any previously set binding when its when clause becomes false.

Property types

Support for various math and geometry-related value types, including QVector2D, QVector3D, QVector4D, QMatrix4x4 and QQuaternion, as well as QColor and QFont, are now provided by Qt Quick. Properties of these types can be declared in QML documents via the property syntax where the type name is vector2d, vector3d, vector4d, matrix4x4, quaternion, color and font respectively.

Qt Quick also provides implementation for the various value type factory or utility functions of the Qt object which return or operate on values of the above types. The functions are:

The Qt.rgba(), Qt.hsla(), Qt.tint(), Qt.lighter(), Qt.darker() and Qt.fontFamilies() functions already existed in QtDeclarative prior to Qt Quick 2; the other functions are all new in Qt Quick 2.

Qt 5.0 - Additional QML Modules

QtQuick.Particles

This new module provides particle system support for creating a variety of 2D particle systems. See the QtQuick.Particles documentation for comprehensive details.

This obsoletes the experimental Qt.labs.particles module.

QtQuick.Window

This new module contains the Window type for creating a basic window and the Screen type for accessing a screen's resolution and other details. See the QtQuick.Window documentation for comprehensive details.

QtQuick.XmlListModel

This new module contains XmlListModel and associated types, which were previously in the QtQuick module. See the QtQuick.XmlListModel documentation for details.

QtQuick.LocalStorage

This new module provides access to the SQL Local Storage API that was previously accessible from the QML Global Object. See the QtQuick.LocalStorage documentation for details.