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:

http://i.stack.imgur.com/ctSHJ.jpg

And this is what I've got:

http://i.stack.imgur.com/twSGY.jpg

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
    }
}
}

[p3c0]

Hi @rostamiani,
You have hard-coded a lot of x and y which you have probably adjusted according to your development system's resolution and thus when you execute it on android device it just tears apart. To avoid this its better to make use of Layout's such as RowLayout and ColumnLayout. The Layouts take care of all the resizing and positioning of the items added into it. Also make sure that you donot hardcode the position values unless there is no other option.
The above that you were trying can be done as follows:

Rectangle {
    anchors.centerIn: parent
    width: 200
    height: 120
    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.alignment: Qt.AlignCenter
            TextField {
                placeholderText: qsTr("Text1")
            }
            Label {
                text: qsTr("Label1")
            }
        }
        RowLayout {
            Layout.alignment: Qt.AlignCenter
            TextField {
                placeholderText: qsTr("Text2")
            }
            Label {
                text: qsTr("Label2")
            }
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            text: "Button"
        }
    }
}

P.S: Please use ``` (3 backticks) while posting the code so that it gets indented nicely. Otherwise it is difficult to read the code. I have done it for you now.

[rostamiani]

@p3c0 There is some "Unknown Component" and "Invalid property name" errors in your code.
On these components:

ColumnLayout
RowLayout
Layout.alignment: Qt.AlignCenter

[p3c0]

@rostamiani That's right. It's an incomplete code. I just posted the code of interest. You will need to import following:

import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

[rostamiani]

@p3c0 I'm using QtQuick 2 nstead of 1.1
Is the 1.1 better?

[p3c0]

@rostamiani QtQuick is the base module while everything after the . i.e .Controls or .Layouts are its submodules. The current versions for them are 1.3 and 1.1 respectively. The example that I posted works with QtQuick 2.0 and greater with submodule versions 1.0 and greater and later but not with QtQuick 1.1. It is an older version. So better stick to QtQuick 2.0 and greater.

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

[rostamiani]

@p3c0 Thanks a lot. It's so good.
Then I should not use anchor anymore. Is it right?

[p3c0]

@rostamiani Well it depends. Layout can satisfy most of the needs. But in some cases it may be required. Like in the example that I posted you can see anchors.fill: parent for ColumnLayout to bring it to center in relative to its parent i.e Rectangle.
More info here.
Edited: Posted link.

[rostamiani]

Thanks ... but I still have problems.
The form itself is perfect but the parent rectangle has hardcoded width and height. Then when executing on mobile is so smaller than form elements.

How can I position this rectangle in the middle of screen with needed width and height?

[p3c0]

@rostamiani Well in that case you will need to calculate the width and height depending upon the resolution. For eg: I want the width of Rectangle as 50% of parent's width then I'll just multiply its width with 0.5 and assign to Rectangle

Rectangle {
    width: parent.width*0.5
    height: parent.height*0.4
}

Above is just a generic example. In actual case DPI too matters.
Have a look at this document for how to do it in device independent way.

[rostamiani]

@p3c0
I did this, in this way the size of rectangle changes on window size. But the form elements are fixed!
The size of rectangle should change based on size of the contents.

[p3c0]

@rostamiani Make use of the other Layout properties as described here. Set them for TextField and other items.