How to Use Qt to Create Hybrid Applications

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 Famo.us) 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:

QtWebView::initialize();

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

import QtWebView 1.1

WebView
{
	url: "http://amin-ahmadi.com"
}

Obviously 🙂 you should replace ” http://amin-ahmadi.com “ 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:

Download
Hybrid App Demo Project


3 Replies to “How to Use Qt to Create Hybrid Applications”

  1. Looking for hours, found it just after this website, apparently I was looking for:

    m_QQuickWidgetPtr->setResizeMode(QQuickWidget::SizeRootObjectToView);

  2. So, when I do this (Qt 5.14.2 on Ubuntu 18.04), I get a blank widget unless I also specify the width: and height: (for example width: 1920 height: 1080), but this is not good because the page render does not align with the QQuickWidget’s actual borders.

    Is it possible for QQuickWidget to connect with a QML WebView’s borders as one would expect? I was much happier with QWebEngineView, but of course that’s not available on Android…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.