Height/Width of Qt Quick Controls

[Mathan]

Hi,

I am developing an app using Qt5.7/Qt Quick controls.

I want to setup height/width for the QtQuicks controls like Textfiled/Button/Rectangle using QML.
I want to setup the height/width of the controls which adjust according to screen size/orientation of the target devices.
Now, I am providing the Pixel value which turn out a mess when the same app deployed in Tablets/smartphones.

[scgrant327]

I went with creating JavaScript functions that allow for me to specify % sizes, physical sizes, etc...:

//returns a density ratio of the current screen
function appDensityRatio () {
    return appWin.appDensity / 11.6129;          //appWin references the main window, and appDensity is set to Screen.pixelDensity
}
 
// returns the pixels that equate to the provided inches
function inchHeight(myInches){
    if( appDensityRatio() < 1.0 ) {
        if( appDensityRatio() >= 0.70 ) {
            return Math.round(myInches*(appWin.appDensity*25.4*appDensityRatio()));
        } else {
            return Math.round(myInches*(appWin.appDensity*25.4*0.70));
        }
    } else {
        return Math.round(myInches*(appWin.appDensity*25.4));
    }
}
 
//returns a size as a percentage of the given size
function psize(pcent,fullval){
    return pcent*(fullval/100)
} 
 
// returns the pixels that equate to the provided point size
function pointHeight(myPoints){
    if( appDensityRatio() < 1.0 ) {
        if( appDensityRatio() >= 0.70 ) {
            return Math.round(myPoints*Math.round(appDensityRatio()*(appWin.appDensity*25.4)/72.0));
        } else {
            return Math.round(myPoints*Math.round(0.70*(appWin.appDensity*25.4)/72.0));
        }
    } else {
        return Math.round(myPoints*Math.round((appWin.appDensity*25.4)/72.0));
    }
}
 
// returns the pixels that equate to the provided point size, used for FONTS only
function fontHeight(myPoints){
    if( Math.round(appWin.appPixelRatio*fHeight()) < 1280 ) {
         return Math.round(myPoints * 0.75);
     } else {
         return myPoints;
     }
}

//returns a density ratio of the current screen
function appDensityRatio () {
    return appWin.appDensity / 11.6129;          //appWin references the main window, and appDensity is set to Screen.pixelDensity
}

// returns the pixels that equate to the provided inches
function inchHeight(myInches){
    if( appDensityRatio() < 1.0 ) {
        if( appDensityRatio() >= 0.70 ) {
            return Math.round(myInches*(appWin.appDensity*25.4*appDensityRatio()));
        } else {
            return Math.round(myInches*(appWin.appDensity*25.4*0.70));
        }
    } else {
        return Math.round(myInches*(appWin.appDensity*25.4));
    }
}

//returns a size as a percentage of the given size
function psize(pcent,fullval){
    return pcent*(fullval/100)
} 

// returns the pixels that equate to the provided point size
function pointHeight(myPoints){
    if( appDensityRatio() < 1.0 ) {
        if( appDensityRatio() >= 0.70 ) {
            return Math.round(myPoints*Math.round(appDensityRatio()*(appWin.appDensity*25.4)/72.0));
        } else {
            return Math.round(myPoints*Math.round(0.70*(appWin.appDensity*25.4)/72.0));
        }
    } else {
        return Math.round(myPoints*Math.round((appWin.appDensity*25.4)/72.0));
    }
}

// returns the pixels that equate to the provided point size, used for FONTS only
function fontHeight(myPoints){
    if( Math.round(appWin.appPixelRatio*fHeight()) < 1280 ) {
         return Math.round(myPoints * 0.75);
     } else {
         return myPoints;
     }
}

To copy to clipboard, switch view to plain text mode 

Then I can set a size on the base window... and size everything on that size...

ApplicationWindow {
    id: main_window
    objectName: "main_window"
    x:0
    y:0
    width: Screen.width
    height: Screen.height
}

ApplicationWindow {
    id: main_window
    objectName: "main_window"
    x:0
    y:0
    width: Screen.width
    height: Screen.height
}

To copy to clipboard, switch view to plain text mode 

Child windows are sized with

anchors.fill: parent

anchors.fill: parent

To copy to clipboard, switch view to plain text mode 

and all child window objects are sized to their parent with calls like so:

Rectangle {         //Child Window (included in Main using a StackView)
    id: graphWindow
    border.color: "red"
    border.width: 2
    radius: 10
 
    Rectangle {              //Child object
        id: wspdChartRect
        color: appWin.rectBackColor
        anchors.left: parent.left
        anchors.leftMargin: Funcs.psize(1,graphWindow.width)
        anchors.right: parent.right
        anchors.rightMargin: Funcs.psize(1,graphWindow.width)
        anchors.top: parent.top
        anchors.topMargin: Funcs.psize(1,graphWindow.height)
        height: Funcs.psize(48,graphWindow.height)
        width: Funcs.psize(98,graphWindow.width)
        border.color: "red"
        border.width: 2
        radius: 10
        visible: true
    }
}

Rectangle {         //Child Window (included in Main using a StackView)
    id: graphWindow
    border.color: "red"
    border.width: 2
    radius: 10

    Rectangle {              //Child object
        id: wspdChartRect
        color: appWin.rectBackColor
        anchors.left: parent.left
        anchors.leftMargin: Funcs.psize(1,graphWindow.width)
        anchors.right: parent.right
        anchors.rightMargin: Funcs.psize(1,graphWindow.width)
        anchors.top: parent.top
        anchors.topMargin: Funcs.psize(1,graphWindow.height)
        height: Funcs.psize(48,graphWindow.height)
        width: Funcs.psize(98,graphWindow.width)
        border.color: "red"
        border.width: 2
        radius: 10
        visible: true
    }
}

To copy to clipboard, switch view to plain text mode