Time for action – making the button a reusable component

So far, we have been working on a single button. Adding another button by copying the code, changing the identifiers of all components, and setting different bindings to properties are very tedious tasks. Instead, we can make our button item a real component, that is, a new QML type that can be instantiated on demand as many times as required.

First, position the text cursor right before the bracket opening of the definition of the button and press Alt + Enter on the keyboard to open the refactoring menu, like in the following screenshot:

From the menu, choose Move Component into Separate File. In the popup, type in a name for the new type (for example, Button) and accept the dialog by clicking on the OK button:

What just happened?

You can see that we have a new file called Button.qml in the project, which contains everything the button item used to have. The main file was simplified to something similar the following:

import...