I am a beginner in QML and try to insert a QML View in QWdiget but I don't understand why it doesn't work.
Here is a simple example of my qml file (this is not the real file):
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.2
import QtQml.Models 2.1
ObjectModel {
id: itemModel
Rectangle {
color: "orange"
anchors.fill: parent
}
Rectangle {
color: "orange"
anchors.fill: parent
}
Rectangle {
color: "orange"
anchors.fill: parent
}
ListView {
id: my_list
anchors.fill: parent
model: itemModel
}
}
And this is how I load it in my mainwindow:
QQuickView *view = new QQuickView();
QWidget *container = QWidget::createWindowContainer(view, this);
container->setMinimumSize(200, 200);
container->setFocusPolicy(Qt::TabFocus);
view->setSource(QUrl("main.qml"));
ui->dockWidget->setWidget(container);
How could I insert my view in a QWidget?
At this time, I really need to use a QML view and because I need to use it in an already existing application, I can't just use a QML project.
Thanks a lot for your help and have a good day!
There exist a special QQuickWidget, dedicated to that exact purpose.
QQuickWidget *view = new QQuickWidget;
view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
view->show();
QQmlApplicationEngine *m_engine in MainWindow.h
in MainWindows.cpp set :
m_engine->addImportPath("qrc:/qml/imports");
m_engine->load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
// m_engine->rootContext()->setContextProperty("mainWindows", this);
qDebug() << "Ok engine created";`
`QWindow *qmlWindow = qobject_cast<QWindow*>(m_engine->rootObjects().at(0));
QWidget *container = QWidget::createWindowContainer(qmlWindow, this);
container->setMinimumSize(200, 200);
container->setMaximumSize(1200, 900);
ui->verticalLayout->addWidget(container);`
Related
I am trying to add a QWidget to a QQuick 2 application.
The approach is the following:
Create a QQuickItem derived object, which creates the QWidget in an initialize function. The QWindow is obtained from the QWidget and reparented to the "main" QQuickWindow.
During runtime the result is very good (it looks like a normal view, not an external window).
However when I close the main window I receive:
External WM_DESTROY received for QWidgetWindow(0x202b3a4ffe0, name="QWidgetClassWindow") , parent: QWindow(0x0) , transient parent: QWindow(0x0)
Any idea how to avoid this warning?
QML:
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Window 2.2
import QWidgetWrapper 1.0
import QtQml 2.12
Item {
id: root
QWidgetWrapper {
id: ewas
anchors.fill: parent
Component.onCompleted: {
initialize(Window.window)
}
}
}
Cpp:
#pragma once
#include <QQuickItem>
#include <QWindow>
class QWidgetWrapper : public QQuickItem
{
Q_OBJECT
public:
QWidgetWrapper(QQuickItem *parent = nullptr) : QQuickItem(parent) {}
~QWidgetWrapper() {
}
Q_INVOKABLE void initialize(QWindow *window) {
m_widget = new QWidget();
m_widget->setWindowFlags(Qt::FramelessWindowHint);
m_widgetWindow = QWindow::fromWinId(m_widget->winId());
m_widgetWindow->setParent(window);
m_widget->show();
}
private:
QWidget *m_widget = nullptr;
QWindow *m_widgetWindow = nullptr;
};
I want to make a game overlay to show my custom cross-hair. I want it to be always there with no closing policy.
I used a Popup item in an ApplicationWindow and I set the opacity of it to 0 and the opacity of the pop-up to 1 but it just showed me nothing.I also tried using the pop-up item without any toplevel window but again nothing.
The question is "Is it possible to show an always-on-top popup without any visible top-level window ?"
Your suggestions would be appreciated.
Without a popup window, we can try out with the 'z' property of the QQuickItem. Stack the crosshair always on top of your other items. And if you want to move the crosshair across the screen you can use their 'x,y' properties.
I have tried a simple sample for the same. Used an Image item for crosshair on top of the scroll view. It works as expected. I tried my way. We will see if some other idea's coming in.
Sample code here:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
// used here only to indicate image loading is going on
BusyIndicator {
id: busyindicatorId
visible: backgroundImgId.status === Image.Loading ||
crossImgId.status === Image.Loading
anchors.centerIn: parent
}
// background item
ScrollView {
anchors.fill: parent
anchors.margins: 10
clip: true
visible: !busyindicatorId.visible
Image {
id: backgroundImgId
source: "https://i.ibb.co/ZBNLvzb/andriod.jpg"
}
}
// crosshair item
Image {
id: crossImgId
z: 1
width: 100
height: width
visible: !busyindicatorId.visible
source: "https://i.ibb.co/SJFTLwN/cross.png"
anchors.centerIn: parent
}
}
Updates
Instantiated two windows of that one can be used for crosshair and have to set some window properties(transparent, alwaysontop) to show always on top. Let's have a look at this base code. Sample video
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QScreen>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
QScreen *screen = QGuiApplication::primaryScreen();
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:/crosshair.qml")));
view.setX(screen->geometry().width()/2 - view.width()/2);
view.setY(screen->geometry().height()/2 - view.height()/2);
view.setColor("transparent");
view.setFlags(Qt::SubWindow | Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
view.show();
return app.exec();
}
//////////////// main.qml ////////////////
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
visibility: "FullScreen"
objectName: "mainWindow"
// used here only to indicate image loading is going on
BusyIndicator {
id: busyindicatorId
visible: backgroundImgId.status === Image.Loading
anchors.centerIn: parent
}
// background item
ScrollView {
anchors.fill: parent
anchors.margins: 10
clip: true
visible: !busyindicatorId.visible
Image {
id: backgroundImgId
source: "https://i.ibb.co/ZBNLvzb/andriod.jpg"
}
}
}
//////////////// crosshair.qml ////////////////
import QtQuick 2.9
import QtQuick.Controls 2.2
Item {
width: 100
height: 100
// crosshair item
Image {
width: parent.width
height: parent.height
source: "https://i.ibb.co/SJFTLwN/cross.png"
}
}
I'm working through the book "Learn Qt 5" from Nicholas Sherriff.
Now I have some problems getting the QtStackView component to work properly.
I've written following code:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/views/MasterView.qml")));
return app.exec();
}
MasterView.qml
import QtQuick 2.5
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
Window {
visible: true
width: 1024
height: 768
title: qsTr("Client Management")
StackView {
id: contentFrame
initialItem: Qt.resolvedUrl("qrc:/views/SplashView.qml")
}
}
SplashView.qml
import QtQuick 2.5
Rectangle {
anchors.fill: parent
color: "#f04c42"
}
But when executing, the rectangle from SplashView.qml does not appear.
I do not get any errors. If I put the rectangle block inside the window block it works. But even if i put the rectangle with an id in the StackView block it doesn't work.
I'm using an older version of QtQuick than the book recommends, becouse im using not the newest debian distribution.
Am I missing something?
Thanks
The problem is simple, the Rectangle in the SplashView takes the size of the parent:
Rectangle {
anchors.fill: parent //<---
color: "#f04c42"
}
And the parent is the StackView, but the StackView has no size, so the solution is to set a size, for this we can use the anchors:
StackView {
id: contentFrame
anchors.fill: parent // <--- possible solution
initialItem: Qt.resolvedUrl("qrc:/views/SplashView.qml")
}
My cpp application has a QMainWindow derived class, with QQuickView widget in the ui. Inside the view are a number of QML items which accept keyboard input. When an item is clicked, I call forceActiveFocus() on the clicked item. It all works from the time I launch the application, until the time I switch to another window.
If I switch to another application and back, or switch to another window within my application and back, calling forceActiveFocus() has no effect. The items are of a few different types, but here is a sample item:
TextInput {
id: textInput
anchors.fill: parent
inputMethodHints: Qt.ImhFormattedNumbersOnly
onActiveFocusChanged: console.log(activeFocus)
onEditingFinished:
{
}
MouseArea {
anchors.fill: textInput
onClicked: {
textInput.forceActiveFocus()
console.log("clicked")
}
}
}
When switching away I see activeFocus logged to the console as false. When I switch back again and click on the item, "clicked" is logged to the console, so the mouse event is being handled. However, onActiveFocusChanged is never called again.
I also tried an implementation with a FocusScope as the parent of the item, got the same behavior, with focus following my click until the point I switch away to some other window and back again.
UPDATE
After reading the comment from #user2436719, I've tried two minimal examples. It is only when using the QQuickView that this problem arises. Here is the QML app using a QML Window with the following main.qrc, which works just fine:
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
color: "lightblue"
Rectangle {
id: textInputRect
color: "white"
height: 50
width: 150
anchors.centerIn: parent
TextInput {
id: textInput
anchors.fill: parent
inputMethodHints: Qt.ImhFormattedNumbersOnly
onActiveFocusChanged: console.log(activeFocus)
onEditingFinished:
{
}
}
}
}
The second is a CPP application with a QMainWindow derived class that has a QQuickView widget in the ui. This version exhibits the problem behavior. Here is the main.qrc:
import QtQuick 2.7
import QtQuick.Window 2.2
Rectangle {
anchors.fill: parent
color: "lightblue"
Rectangle {
id: textInputRect
color: "white"
height: 50
width: 150
anchors.centerIn: parent
TextInput {
id: textInput
anchors.fill: parent
inputMethodHints: Qt.ImhFormattedNumbersOnly
onActiveFocusChanged: console.log(activeFocus)
onEditingFinished:
{
}
}
}
}
From the QQuickView version, here is main:
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
MainWindow window;
QQuickView* view = new QQuickView;
window.setView(view);
window.show();
return app.exec();
}
And here is how I set the QQuickView in the MainWindow:
void MainWindow::setView(QQuickView *value)
{
view = value;
QWidget *container = QWidget::createWindowContainer(view, this);
view->setSource(QUrl("qrc:/main.qml"));
ui->verticalLayout->addWidget(container);
}
Okay, this is QTBUG-34414. At the bottom of the comments for that bug a workaround is posted. The posted workaround fixed the problem for me, in the case of switching to other windows of my application, or to other applications. There was still no focus after closing dialogs. Putting this override in my window class fixed the problem for both cases:
bool MyWindow::event(QEvent *event)
{
if (event->type() == QEvent::ActivationChange ||
event->type() == QEvent::WindowUnblocked) {
if(view->isActive()) { //view is pointer to my QQuickView
window()->activateWindow();
return true;
}
}
// handle events that don't match
return QWidget::event(event);
}
This override worked for me with Qt 5.7 on OSX Sierra.
I modify the constructor of DiagramScene in a qt example for see a QML widget but this not work:
DiagramScene::DiagramScene(QObject *parent)
: QGraphicsScene(parent) {
QQuickView *view = new QQuickView;
view->setResizeMode(QQuickView::SizeRootObjectToView);
view->setSource(QUrl("qrc:///QML/qml/item.qml"));
QWidget *container = QWidget::createWindowContainer(view);
container->setMinimumSize(view->size());
container->setFocusPolicy(Qt::TabFocus);
this->addWidget(container);
}
QML(The file path is correct!!):
import QtQuick 2.0
Rectangle {
width: 100
height: 100
color: "black"
}