Qt Quick Components

Introduction to the Qt Quick components

The Qt Quick components are built on top of Qt Quick and provide native-look user interface elements for your QML-based application. They are bundled together as a module that you can import into your QML file. Once you have imported the components module, you can use the components just as you would use standard QML elements such as Rectangle and Text. As with normal QML applications, you can still use JavaScript and/or Qt C++ for the business logic of your application.

Developing cross-platform applications with the components

The components are implemented separately for both Symbian and MeeGo. This has been done so that they can be easily made to match the native look and feel of each platform. In order to keep the implementations compatible, there is a common API definition that each implementation must comply with. This means you can use components based on the common APIs for your application interface and it will work on both platforms.

However, a platform often has ways of doing things that are particular to that platform. During the development of the components, a design decision was made to implement these platform-specific features as extensions to the common APIs or as separate components where appropriate. This keeps the common APIs small and streamlined rather than becoming bloated by all the little bits and pieces special for every platform. So, when developing an application, you can develop the core of your user interface in a cross- platform manner. After you have that done, you can optimise your the interface to take advantage of features specific to each particular platform. In practice, this means you need to create separate variant files for the parts of your application that use platform-specific features. However, these differences are generally small and, due to the declarative nature of the QML language, it is fast to create these variants.

So, in summary:

  • Common API components - These APIs are common to each platform and auto-tests ensure that each platform conforms to these standardised APIs.
  • Common API components with platform-specific extensions - These are properties, methods and signals that extend a common API and are only available on a particular platform. They are identified by "platform" at the start of the name, for example: Button::platformPressAndHold.
  • Platform-specific components - These components are only available for a particular platform.

Note: The common API extensions and platform-specific components are always over and above the standard APIs and components; they are never a replacement for them. In practice this means you can use the core set of common APIs and be sure that your application will work on all the platforms. However, you can also customise your application to take advantage of platform-specific features.

Using the components

You can use the Qt Quick components in your QML application with one of the following imports at the top of your QML document:

 import com.nokia.symbian    // Symbian components
   _or_
 import com.nokia.meego      // MeeGo components

There is also a cross-platform import in development but you should consider it as "experimental" for now. Don't be surprised if it doesn't work how you might expect.

 import Qt.labs.components.native 1.0  // Qt Quick components

Note: Do not use the cross-platform import and a platform-specific import at the same time or you could end up with confusing error messages.

Types of components available

This table groups the components together by function. Note that some components are included in multiple sections. You can also find a list of all the components here: Components reference

Buttons and selectors

Button, CheckBox, RadioButton, Switch

Typical widgets for user input.

Checkable, CheckableGroup

Utility components the provide logic for other components.

Bars and sliders

Slider, ProgressBar, RatingIndicator

For displaying and inputting a value within a range of values.

Text element.

TextArea, TextField

For text input. See also: Text.

Input

ToolBar, ToolButton, ToolBarLayout

For creating a tool bar for common actions.

ContextMenu, Menu, MenuContent, MenuLayout

For creating menus to provide access to less common actions.

Lists

ListHeading, ListItem, ListItemText

For displaying information in a list and customising the presentation of the content. See also List, Grid.

Popups and dialogs

ToolTip, Popup, Dialog, CommonDialog

Assorted ways of providing information to the user and requesting information.

SelectionDialog, SelectionListItem

A specialised dialog for selecting from a list of items.

BusyIndicator, Fader

Utility components for a better user experience.

Navigation

Window

Contains your whole application user interface.

TabBar/TabButton/TabGroup/TabBarLayout/Page

For creating an interface that has tabs and pages of content.

PageStack/Page

For creating a hierarchical stack of pages to navigate in. See also Symbian list view.

Containers

Window

For containing the whole interface of your appliation. See also: Item, Rectangle.

ToolBarLayout, TabBarLayout, MenuLayout

Components for laying out a set of items. See also: Row, Column, Repeater.

Decorators

ScrollBar, ScrollBarSizer, ScrollDecorator, SectionScroller, SectionScrollerLabel

For providing information about the users location inside a large list or area.

Deprecated

ChoiceList

Do not use these.