'How do I connect a splash screen with main window. I created both separately
Here's the code for the splash screen.
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
}
}
}
}
And here's the code for the 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
}
}
I want the splash screen to display first ask for login and password and then the main.qml file should appear, I tried to create a qtobject that asks the user for specific username and password and then opens the main.qml file but the main.qml file appears, the only problem is that nothing shows in the splash screen, just an empty window.
Solution 1:[1]
I've already answered the same question but since the code I've posted a bit outdated I will repost it here. The sample is a simple splash screen realization using 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
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | folibis |