如何使用QML创建初始屏幕

时间:2018-07-15 18:42:26

标签: qt qml splash-screen

我正在尝试使用QT开发一个android应用程序。 我想在应用程序启动时显示启动屏幕。启动画面将停留2秒钟,然后将显示应用程序的主页。 为此,我创建了2个.qml文件。

Splash.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.3

Window {
    id: window
    visible: true
    width: Screen.width
    height: Screen.height
    signal timeout

    Image {
        id: image
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 300
        height: 300
        source: "qrc:/../Desktop/photo_2018-03-21_19-53-06.jpg"
    }

    Text {
        id: text1
        y: image.height + image.y + 20
        text: qsTr("@startimeahmet Presents")
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 25
    }

    Timer {
        interval: 2000; running: true; repeat: false
        onTriggered: {
            visible = false
            window.timeout()
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.3

ApplicationWindow {
    id: root
    visible: false
    width: Screen.width
    height: Screen.height

    Splash {
        onTimeout: root.visible = true
    }
}

但这不起作用。对此有任何帮助。

p.s。我正在将QT 5.11.1与QT Creator 4.6.2一起使用

2 个答案:

答案 0 :(得分:4)

使用原生的Android启动画面。

  1. android/res/drawable/splash.xml中创建启动资源。像
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff"/>
        </shape>
    </item>    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/app"/>
    </item>
</layer-list>
  1. android/res/values/apptheme.xml中创建主题:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:statusBarColor">#ffffff</item>
    </style>
</resources>
  1. 在android / AndroidManifest.xml中找到activity元素并添加以下属性:android:theme="@style/AppTheme" 添加这些:

    <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/splash"/>
    <meta-data android:name="android.app.splash_screen_sticky" android:value="true"/>
    
  2. 在您的.pro文件中添加

    QT + = androidextras

  3. 在您的应用就绪后,在C ++代码中添加以下行:

    QtAndroid :: hideSplashScreen(250);

  4. 享受!

答案 1 :(得分:2)

正如我所说,由于您的ApplicationWindow是不可见的,它的所有子元素也都是不可见的,包括您的启动窗口。因此SplashApplicationWindow至少应该是兄弟姐妹。但是更好的解决方案是使用@Mohammad Kanan已经注意到的Loader。在这种情况下,还有一个额外的优势-每个窗口都将在适当的时间初始化,并在使用后将其卸载。示例:

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Loader {
    id: loader
    Component {
        id: splash
        Window {
            id: splashWindow
            signal timeout()
            width: 300
            height: 200
            modality: Qt.ApplicationModal
            flags: Qt.SplashScreen
            color: "#DEDEDE"
            ProgressBar {
                id: progress
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                }
                value: 0
                to : 100
                from : 0
            }
            Timer {
                id: timer
                interval: 50
                running: true
                repeat: true
                onTriggered: {
                    progress.value++;
                    if(progress.value >= 100) {
                        timer.stop();
                        splashWindow.timeout();
                    }
                }
            }
        }
    }

    Component {
        id: root
        Window {
            id: rootWindow
            width: 800
            height: 600
        }
    }

    sourceComponent: splash
    active: true
    visible: true
    onStatusChanged: {
        if (loader.status === Loader.Ready)
            item.show();
    }

    Connections {
        id: connection
        target: loader.item
        onTimeout: {
            connection.target = null;
            loader.sourceComponent = root;
        }
    }
}