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 Form Editor.
  3. In the Navigator, select Item and set the width (W) and height (H) of the button in the Properties view.
  4. Drag and drop a Rectangle from the Library to the item in 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 view, modify the appearance of the rectangle:
    1. In the Color field, select the button color.
    2. In the Radius field, set the radius of the rectangle to 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 Navigator.
  7. In the Properties view, edit the properties of the Text type.
    1. In the Text field, enter 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 be useful, the button type has to be created in a project. When you work on other QML files in the project to create screens or other components for the UI, the button type appears in the My QML Components tab of the Library view. You can use it to create button instances and modify their properties to assign them useful IDs, change their appearance, and set the button text for each button instance, for example.

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.

© 2020 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.