Application Development : Controls – Button

Button

You can use buttons in order to capture touch events in your application. A Button can display some text, an image, or both. You can set the following properties on a Button:

• For sizing, you can set the preferredWidth, minWidth, and maxWidth properties. A button’s height is fixed and you cannot change it. The button’s width is increased automatically in order to fit text and images. A button will truncate its text if the text content is wider than the maxWidth property.
• The button’s text property specifies the text that will be displayed on the Button.
• You can use the image or imageSource properties for specifying an image to be displayed on the Button. In most cases, you will use the imageSource property, which will usually correspond to the URL of an image located in a subfolder of your application’s assets folder (you can also use the image property to specify a Image wrapped as a QVariant).

The button will emit the clicked signal that you can handle in QML using the onClicked signal handler (see Listing 1).

Listing 1.  Button Clicked Signal

Button{
   id: button
   text: "mybutton"
   onClicked: {
      console.log("I was clicked!")
   }
}

The following best practices apply to buttons:

• Set the button that users are most likely to tap as the default button. Also, don’t make a button associated with a destructive action as the default button.
• Use single-word labels when possible.
• Use verbs that describe the associated action (for example: Login, Cancel, Delete, or Save).