使用QML创建全屏桌面应用程序

Question

我有使用Flex和AS3开发丰富用户界面应用程序的经验。然而，问题在于很难将现有的C++业务逻辑与这些Flex应用程序结合使用。随着QML的出现，我很好奇是否可以通过QT重用C++业务逻辑来开发丰富的UI应用程序。

我想知道是否可以为桌面开发全屏幕的丰富用户界面应用程序（这在移动设备上变得越来越普遍）。例如（http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/）Adobe具有可以以全屏模式使用并运行使用AS3编写的内容的Flash播放器。是否可以使用QT / QML编写类似的应用程序？

- iceman

Answer 1

还有一种只使用QML的方式可以全屏。 如果您不使用QDeclarativeView而是使用QQmlApplicationEngine，则可以使用此方法，因为后者不继承QWidget且没有showFullScreen()方法。

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    visibility: "FullScreen"
    width: 640
    height: 480

    Button {
        text: "exit fullscreen"
        onClicked: window.visibility = "Windowed"
    }
}

但是使用ApplicationWindow作为根元素而不是Rectangle非常重要。 对于ApplicationWindow，您需要导入QtQuick.Controls。

- JuSchu

---

对我来说工作得很好，但请注意有一个错误会导致全屏QtQuick MenuBar在Windows上无法正常工作。 - Timmmm

要将窗口最大化，您可以使用以下代码：height: Screen.height; width: Screen.width - nerdoc

还有枚举可用，而不是那些字符串，例如 Window.FullScreen 等。在 Qt 5.11 中，这也与您从属性中读回的值匹配（即，不要尝试针对“Windowed”进行测试，因为它永远不会发生）。 - Svend

Answer 2

如果您想使用用C++编写的业务逻辑和一些QML用户界面，您可以在应用程序中使用QDeclarativeView。它只是一个普通的Qt小部件，因此它具有showFullScreen()方法。实际上，这个类就像“在您的应用程序内部的qmlviewer”。

所以你会得到这样的东西:

#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtCore/QUrl>

int main(int _argc, char * _argv[])
{
    QApplication app(_argc, _argv);

    QDeclarativeView view;
    view.setSource(QUrl("qrc:/MyGui.qml"));    // if your QML files are inside 
                                               // application resources

    view.showFullScreen();    // here we show our view in fullscreen

    return app.exec();
}

你可以在这里找到更多信息。

- GooRoo

---

我登录了以+1支持。我在互联网上搜寻了大约20分钟的例子，只是为了找到如何将QML文件加载到Qt应用程序中的方法，直到我偶然发现了这个。也许我需要学习如何更好地使用Google。无论如何，非常感谢！ - Carrotman42

Answer 3

当在C++中使用QQmlApplicationEngine时，你可以在QML中这样做：

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    id: mainWindow

    Component.onCompleted: {
        mainWindow.showFullScreen();
    }
}

使用QT5.8进行测试

- Matthias Fritsch

Answer 4

以下是与之前的答案不同的另一种变化，但它使用了（默认的Qt Quick应用程序 - 空）窗口QML类型和一个Qt枚举：

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    id: mainWindow
    objectName: "mainWindow"
    visible: true
    flags: Qt.FramelessWindowHint | Qt.Window
    color: "black"
    visibility: Qt.WindowFullScreen // << the solution
}

- Richard Jessop

Answer 5

Qt有一个名为qmlviewer的工具。

要在全屏模式下运行它：

$ qmlviewer -fullscreen -frameless file.qml

此外，还有一个使用QML创建全屏应用程序的教程。同时也有专门为桌面小部件设计的组件。 （教程链接）（组件链接）请参阅。

- graphite

---

我实际上需要那个教程，但是我无法访问它。链接有问题吗？ - Franky

Meego的维基看起来已经死了。请尝试在https://wiki.qt.io/QtDesktopComponents上找到一些内容。 - graphite

Answer 6

你好朋友，我知道已经晚了10年，但我希望能帮助到某些人。 要在QML/Quick中将Windows设置为全屏状态，你可以使用以下代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12

ApplicationWindow {
id: root
width: Screen.width
height: Screen.height
visibility:Window.FullScreen
Component.onCompleted: {
    console.log(width+":"+height)
}
visible: true
title: qsTr("Hello World")
}

- milad loveboth