Qt Reference Documentation

Introduction to the Qt Quick Components

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. You may then implement the business logic of your application with JavaScript or Qt C++.

Developing Applications with Components

The components are implemented separately for both Symbian and MeeGo 1.2 Harmattan to match the native look and feel of each platform. Components from both sets have similar interfaces and many components share a common interface. The compatible interfaces allows the developers to share some common code but give the freedom to customize their applications to each platform.

  • Symbian Components - A set of components for application development using the latest Symbian user interface design.
  • Extras Components - A set of components that add a few more components to the Symbian set.

Importing the Components

After building the components, you may import the components in your QML application with one of the following imports at the top of your QML document:

 import com.nokia.symbian 1.1    // Symbian components
 import com.nokia.meego 1.1      // MeeGo 1.2 Harmattan components

In addition, there are components that are extras. They supplement the platform components. For example, building the sources for the Symbian platform will also build the Extras Components for Symbian. The Extras, however, are imported as a different component set.

 import com.nokia.extras 1.1  //Symbian Extras set

Note: The latest version of the Symbian Components and Extras Components is 1.1 as specified in the import statements above. While version 1.0 is provided along with the newer version, it is advisable to import the latest version when developing applications. See What's new in the 1.1 release for further information.

The cross-platform components Checkable and CheckableGroup are located in a separate plugin. Use the following import statement when you need to utilize them:

 import Qt.labs.components 1.1

Interface Designs

Interface designs using QML differs from the traditional Qt UI designs. With the introduction of Qt Quick Components, there are several guidelines to help with making smart development decisions.