Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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

  • Moderators

    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.



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

    ColumnLayout
    RowLayout
    Layout.alignment: Qt.AlignCenter


  • Moderators

    @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?


  • Moderators

    @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
    


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


  • Moderators

    @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.



  • 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?


  • Moderators

    @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.



  • @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.


  • Moderators

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


Log in to reply