[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!

[GüntherFelgo 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).

 

[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.

[GüntherFelgo 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).