StyledButton

The StyledButton has a gradient, radius and border and an optional flatStyle, ready to be published in games & apps. More...

Import Statement: import VPlay 2.0
Since: V-Play 2.3.0
Inherits:

SimpleButton

Properties

Detailed Description

The StyledButton is a skinned Qt Quick Controls Button that has the same style across platforms: a white-to-grey gradient, black textColor, 4px radius and a dark-grey border color. You can also set the flatStyle property to true to get a button without border color and no gradient.

You can use this button in published games as it looks more polished than the SimpleButton. It changes its background color when the button is hovered (only works on Desktop with a mouse input) and when the button is pressed.

The default size values for StyledButton are the size of the contained text. So the longer the text, the bigger the StyledButton is. You can change the default size and behavior of the StyledButton by creating a new qml file that has the StyledButton 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.

Alternative button components are ButtonVPlay and SimpleButton. 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 {

     StyledButton {
       text: "Toggle Physics"

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

   }
 }

Button Styling

The StyledButton provides several properties that make most popular styling requirements easier without setting an own ButtonStyle.

Example for Simple Button Styling:

 import VPlay 2.0

 StyledButton {

   // these are the default values, change the ones youÄd like to change
   color: "#ccc"
   textColor: "black"
   gradientTopColorLighterFactor: 1.15
   radius: 4
   borderWidth: activeFocus ? 2 : 1
   borderColor: "#888"
 }

For more advanced styling, assign a ButtonStyle to the style property.

Example for Advanced Button Styling:

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

 StyledButton {
   id: styledButton

   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: styledButton.pixelSize
       color: styledButton.textColor
       text: styledButton.text
     }
   }
 }

Property Documentation

borderColor : color

The border color of the background rectangle.

The default value is a grey color with code "#888".


borderWidth : int

The border color of the background rectangle.

The default value is 2 if the button has focus, otherwise 1.


flatStyle : bool

Set this property to enable a flat style, which has these changes:

  • No color gradient.
  • No border.

The default value is false, so there is no flat style used.

Especially for mobile UIs, flat styles are sometimes preferable.


gradientBottomColor : color

The color at the bottom of the color gradient.

The default value is color.

See also gradientTopColor.


gradientTopColor : color

The color at the top of the color gradient.

The default value is Qt.lighter(color, gradientTopColorLighterFactor).

See also gradientTopColorLighterFactor and gradientBottomColor.


gradientTopColorLighterFactor : real

The gradientTopColor is made ligther by this factor for the top of the used color gradient.

The default value is 1.15.

To disable the gradient, set this factor to 1.

See also gradientTopColor and color.


radius : int

The background rectangle radius.

The default value is 4.


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