Forums

OverviewFelgo 2 Support (Qt 5) › AppSlider doesn\'t resize with respect to resolution

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

    Kool

    Hi All,

    I want to use an AppSlider. When testing how it resizes after changing the app resolution, I noticed it doesn’t resize appropriately.

    Example:

    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Controls 2.0 as QuickControls2
    
    App {
        NavigationStack {
    
            Page {
                title: qsTr("Main Page")
    
                Column {
                    anchors.fill: parent
    
                    SimpleRow {
                        id: row
                        text: "Test: " + Math.round(slider.value)
    
                        AppSlider {
                            id: slider
                            anchors {right: parent.right; rightMargin: Theme.listItem.indent; verticalCenter: parent.verticalCenter}
    
                            width: dp(200)
                            onWidthChanged: console.debug(width)
    
                            implicitWidth: dp(200)
                            onImplicitWidthChanged: console.debug(implicitWidth)
    
                            from: 0
                            to: 7
                            value: 0
                            stepSize: 1
                            snapMode: QuickControls2.Slider.SnapAlways
                        }
                    }
                }
    
                Image {
                    source: "../assets/vplay-logo.png"
                    anchors.centerIn: parent
                }
            }
        }
    }
    

    Try changing the app resolution to the smallest one and notice how the AppSlider’s width doesn’t change.

    Any suggestions on how to get a resolution friendly AppSlider working?

    Many thanks!

    #17059

    Günther
    Felgo Team

    Hi Kool!

    I just performed the following:

    • copy your code and use as Main.qml
    • run on Desktop
    • switch between different resolutions in menu (e.g. iPhone 5 vs iPad 7)
    • use width: 200 instead of width: dp(200) and test again

    You should notice that the slider uses the correct density-independent width of dp(200).

     

    #17061

    Kool

    Thanks Gunther, I’ll give it a try.

    Out of curiosity, why don’t we need the density-independent width of dp(200) here? I thought the purpose of dp() was to scale items with respect to resolution.

    #17069

    Günther
    Felgo Team

    Well that is exactly the point of the test I did for the above reply. 😉

    You see a difference in the width between 200 px and 200 dp, which means the Slider width is correctly resizes when using dp(200).

     

     

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