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*appDen sityRatio()));
} 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.appDen sity*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;
}
}

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
}

Child windows are sized with
anchors.fill: parent 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
}
}