QtOnAndroid

QML Window vs Widget

← QML Interactive UI Elements | ● | QML Example →

To instantiate a user interface that was declared with QML, we require a QML/JavaScript interpreter. We can run an interpreter by either creating a

  • QQuickView window so that the QML content occupies the entire window
or a
  • QQuickWidget object so that the QML content is part of a regular Qt widget hierarchy

If we choose the first option, we load QML content declared in the file “content.qml” as follows:

#include <QApplication>
#include <QQuickView>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);

   QQuickView v;
   v.setResizeMode(QQuickView::SizeRootObjectToView);
   v.setSource(QUrl("qrc:///content.qml"));
   v.show();

   return(app.exec());
}
[Get Code]

If we choose the second option, we load QML content declared in the file “content.qml” as follows:

#include <QApplication>
#include <QQuickWidget>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);

   QQuickWidget w;
   w.setSource(QUrl("qrc:///content.qml"));
   w.setResizeMode(QQuickWidget::SizeRootObjectToView);
   w.show();

   return(app.exec());
}
[Get Code]

Before being able to compile and deploy the above app to a mobile device, the qml files need to be acknowledged as part of the package. For that purpose we add a resource description file (*.qrc) to the package’s qmake project file (*.pro): 

QT += core gui quick quickwidgets multimedia
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = example
TEMPLATE = app

SOURCES += main.cpp

CONFIG += mobility

RESOURCES += resources.qrc

And put a list of our qml resources into the resource file: 

<RCC>
    <qresource prefix="/">
        <file>content.qml</file>
    </qresource>
</RCC>


← QML Interactive UI Elements | ● | QML Example →

Options: