Creating Buttons

To create a button type:

  1. Select File > New File or Project > Qt > QML File (Qt Quick 2) > Choose to create a QML file called Button.qml (for example).

    Note: Types are listed in the Library only if the filename begins with a capital letter.

  2. Click Design to edit the file in the visual editor.
  3. In the Navigator, select Item and set the width (W) and height (H) of the button in the Properties pane.
  4. Drag and drop a Rectangle from the Library to the item in the navigator. This creates a nested item where the item is the parent of the rectangle. Items are positioned relative to their parents.
  5. In the Properties pane, modify the appearance of the rectangle:
    1. In the Color field, select the button color.
    2. In the Radius field, use the slider to set the radius of the rectangle and produce rounded corners for the button.
    3. Select Layout, and then select the (Fill to Parent) button to anchor the rectangle to the item.
  6. Drag and drop a Text type to the item in the navigator.
  7. In the Properties pane, edit the properties of the Text type.
    1. In the Text field, type Button.

      You can select the text color in the Text color field and the font, size, and style in the Font section.

    2. In the Alignment field, select the center buttons to align the text to the center of the button.
    3. Select Layout > Fill to Parent to anchor the text to the whole button area.
  8. Press Ctrl+S to save the button.

    "Button component"

To create a graphical button that scales beautifully without using vector graphics, use the Border Image type. For more information, see Creating Scalable Buttons and Borders.

© 2016 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.