Rozmiar elementów na różnych ekranach

Cześć!

Uczę się qml'a i tworzone aplikacje testuje od razu na desktopie i androidzie.

Pojawił mi się problem z wielkościami elementów na ekranie.

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

ApplicationWindow{
    visible: true
    width: 640
    height: 480

    Rectangle{
        width: 64
        height: 64
        color: "pink"

        Text{
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            text: "Hello :)"
        }
    }
}

Na Desktopie wyświetli się kwadrat z mieszczącym się w nim napisem Hello :)
Na a Androidzie, tekst jest dobrych rozmiarów(czytelny) lecz kwadrat jest tak mały, że tekst się nie mieści.

Jak definiować rozmary, by miało to ręce i nogi?
Znalazłem coś takiego:

property int default_pix_density: 4  //pixel density of my current screen
property int scale_factor: Screen.pixelDensity/default_pix_density
Rectangle
{
    width: 50*scale_factor
    height: 20*scale_factor
}

Ale ta metoda w dobie tak rozwiniętych języków programowania, woła o pomstę do nieba...

Rozmiary/marginesy podawaj w % a nie px.

Nie wpisuj wartości z ręki.

Zrób sobie na samym początk dwie zmienne przechowujące wymiary ekranu i to do nich się odnoś w dalszych częściach programu albo do bezpośredniego rodzica:

 
ApplicationWindow {
    id: myMainWindow
    visible: true
    width: Screen.width
    height: Screen.height

...
}

Oraz jakiś ogranicznik co do wielkości kwadratu opakowującego tekst, wklejam jakiś losowy plik z przyciskiem, przeanalizuj sobie:

Item {
    property string sWBText //text to print
    property string sWBTextColor //default text color
    property string sWBTextColorPressed //color of text while pressed
    property string sWBBorderColor //default border color
    property string sWBBorderColorOn //on entered
    property string sWBColor  //black
    property string sWBcolorPressed //aquamarine

    signal buttonClicked

    id: stopWatchButtonRoot
    width: parent.width/2.5
    height: parent.height/10

    Rectangle {
        id: stopWatchButtonRect
        //anchors.fill: parent wywalam na potrzeby tego przykładu, zamiast tego użyjemy width i height
        width: stopWatchButtonText.width*1.2
        height: stopWatchButtonText.height*1.2
        border.color: sWBBorderColor
        border.width: 3
        color: stopWatchButtonMouseArea.pressed ? sWBcolorPressed : sWBColor

        Text {
            id: stopWatchButtonText
            font.pointSize: stopWatchButtonRoot.width/12
            anchors.centerIn: parent
            text: sWBText
            color: stopWatchButtonMouseArea.pressed ? sWBTextColorPressed : sWBTextColor
        }

        MouseArea {
            id:stopWatchButtonMouseArea
            anchors.fill: parent
            hoverEnabled: true
            onEntered: stopWatchButtonRect.border.color = sWBBorderColorOn
            onExited: stopWatchButtonRect.border.color = sWBBorderColor
            onClicked: buttonClicked()
        }
    }
}
 

Ok, robię GridView i co wpisać w cellWidth oraz cellHeight ?
Chciałbym, aby itemów w wierszu na Desktopie mieściło się więcej, a na Androidzie (trzymając telefon pionowo) mieściło się mniej, bo wiadomo telefon jest węższy od monitora na Desktopie.

Poszerzając aplikację na Desktopie, itemy(kafelki) się nie powiększają - po prostu w wierszu mieści się więcej.
Takie zachowanie jak w ustawieniach w KDE: