SimpleButton

The SimpleButton represents a basic rectangular button with a clicked handler that can be used during development. More...

Import Statement: import VPlay 2.0
Inherits:

Button

Inherited By:

StyledButton

Properties

Detailed Description

This component can be used during development to quickly create a button with a background Rectangle and a Text item. It changes its background color when the button is hovered (only works on Desktop with a mouse input) and when the button is pressed.

This component should in most cases not be used in the final version of a game, because it has a very basic look. However, you can use it for quickly adding buttons to test game functionality. For published games, use the StyledButton or ButtonVPlay instead (see the Button Comparison when to use which of them).

The default size values for SimpleButton are the size of the contained text. So the longer the text, the bigger the SimpleButton is. You can change the default size and behavior of the SimpleButton by creating a new qml file that has the SimpleButton as root element and then change your default button style. This custom component can then be used in your game during development, so you can quickly change all your button appearances afterwards.

Button Comparison

Alternative button components are ButtonVPlay and StyledButton. See this table when to use which button type:

Button Type Usage
SimpleButton A one-color button without radius or gradient to use during development.
StyledButton A button with a radius, gradient and border. Also has a flatStyle with no border, no gradient and smaller radius.
ButtonVPlay The ButtonVPlay wraps the QtQuick Controls Button and styles it with the StyleVPlay.

All of these button types can be customized by setting a style.

Example Usage

 import VPlay 2.0

 GameWindow {

   Scene {

     SimpleButton {
       text: "Toggle Physics"

       // these are the default values
       color: "darkblue"
       textColor: "white"
       pixelSize: 18


       onClicked {
         // .. enter code for toggling physics settings here ..
       }
     }

   }
 }

Button Styling

You can customize the look of the SimpleButton by assigning a ButtonStyle to the style property.

Example for Button Styling:

 import VPlay 2.0
 import QtQuick 2.0
 import QtQuick.Controls.Styles 1.0

 SimpleButton {
   id: styledSimpleButton

   style: ButtonStyle {

     background: Rectangle {
       implicitWidth: 100
       implicitHeight: 25
       border.width: control.activeFocus ? 2 : 1
       border.color: "#888"
       radius: 4
       gradient: Gradient {
           GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
           GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
       }
     }

     label: Text {
       anchors.centerIn: parent
       font.pixelSize: styledSimpleButton.pixelSize
       color: styledSimpleButton.textColor
       text: styledSimpleButton.text
     }
   }
 }

Property Documentation

color : color

The background color of the button.

The background color is modified when the button is hovered with the hoveredLighterFactor and when it is pressed with the pressedDarkerFactor.

The default color is "darkblue".

This QML property was introduced in V-Play 2.3.0.

See also textColor, hoveredLighterFactor, and pressedDarkerFactor.


hoveredLighterFactor : real

The background color is made ligther by this factor when the button is hovered.

To disable the change of background color at hovering, set this to 1.0. To make it darker, set it to a value smaller than 1.

The default value is 1.2.

This QML property was introduced in V-Play 2.3.0.

See also color and pressedDarkerFactor.


pixelSize : int

The text pixelSize. Use either an integer integer value if you use the SimpleButton in a Scene, or Scene::sp() for density-independent pixel size.

The default value is 18.

This QML property was introduced in V-Play 2.3.0.


pressedDarkerFactor : real

The background color is made darker by this factor when the button is pressed. To make it lighter, set it to a value smaller than 1.

To disable the change of background color at pressing, set this to 1.0.

The default value is 1.2.

This QML property was introduced in V-Play 2.3.0.

See also color and pressedDarkerFactor.


textColor : color

The text color. The default value is "white".

See also color.


Videos

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support