How to Use Qt to Create Hybrid Applications

Posted on Posted in Qt Tutorials, Tutorials

First of all you can check this link if you don’t know what hybrid applications are and what the difference between Hybrid and Native application is. In this article I am sharing the source code of a simple application that uses Qt with a combination of C++ and QML to run Hybrid applications (written using Framework7, Ionic or on the Operating Systems of your choice (Android, iOS, WP, Windows, Mac OS X and Linux).

First of all please note that you have to install WebView and Qt Quick modules to be able to create applications using the source code provided here. This can be done quite easily using Qt’s Maintenance Tool and during Qt Installation. Just check the modules I mentioned.

Then, you have to add these modules to your PRO file using the following line:

QT += webview quickwidgets

You have to initialize QtWebView module in the application initialization. Do this by including the following line in your main.cpp:


You have to add a QML file to your project add the following lines in it:

import QtWebView 1.1

url: ” ”

Obviously 🙂 you should replace ” “ with your Hybrid Application URL.

Finally, you have to add this QML to your application’s user interface using a QQuickWidget.

Let me know if you face any problem creating your Hybrid apps with the help of Qt.

You can download an example project, ready to build and run using the button below:

Hybrid App Demo Project

Leave a Reply

Your email address will not be published. Required fields are marked *