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.
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:
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.
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.
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. | |
For text input. See also: Text. | |
Input | |
For creating a tool bar for common actions. | |
ContextMenu, Menu, MenuContent, MenuLayout | For creating menus to provide access to less common actions. |
Lists | |
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. |
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. |
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. |
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 | |
Do not use these. |