Search code examples
c++qtqt-quick

how to integrate qml file into qt-widgets app?

I have an qt widgets application. I want to add the switch control to my form. I added to my form QDeclarative widget and add this line to the code but nothing shown.

ui->declarativeView->setSource(QUrl::fromLocalFile("test.qml"));

This is the content of the qml file (I added this file to the resources) It display in qtcreator under resources/[project_name.qrc]/test.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
Button{
  text:aaaa
}

I added the pro file : qt += declarative

What am i doing wrong??

I'm using Qt 5.4.1 QtCreator 3.3.1.

Solution

  • 1. QDeclarativeView is for older Qt versions. If you are porting an application to Qt 5 then you can refer this documentation.

    2. For your application you can use the new class in Qt 5.x QuickView as shown below.

    Create a layout in your ui. Or do it via code. Then add the view to the layout as shown below:

    QQuickView *view = new QQuickView();
QWidget *container = QWidget::createWindowContainer(view, this);
container->setMinimumSize(300, 200);
container->setMaximumSize(300, 200);

view->setSource(QUrl("qrc:/test.qml")); // Fetch this url by right clicking on your resource file.
ui->verticalLayout->addWidget(container);

    3. In the .pro file just add quick module:

    +quick

    4. Reference: Introducing QWidget::createWindowContainer()

    5. Note: If you have to add a url to a resource file you have to use :/ refer here for more details.