Qt Quick output is displaying incorrectly after compile
-
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 } } }
-
Hi @rostamiani,
You have hard-coded a lot ofx
andy
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 ofLayout
'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.
-
@p3c0 There is some "Unknown Component" and "Invalid property name" errors in your code.
On these components:ColumnLayout
RowLayout
Layout.alignment: Qt.AlignCenter -
@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
-
@p3c0 I'm using QtQuick 2 nstead of 1.1
Is the 1.1 better? -
@rostamiani
QtQuick
is the base module while everything after the.
i.e.Controls
or.Layouts
are its submodules. The current versions for them are1.3
and1.1
respectively. The example that I posted works withQtQuick 2.0
and greater with submodule versions1.0
and greater and later but not withQtQuick 1.1
. It is an older version. So better stick toQtQuick 2.0
and greater.import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Layouts 1.1
-
@p3c0 Thanks a lot. It's so good.
Then I should not use anchor anymore. Is it right? -
@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
forColumnLayout
to bring it to center in relative to its parent i.eRectangle
.
More info here.
Edited: Posted link. -
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?
-
@rostamiani Well in that case you will need to calculate the
width
andheight
depending upon the resolution. For eg: I want the width ofRectangle
as 50% of parent's width then I'll just multiply itswidth
with 0.5 and assign toRectangle
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. -
@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. -
@rostamiani Make use of the other
Layout
properties as described here. Set them forTextField
and other items.