Qt Creator Manual | Creating Scalable Buttons and Borders

Qt Creator Manual 4.5.2

Creating Buttons ◦ Creating Screens

# Creating Scalable Buttons and Borders

You can use the Border Image type to display an image, such as a PNG file, as a border and a background.

Use two border images and suitable graphics to make it look like the button is pushed down when it is clicked. One of the border images is visible by default. You can specify that it is hidden and the other one becomes visible when the mouse is clicked.

Add a Mouse Area type that covers the whole area and emits the clicked signal (`item.clicked()`) when it detects a mouse click.

You can add text to the button and set it up as a property. The text can then be initialized from the outside, making the button a reusable UI component. The font size is also available in case the default size is too big. You can scale down the button text and use smooth text rendering for some extra quality.

To create a graphical button:

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 pane.
4. Select Connections > Properties > Add to add properties for the item:

   1. Double-click in the columns in the view to specify a `text` property with the type `string` and an empty value.
   2. Specify another property, `fontSize`, with the type `int` and the value `10`.
5. Drag and drop two Border Image types from the Library to the item in the Navigator.
6. Drag and drop a Text type to the item in the navigator.
7. Drag and drop a Mouse Area to the item in the navigator.
8. In the navigator, select a border image to specify settings for it in the Properties pane:
   1. Select Connections > Bindings > Add to hide the image when the mouse button is not pressed down. Specify the `visible` property with the `!mouseArea` source item and `pressed` source property.

   2. In the Source field, select the image file for the button, for example button_up.png.
   3. Click Layout, and then click the (Fill to Parent) button to anchor the border image to the Item.
9. Select the other border image to specify similar settings for it:
   1. In Bindings, specify the `visible` property with the `mouseArea` source item and `pressed` source property to show the image when the mouse button is pressed down.
   2. In the Source field, select the image file for the button when it is clicked, for example button_down.png.
   3. Select Layout > Fill to Parent button to anchor the border image to the Item.
10. Select the text to specify font size and color, and text scaling and rendering:
    1. In the Color field, use the color picker to select the font color, or enter a value in the field.
    2. In Bindings, create bindings to properties:

       - Set the source property of the `text` property as `text` and the source item as `parent`.
       - Set the source property of the `font.pixelSize` as `fontSize` and the source item as `parent`.
       - Set the source property of `scale` as `if (!mouseArea` and the source item as `pressed) { 1 } else { 0.95 }`.
    3. Click Layout, and then click the (Set Vertical Anchor) and (Set Horizontal Anchor) buttons to inherit the vertical and horizontal centering from the parent.
11. Select mouseArea in the navigator and then select Connections > Add to set `item.clicked()` as the value of the `onClicked` signal handler.

12. In the Text Editor, specify the `clicked` signal for the Item:

          Item {
              id: item
              property string text: ""
              property int fontSize: 10

              signal clicked
          }

Note: To test the button, add it to a Qt Quick Application or Qt Quick UI project and run the application.