Qt Quick output is displaying incorrectly after compile

[rostamiani]

I designed a form in Qt Quick and compiled it for Android. When executed on simulated Android device the form appears completely different!

I aligned the components to each other but nothing changed! (All items are in a Rectangle)

This is what I designed:



And this is what I've got:



This is the QML:

import QtQuick 2.2
import QtQuick.Controls 1.1
 
ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
menuBar: MenuBar {
    Menu {
        title: qsTr("File")
        MenuItem {
            text: qsTr("Exit")
            onTriggered: Qt.quit();
        }
    }
}
 
Rectangle {
    id: rectangle1
    x: -273
    y: 145
    width: 223
    height: 128
    color: "#ffffff"
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
 
    TextField {
        id: textField1
        y: 18
        text: qsTr("")
        anchors.left: parent.left
        anchors.leftMargin: 16
        placeholderText: qsTr("نام کاربری")
    }
 
    Label {
        id: label1
        y: 25
        text: qsTr("نام کاربری")
        anchors.left: textField1.right
        anchors.leftMargin: 19
    }
 
    TextField {
        id: textField2
        y: 57
        width: 127
        height: 20
        text: qsTr("")
        anchors.left: parent.left
        anchors.leftMargin: 16
        placeholderText: qsTr("کلمه عبور")
    }
 
    Label {
        id: label2
        y: 64
        text: qsTr("نام کاربری")
        anchors.left: textField2.right
        anchors.leftMargin: 19
    }
 
    Button {
        id: button1
        x: 74
        width: 75
        height: 23
        text: qsTr("ورود")
        anchors.top: textField2.bottom
        anchors.topMargin: 20
    }
}
}

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

menuBar: MenuBar {
    Menu {
        title: qsTr("File")
        MenuItem {
            text: qsTr("Exit")
            onTriggered: Qt.quit();
        }
    }
}

Rectangle {
    id: rectangle1
    x: -273
    y: 145
    width: 223
    height: 128
    color: "#ffffff"
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter

    TextField {
        id: textField1
        y: 18
        text: qsTr("")
        anchors.left: parent.left
        anchors.leftMargin: 16
        placeholderText: qsTr("نام کاربری")
    }

    Label {
        id: label1
        y: 25
        text: qsTr("نام کاربری")
        anchors.left: textField1.right
        anchors.leftMargin: 19
    }

    TextField {
        id: textField2
        y: 57
        width: 127
        height: 20
        text: qsTr("")
        anchors.left: parent.left
        anchors.leftMargin: 16
        placeholderText: qsTr("کلمه عبور")
    }

    Label {
        id: label2
        y: 64
        text: qsTr("نام کاربری")
        anchors.left: textField2.right
        anchors.leftMargin: 19
    }

    Button {
        id: button1
        x: 74
        width: 75
        height: 23
        text: qsTr("ورود")
        anchors.top: textField2.bottom
        anchors.topMargin: 20
    }
}
}

To copy to clipboard, switch view to plain text mode 

[wysota]

You can clearly see the font size is different. Thus if you don't anchor elements in a way that they will push other elements apart when more space is required, you will not get a proper layout. It is unadvised to provide absolute values for all of x and y as well as width and height of your elements unless you really know what you are doing.