Qt Creator Manual

Creating Components

A QML component provides a way of defining a new type that you can re-use in other QML files. A component is like a black box; it interacts with the outside world through properties, signals, and slots, and is generally defined in its own QML file. You can import components to screens and applications.

You can use the following QML elements to create components:

  • Border Image uses an image as a border or background.
  • Image adds a bitmap to the scene. You can stretch and tile images.
  • Item is the most basic of all visual items in QML. Even though it has no visual appearance, it defines all the properties that are common across visual items, such as the x and y position, width and height, anchoring, and key handling.
  • Rectangle adds a rectangle that is painted with a solid fill color and an optional border. You can also use the radius property to create rounded rectangles.
  • Text adds formatted read-only text.
  • Text Edit adds a single line of editable formatted text that can be validated.
  • Text Input adds a single line of editable plain text that can be validated.
  • Web View adds web content to a canvas.

You can experiment with a set of Qt Quick components that are designed to appear native to the Symbian devices target platform. For more information, see Qt Quick components for Symbian Technology Preview.

You can dowload a set of commonly used UI-components for generic use in Qt Quick projects from QML Templates. You can open and edit the templates in Qt Designer.

Creating Components in Qt Quick Designer

  1. Select File > New File or Project > Files and Classes > QML > Choose... to create a new .qml file.

    Note: Components are listed in the QML Components section of the Library pane only if the filename begins with a capital letter.

  2. Click Design to open the .qml file in Qt Quick Designer.
  3. Drag and drop an item from the Library pane to the editor.
  4. Edit item properties in the Properties pane.

    The available properties depend on the item.

The following sections contain examples of how to create some common components:

X

Thank you for giving your feedback.

Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.

[0]; s.parentNode.insertBefore(ga, s); })();