How to change the geometry of main window programmatically at run time w.r.t QML?

Question

I have Qt Creator 2.6.1. I created simple Qt Qucik 2.0 project from project templates and changed main.qml file on this:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: parent.height = 180
    }
}

If i will click on rectangle it should be reduced in half. And it is occured, but window is not reduced.

What is a best solution, if i want that main window must repeat geometry of main qml rectangle?

UPDATE. One solution was found. See Amit Tomar answer. But is exist more easier solution, for example, using QtQuick 5.0: Qt Quick Window QML Types ?

Answer 1

You are changing the geometry of your qml, not the Viewer. To do so:

1. Geometry of the viewer can be changed using the QmlApplicationViewer object you would have created in your main function.
2. But that object is in C++, so you need to expose a C++ function to qml, and call that function on click of this button.

Steps:

1. Create a class and store the Application viewer object created in the main.cpp, inside this class for further calls.
2. Expose a function in this class to qml. This function shall be able to modify the size using the application viewer object stored in the class.
3. On click of qml rectangle, call this function.

main.cpp

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "qdeclarativecontext.h"

#include "myclass.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QmlApplicationViewer *viewer = new QmlApplicationViewer();

    MyClass myClassObject(viewer);
    viewer->rootContext()->setContextProperty("myViewer", &myClassObject);
    viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer->setMainQmlFile(QLatin1String("qml/untitled/main.qml"));
    viewer->showExpanded();

    return app.exec();
}

myclass.h

#ifndef MYCLASS_H
#define MYCLASS_H

#include "qmlapplicationviewer.h"

class MyClass : public QObject
 {
     Q_OBJECT

 public:

    MyClass( QmlApplicationViewer * p ) { internalViewer = p ; }
    Q_INVOKABLE void viewerResize(int x, int y, int length, int breadth)

     {
       internalViewer->setGeometry(internalViewer->x(),internalViewer->y(),length,breadth);
     }

private:

    QmlApplicationViewer *internalViewer;
 };

#endif // MYCLASS_H

main.qml

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: "Hello World"
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked:
        {
            myViewer.viewerResize(0,0,110,110)
        }
    }
}

Answer 2

The ApplicationWindow desktop control gives you the window sizing capability you want:

import QtQuick 2.0
import QtQuick.Controls 1.0

ApplicationWindow {
    id: container
    width: 360
    height: 360
    color: "Red"

    MouseArea {
        anchors.fill: parent
        onClicked: container.height = 180
    }
}

Note: I could not use just parent.height in onClicked -- I had to refer to the window by id.