qt-wasm-widgets-qml

README.md

QML & WIDGETS integration almost working in WASM (QT FOR WEBASSEMBLY)

See https://www.ics.com/blog/combining-qt-widgets-and-qml-qwidgetcreatewindowcontainer

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    
    return a.exec();
}

main.qml

import QtQuick 2.1
import com.myself 1.0

Rectangle {
    id: rectangle
    color: "white"
//    anchors.fill: parent
    width: 200
    height: 200


    Text {
        id: text
        text: "QML code.\n(Click to close)"
        font.pointSize: 14
        anchors.centerIn: parent
        PropertyAnimation {
            id: animation
            target: text
            property: "rotation"
            from: 0; to: 360; duration: 5000
            loops: Animation.Infinite
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: myObject.reopen_main_window()
        //onClicked: animation.paused ? animation.resume() : animation.pause()
    }
    Component.onCompleted: animation.start()
}

mainwindow.cpp

#include "mainwindow.h"
#include "qmlcontainer.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(openNewWindow()));

    //this->repaint();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::openNewWindow()
{
   mMyNewWindow = new QMLContainer(); // Be sure to destroy your window somewhere
   mMyNewWindow->show();
   // ...
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class QMLContainer;

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
public slots:
  void openNewWindow();
private:
    Ui::MainWindow *ui;
    QMLContainer *mMyNewWindow;
};

#endif // MAINWINDOW_H

mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>417</width>
    <height>404</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QFrame" name="frame">
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout_2">
       <item>
        <widget class="QPushButton" name="pushButton">
         <property name="enabled">
          <bool>true</bool>
         </property>
         <property name="text">
          <string>open</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QCheckBox" name="checkBox">
         <property name="text">
          <string>CheckBox</string>
         </property>
        </widget>
       </item>
       <item>
        <widget class="QLineEdit" name="lineEdit">
         <property name="text">
          <string>This is a widget.</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </item>
    <item>
     <widget class="QFrame" name="frame_2">
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout_3">
       <item>
        <layout class="QHBoxLayout" name="horizontalLayout">
         <item>
          <widget class="QRadioButton" name="radioButton">
           <property name="text">
            <string>RadioButton</string>
           </property>
          </widget>
         </item>
        </layout>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

qml.qrc

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

qmlcontainer.cpp

#include <QQmlEngine>
#include <QQmlContext>

#include "mainwindow.h"
#include "qmlcontainer.h"
#include "ui_qmlcontainer.h"

#if defined(Q_OS_HTML5) or defined(Q_OS_WASM) or defined(__EMSCRIPTEN__)
#define PLATFORM_WASM
#endif

QMLContainer::QMLContainer(QWidget *parent) :
QWidget(parent),
ui(new Ui::QMLContainer)
{
  ui->setupUi(this);

  view = new QQuickView();

  // https://stackoverflow.com/a/41006903
  view->setResizeMode(QQuickView::SizeRootObjectToView);

  qmlRegisterType<QMLContainer>("com.myself", 1, 0, "QMLContainer");

  // add single instance of your object to the QML context as a property
  // the object will be available in QML with name "myObject"
  QMLContainer* myObject = this;//new QMLContainer();
  myObject->setSizePolicy(QSizePolicy::Expanding , QSizePolicy::Expanding );

   // see https://felgo.com/cross-platform-development/how-to-expose-a-qt-cpp-class-with-signals-and-slots-to-qml
  view->engine()->rootContext()->setContextProperty("myObject", myObject);

  QWidget *container = QWidget::createWindowContainer(view, this);
  container->setSizePolicy(QSizePolicy::Expanding , QSizePolicy::Expanding );
  /*container->setGeometry(0, 0, 200, 200);
  container->setMinimumSize(200, 200);
  container->setMaximumSize(200, 200);
  container->setFocusPolicy(Qt::TabFocus);*/
  view->setSource(QUrl("qrc:/main.qml"));
  ui->gridLayout_2->addWidget(container);

  //this->repaint();
}

QMLContainer::~QMLContainer()
{
  delete ui;
}

int QMLContainer::reopen_main_window()
{
  printf("reopen_main_window\n");
  /*
#ifdef PLATFORM_WASM
  printf("recreate_main_window\n");
  MainWindow w;
  w.show();
#else
  printf("reopen_main_window\n");
  parentWidget()->show();
#endif
  this->hide();
  view->hide();
  view->close();
  this->update();
  this->repaint();
  this->update();
  this->repaint();
  parentWidget()->raise();
  parentWidget()->show();
  parentWidget()->showNormal();
  parentWidget()->update();
  parentWidget()->repaint();
  printf("reopen_main_window OK\n");
  this->close();*/
  return 1;
}

qmlcontainer.h

#ifndef QMLCONTAINER_H
#define QMLCONTAINER_H

#include <QQuickView>
#include <QWidget>

namespace Ui {
class QMLContainer;
}

class QMLContainer : public QWidget
{
Q_OBJECT

public:
explicit QMLContainer(QWidget *parent = nullptr);
~QMLContainer();
Q_INVOKABLE int reopen_main_window();

private:
Ui::QMLContainer *ui;
QQuickView *view;
};

#endif // QMLCONTAINER_H

qmlcontainer.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>QMLContainer</class>
 <widget class="QWidget" name="QMLContainer">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>335</width>
    <height>216</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QGridLayout" name="gridLayout">
   <item row="0" column="0">
    <widget class="QFrame" name="frame">
     <property name="frameShape">
      <enum>QFrame::StyledPanel</enum>
     </property>
     <property name="frameShadow">
      <enum>QFrame::Raised</enum>
     </property>
     <layout class="QGridLayout" name="gridLayout_3">
      <item row="0" column="0">
       <layout class="QGridLayout" name="gridLayout_2"/>
      </item>
     </layout>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>