使用 QML 的全屏桌面应用程序

Question

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

我想知道是否可以为桌面开发全屏丰富的用户界面应用程序（这变得越来越常见，特别是在移动设备中）。例如（http://blog.flexexamples.com/2007/08/ 07/creating-full-screen-flex-applications/) Adob​​e 拥有可以在全屏模式下使用并运行用 AS3 编写的内容的 Flash Player。是否可以使用 QT/QML 编写类似的应用程序？

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。

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();
}

您可以在此处找到更多信息。

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 进行测试

Answer 4

这是之前答案的另一个变体，但这使用（默认的 Qt Quick Application - Empty）Window 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
}

Answer 5

Qt 有 qmlviewer。

要全屏运行它：

$ qmlviewer -fullscreen -frameless file.qml

还有一个使用 QML 创建全屏应用程序的教程。
以及桌面小部件的组件。

Answer 6

你好，朋友，我知道这已经晚了 10 年，但我希望能帮助一些人。
要在 android 和 QML/quick 中将窗口设置为全屏，您可以使用以下代码：

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")
}