Forums

OverviewV-Play 2 Support (Qt 5)AppButton width › Reply To: AppButton width

OverviewV-Play 2 Support (Qt 5)AppButton width › Reply To: AppButton width
#12166

Günther
V-Play Team

Hi Radek!

The V-Play AppButton applies a default style to the simple QML Button.
The button itself either uses a minimum width (applied for short texts) or resizes with the text and adds a horizontal padding (like when u add spaces). The final width of the button then also includes a default horizontal margin left and right of the button.

The values can be configured with the AppButton properties: horizontalPadding, horizontalMargin and minimumWidth.
Another options is to use the Theme.appButton properties to change the default values for all buttons.

import VPlayApps 1.0
import QtQuick 2.5
import QtQuick.Controls 1.4

App {
  id: app

  onInitTheme: {
    // general app button style settings
    Theme.appButton.height = dp(40) // default button height
    Theme.appButton.minimumWidth = dp(150) // minimum button width (if no flat button)
    Theme.appButton.flatMinimumWidth = dp(100) // minimum width if flat button style
    Theme.appButton.verticalMargin = 0 // vertical margin top and bottom of button
    Theme.appButton.horizontalMargin = 0 // horizontal margin left and right of button
    Theme.appButton.horizontalPadding = 0 // padding left and right (button to button text)
  }

  NavigationStack {
    splitView: false

    Page {
      title: qsTr("Bigger button")

      Column {
        anchors.left: parent.left
        anchors.right: parent.right

        Button {
          text: "Does work"
          anchors.horizontalCenter: parent.horizontalCenter
          width: parent.width * 0.3
        }

        AppButton {
          text: "Default"
          anchors.horizontalCenter: parent.horizontalCenter
        }

        AppButton {
          text: "Custom"
          anchors.horizontalCenter: parent.horizontalCenter

          // individual settings
          verticalMargin: dp(10)
          horizontalPadding: dp(10)
          minimumWidth: parent.width * 0.3
        }
      }
    }
  }
}

 

Best,
Günther

  • This reply was modified 2 years, 7 months ago by  GT.

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