如何将启动画面与主窗口连接。我分别创建了两个答案

【问题标题】：How do I connect a splash screen with main window. I created both separately如何将启动画面与主窗口连接。我分别创建了两个
【发布时间】：2021-07-02 07:13:37
【问题描述】：

这是启动画面的代码。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import "components"
import QtQuick.Timeline 1.0

Window {
id: splashScreen
width: 380
height: 580
visible: true
color: "#00000000"
title: qsTr("Hello World")

// Remove Title Bar
flags: Qt.SplashScreen | Qt.FramelessWindowHint

Rectangle {
    id: bg
    x: 42
    y: 156
    width: 360
    height: 560
    color: "#151515"
    radius: 10
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    z: 1

    CircularProgessBar{
        id: circularProgessBar
        x: 55
        y: 197
        opacity: 1
        anchors.verticalCenter: parent.verticalCenter
        value: 100
        progressWidth: 8
        strokeBgWidth: 4
        progressColor: "#67aa25"
        anchors.horizontalCenter: parent.horizontalCenter

    }

    Image {
        id: logoImage
        x: 130
        width: 300
        height: 120
        opacity: 1
        anchors.top: parent.top
        source: "../images/351-3519717_well-pharmacy-logo.png"
        anchors.topMargin: 25
        anchors.horizontalCenter: parent.horizontalCenter
        fillMode: Image.PreserveAspectFit

    }
    CustomTextField{
        id: textUsername
        x: 30
        y: 370
        opacity: 1
        anchors.bottom: textPassword.top
        anchors.bottomMargin: 10
        anchors.horizontalCenterOffset: 0
        anchors.horizontalCenter: parent.horizontalCenter
        placeholderText: "Username or Email"

    }

    CustomTextField {
        id: textPassword
        x: 30
        y: 422
        opacity: 1
        anchors.bottom: btnLogin.top
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        placeholderText: "Password"
        echoMode: TextInput.Password // responsible for hiding passwords
    }

    CustomButton{
        id: btnLogin
        x: 80
        y: 473
        width: 300
        opacity: 1
        text: "Sign In"
        anchors.bottom: parent.bottom
        font.pointSize: 10
        colorPressed: "#558b1f"
        colorMouseOver: "#7ece2d"
        colorDefault: "#67aa25"
        anchors.bottomMargin: 50
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: internal.checkLogin(textUsername.text, textPassword.text)

    }

    Label {
        id: label
        x: 111
        y: 293
        opacity: 1
        color: "#e0ebf7"
        text: qsTr("Sign In To Silk Pharma")
        anchors.bottom: label1.top
        anchors.bottomMargin: 10
        anchors.horizontalCenterOffset: 1
        font.family: "Segoe UI"
        font.pointSize: 16
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Label {
        id: label1
        x: 56
        y: 329
        opacity: 1
        color: "#e0ebf7"
        text: qsTr("Username or Email Address and Password")
        anchors.bottom: textUsername.top
        anchors.bottomMargin: 20
        font.pointSize: 10
        anchors.horizontalCenterOffset: 1
        font.family: "Segoe UI"
        anchors.horizontalCenter: parent.horizontalCenter
    }

    CustomButton {
        id: btnClose
        x: 328
        width: 30
        height: 30
        opacity: 1
        text: "X"
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 2
        anchors.topMargin: 4
        font.pointSize: 10
        colorDefault: "#67aa25"
        colorPressed: "#558b1f"
        colorMouseOver: "#7ece2d"
        onClicked: splashScreen.close()
    }
}

DropShadow{
    anchors.fill: bg
    source: bg
    verticalOffset: 0
    horizontalOffset: 0
    radius: 10
    color: "#40000000"
    z: 0
}

Timeline {
    id: timeline
    animations: [
        TimelineAnimation {
            id: timelineAnimation
            duration: 3000
            running: true
            loops: 1
            to: 3000
            from: 0
        }
    ]
    startFrame: 0
    enabled: true
    endFrame: 3000

    KeyframeGroup {
        target: circularProgessBar
        property: "value"
        Keyframe {
            value: 0
            frame: 0
        }

        Keyframe {
            value: 100
            frame: 1300
        }
    }

    KeyframeGroup {
        target: circularProgessBar
        property: "opacity"
        Keyframe {
            value: 0
            frame: 1299
        }

        Keyframe {
            value: 0
            frame: 1798
        }

        Keyframe {
            value: "1"
            frame: 0
        }

        Keyframe {
            value: "1"
            frame: 1293
        }
    }

    KeyframeGroup {
        target: logoImage
        property: "opacity"
        Keyframe {
            value: 0
            frame: 1798
        }

        Keyframe {
            value: 1
            frame: 2303
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: label
        property: "opacity"
        Keyframe {
            value: 0
            frame: 1896
        }

        Keyframe {
            value: 1
            frame: 2396
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: label1
        property: "opacity"
        Keyframe {
            value: 0
            frame: 1995
        }

        Keyframe {
            value: 1
            frame: 2504
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: textUsername
        property: "opacity"
        Keyframe {
            value: 0
            frame: 2099
        }

        Keyframe {
            value: 1
            frame: 2652
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: textPassword
        property: "opacity"
        Keyframe {
            value: 0
            frame: 2198
        }

        Keyframe {
            value: 1
            frame: 2796
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: btnLogin
        property: "opacity"
        Keyframe {
            value: 0
            frame: 2296
        }

        Keyframe {
            value: 1
            frame: 2951
        }

        Keyframe {
            value: "0"
            frame: 0
        }
    }

    KeyframeGroup {
        target: bg
        property: "height"
        Keyframe {
            value: 360
            frame: 1299
        }

        Keyframe {
            value: 560
            frame: 1900
        }

        Keyframe {
            value: "360"
            frame: 0
        }
    }
}
}

这是 main.qml 的代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import "controls"
import QtGraphicalEffects 1.15

Window {
id: mainWindow
width: 1000
height: 580
visible: true
color: "#00000000"

// Remove title bar
flags: Qt.Window | Qt.FramelessWindowHint   // our window will be of type window

// Properties
property int windowStatus: 0
property int windowMargin: 10

// Internal Functions
QtObject{
    id: internal

    function maximizeRestore(){
        if(windowStatus == 0){
            mainWindow.showMaximized()
            windowStatus = 1
            windowMargin = 0
            btnMaximizeRestore.btnIconSource = "../images/svg_images/restore_icon.svg"
        }
        else{
            windowStatus = 0
            mainWindow.showNormal()
            windowMargin = 10
            btnMaximizeRestore.btnIconSource = "../images/svg_images/maximize_icon.svg"
        }
    }

    function ifMaximizedWindowRestore(){
        if(windowStatus == 1){
            mainWindow.showNormal()
            windowStatus = 0
            windowMargin = 10
            btnMaximizeRestore.btnIconSource = "../images/svg_images/maximize_icon.svg"

        }
    }

    function restoreMargins(){
        windowStatus = 0
        windowMargin = 10
        btnMaximizeRestore.btnIconSource = "../images/svg_images/maximize_icon.svg"

    }
}

title: qsTr("Course Qt Quick")

Rectangle {
    id: bg
    color: "#2c313c"
    border.color: "#383e4c"
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.rightMargin: windowMargin
    anchors.leftMargin: windowMargin
    anchors.bottomMargin: windowMargin
    anchors.topMargin: windowMargin
    z: 1

    Rectangle {
        id: appContainer
        color: "#00000000"
        anchors.fill: parent
        anchors.rightMargin: 1
        anchors.leftMargin: 1
        anchors.bottomMargin: 1
        anchors.topMargin: 1

        Rectangle {
            id: topBar
            height: 60
            color: "#1c1d20"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.rightMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0

            ToggleButton {
                onClicked: animationMenu.running = true
            }

            Rectangle {
                id: topBarDescription
                y: 22
                height: 25
                color: "#282c34"
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.rightMargin: 0
                anchors.leftMargin: 70
                anchors.bottomMargin: 0

                Label {
                    id: labelTopInfo
                    color: "#5f6a82"
                    text: qsTr("Application Description")
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    verticalAlignment: Text.AlignVCenter
                    anchors.bottomMargin: 0
                    anchors.rightMargin: 300
                    anchors.leftMargin: 10
                    anchors.topMargin: 0
                }

                Label {
                    id: labelRightInfo
                    color: "#5f6a82"
                    text: qsTr("| HOME")
                    anchors.left: labelTopInfo.right
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter
                    anchors.rightMargin: 10
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0
                }
            }

            Rectangle {
                id: titleBar
                height: 35
                color: "#00000000"
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 105
                anchors.leftMargin: 70
                anchors.topMargin: 0

                DragHandler{
                    onActiveChanged: if(active){
                                        mainWindow.startSystemMove()
                                        internal.ifMaximizedWindowRestore()
                                     }
                }

                Image {
                    id: iconApp
                    width: 22
                    height: 22
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    source: "../images/svg_images/icon_app_top.svg"
                    anchors.leftMargin: 5
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0
                    fillMode: Image.PreserveAspectFit
                }

                Label {
                    id: label
                    color: "#c3cbdd"
                    text: qsTr("My Application Title")
                    anchors.left: iconApp.right
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pointSize: 12
                    anchors.leftMargin: 5
                }
            }

            Row {
                id: rowBtns
                x: 873
                width: 105
                height: 35
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 0
                anchors.topMargin: 0

                TopBarButton {
                    id: btnMinimize
                    onClicked: {
                        mainWindow.showMinimized()
                        internal.restoreMargins()
                    }
                }

                TopBarButton {
                    id: btnMaximizeRestore
                    btnIconSource: "../images/svg_images/maximize_icon.svg"
                    onClicked: internal.maximizeRestore()

                }

                TopBarButton {
                    id: btnClose
                    btnColorClicked: "#e31d0b"
                    btnIconSource: "../images/svg_images/close_icon.svg"
                    onClicked: mainWindow.close()
                }
            }
        }

        Rectangle {
            id: content
            color: "#00000000"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: topBar.bottom
            anchors.bottom: parent.bottom
            anchors.topMargin: 0

            Rectangle {
                id: leftMenu
                width: 70
                color: "#1c1d20"
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                clip: false
                anchors.topMargin: 0
                anchors.bottomMargin: 0
                anchors.leftMargin: 0

                PropertyAnimation{
                    id: animationMenu
                    target: leftMenu
                    property: "width"
                    to: if(leftMenu.width == 70) return 200; else return 70
                    duration: 750
                    easing.type: Easing.InOutQuint
                }

                Column {
                    id: columnMenus
                    width: 70
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0

                    LeftMenuBtn {
                        id: btnHome
                        width: leftMenu.width
                        text: qsTr("Home")
                        isActiveMenu: true
                    }

                    LeftMenuBtn {
                        id: btnHome1
                        width: leftMenu.width
                        text: qsTr("Dashboard")
                        isActiveMenu: false
                        btnIconSource: "../images/svg_images/open_icon.svg"
                    }

                    LeftMenuBtn {
                        id: btnHome2
                        width: leftMenu.width
                        text: qsTr("Search")
                        isActiveMenu: false
                        btnIconSource: "../images/svg_images/save_icon.svg"
                    }
                }

                LeftMenuBtn {
                    id: btnHome3
                    width: leftMenu.width
                    text: qsTr("Settings")
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 25
                    isActiveMenu: false
                    btnIconSource: "../images/svg_images/settings_icon.svg"
                }
            }

            Rectangle {
                id: contentPages
                color: "#2c313c"
                anchors.left: leftMenu.right
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.rightMargin: 0
                anchors.leftMargin: 0
                anchors.bottomMargin: 25
                anchors.topMargin: 0
            }

            Rectangle {
                id: rectangle
                color: "#282c34"
                anchors.left: leftMenu.right
                anchors.right: parent.right
                anchors.top: contentPages.bottom
                anchors.bottom: parent.bottom
                anchors.rightMargin: 0
                anchors.leftMargin: 70
                anchors.bottomMargin: 25
                anchors.topMargin: 500

                Label {
                    id: labelTopInfo2
                    x: 10
                    height: 0
                    color: "#5f6a82"
                    text: qsTr("Application Description")
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    verticalAlignment: Text.AlignVCenter
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0
                    anchors.rightMargin: 30
                    anchors.leftMargin: 10
                }
            }
        }
    }
}

DropShadow{
    anchors.fill: bg
    horizontalOffset: 0
    verticalOffset: 0
    radius: 10
    samples: 16
    color: "#80000000"
    source: bg
    z: 0
}
}

我希望闪屏首先显示询问登录名和密码，然后应该出现 main.qml 文件，我尝试创建一个 qtobject 询问用户特定的用户名和密码，然后打开 main.qml 文件但是出现 main.qml 文件，唯一的问题是启动屏幕中什么都没有显示，只是一个空窗口。

【问题讨论】：

你能显示加载启动画面/main.qml的代码吗？
附带说明，您应该摆脱所有x 和y 属性设置。它们是多余的，因为您使用锚来定位对象。

标签： qt qml splash-screen

【解决方案1】：

我已经回答了同样的问题，但由于我发布的代码有点过时，我将在此处重新发布。示例是使用 Loader 实现的简单闪屏：

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

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

    Component {
        id: splash
        Window {
            id: splashWindow
            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
            }
            Text {
                anchors.centerIn: parent
                text: "Loading,  please wait ..."
            }

            Timer {
                id: timer
                interval: 50
                running: true
                repeat: true
                onTriggered: {
                    progress.value++;
                    if(progress.value >= 100)
                    {
                        timer.stop();
                        loader.sourceComponent = undefined;
                        loader.sourceComponent = root;
                    }
                }
            }
        }
    }

    Component {
        id: root
        Window {
            id: rootWindow
            title: "Main window"
            visible: true
            width: 800
            height: 600
        }
    }
}

【讨论】：