Forums

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #12160

    Radek

    Hi, is there a way to edit AppButton’s width? I find it’s width too small when running the app on a bigger screen, and I don’t want to insert spaces to make it bigger.

     

    import VPlayApps 1.0
    import QtQuick 2.5
    import QtQuick.Controls 1.4
    
    App {
    
        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: "Doesn't work"
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width * 0.3
                    }
    
                    AppButton {
                        text: "                            Somewhat works                            "
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width * 0.3
                    }
                }
            }
        }
    }
    

     

    #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, 10 months ago by  GT.
    #12204

    Radek

    Hi Günther, thanks for the answer. I guess that’s gonna work for me, however I noticed that in your example the AppButtons width is never descreasing when you decrease apps width. Is that intended?

    #12206

    Günther
    V-Play Team

    Hi Radek!
    Thank you for pointing that out – it is not intended! We will fix that for the next update. 😉

    Best,
    Günther

Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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