Component architecture/layout for an application featuring multiple StackViews?

davidjs1

I'm trying to build a social media app featuring multiple StackViews to facilitate login/registration flow, as well as a tabbed view hosting the 5 main screens of the app. How should I go about navigating from one StackView to another?

Shankarlinga M

Main Application Window:
Contains the root StackView or multiple StackViews.
Manages navigation between different sections of the app (example login, registration, main screens).
Login and Registration Flow:
A StackView dedicated to handling login and registration.
Individual components for login and registration forms.
Main Application Content:
A TabView or TabBar for main navigation.
Each tab can contain its own StackView for further navigation within that section.
MainWindow.qml:
The root component containing the main layout, StackView, and navigation logic.
LoginPage.qml and RegistrationPage.qml:
Components for login and registration forms.
Managed by a dedicated StackView.
MainTabView.qml:
Contains a TabBar or TabView for navigating between main screens.
MainScreen1.qml, MainScreen2.qml, etc.:
Components for individual main screens.
Each can contain its own StackView if nested navigation is required.

Shankarlinga M

1.main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
visible: true
width: 640
height: 480

StackView {
    id: rootStack
    initialItem: loginPage
    anchors.fill: parent
}

Component {
    id: loginPage
    LoginPage {
        onLoginSuccess: {
            rootStack.push(mainTabView)
        }
        onRegisterClicked: {
            rootStack.push(registerPage)
        }
    }
}

Component {
    id: registerPage
    RegistrationPage {
        onRegistrationSuccess: {
            rootStack.pop()
        }
        onCancelClicked: {
            rootStack.pop()
        }
    }
}

Component {
    id: mainTabView
    MainTabView {
    }
}

}

LoginPage,qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs

Item {
signal loginSuccess()
signal registerClicked()

Column {
    anchors.centerIn: parent
    spacing: 10

    TextField {
        id: username
        placeholderText: "Username"
    }
    TextField {
        id: password
        placeholderText: "Password"
        echoMode: TextInput.Password
    }
    Button {
        text: "Login"
        onClicked: {
            if (username.text === "user" && password.text === "password") {
                loginSuccess()
                successDialog.open()
            } else {
                errorDialog.open()
            }
        }
    }
    Button {
        text: "Register"
        onClicked: {
            registerClicked()
        }
    }
}

MessageDialog {
    id: successDialog
    title: "Login Successful"
    text: "You have logged in successfully!"

}

MessageDialog {
    id: errorDialog
    title: "Login Failed"
    text: "Invalid username or password."

}

}
MainTabview.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
width: parent.width
height: parent.height

ColumnLayout {
    anchors.fill: parent

    TabBar {
        id: mainTabBar
        Layout.fillWidth: true
        onCurrentIndexChanged: mainStack.currentIndex = currentIndex

        TabButton {
            text: "Screen 1"
            onClicked: mainTabBar.currentIndex = 0
        }

        TabButton {
            text: "Screen 2"
            onClicked: mainTabBar.currentIndex = 1
        }

    }

    StackLayout {
        id: mainStack
        Layout.fillWidth: true
        Layout.fillHeight: true

        Item {
            MainScreen1 {}
        }

        Item {
            MainScreen2 {}
        }

        // Add more screens as needed
    }
}

}

RegistrationPage.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
signal registrationSuccess()
signal cancelClicked()

Column {
    anchors.centerIn: parent
    spacing: 10

    TextField {
        placeholderText: "Username"
    }
    TextField {
        placeholderText: "Email"
    }
    TextField {
        placeholderText: "Password"
        echoMode: TextInput.Password
    }
    Button {
        text: "Register"
        onClicked: {
            registrationSuccess()
        }
    }
    Button {
        text: "Cancel"
        onClicked: {
            cancelClicked()
        }
    }
}

}

MainScreen1.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
width: parent.width
height: parent.height

Rectangle {
    anchors.fill: parent
    color: "lightblue"

    Text {
        text: "Main Screen 1"
        anchors.centerIn: parent
    }
}

}

MainScreen2.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
width: parent.width
height: parent.height

Rectangle {
    anchors.fill: parent
    color: "lightgreen"

    Text {
        text: "Main Screen 2"
        anchors.centerIn: parent
    }
}

}

try like this

Sahil1

@davidjs1 Yeah May be it will work, try this example