**Course Title:** QML Application Development **Section Title:** Layouts and Navigation **Topic:** Developing a multi-page application with navigation.(Lab topic) In this lab topic, we will build upon the concepts learned in the previous topics and focus on developing a multi-page application with navigation. We will explore how to design and implement navigation between pages using QML layouts and components. **Learning Objectives:** * Understand how to design a multi-page application with navigation * Learn how to use QML components to implement navigation between pages * Understand how to use StackView and TabView to manage page navigation **Lab Topic Overview:** In this lab topic, we will create a simple multi-page application with navigation. We will use QML components such as Rectangle, Text, and Button to create the pages and navigate between them. We will also use StackView and TabView to manage the page navigation. **Step 1: Creating the Pages** Let's start by creating the pages for our application. We will create three pages: Home, About, and Contact. ```qml // Home.qml import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { id: homePage width: 400 height: 600 color: "lightblue" Text { text: "Home" anchors.centerIn: parent } Button { text: "Go to About" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter onClicked: { // navigate to About page } } } ``` ```qml // About.qml import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { id: aboutPage width: 400 height: 600 color: "lightgray" Text { text: "About" anchors.centerIn: parent } Button { text: "Go to Contact" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter onClicked: { // navigate to Contact page } } } ``` ```qml // Contact.qml import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { id: contactPage width: 400 height: 600 color: "lightgreen" Text { text: "Contact" anchors.centerIn: parent } Button { text: "Go to Home" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter onClicked: { // navigate to Home page } } } ``` **Step 2: Implementing Navigation using StackView** Let's use StackView to manage the page navigation. ```qml // main.qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id: window width: 400 height: 600 visible: true StackView { id: stackView anchors.fill: parent initialItem: homePage } Component { id: homePage Home {} } Component { id: aboutPage About {} } Component { id: contactPage Contact {} } } ``` **Step 3: Implementing Navigation using TabView** Let's use TabView to manage the page navigation. ```qml // main.qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id: window width: 400 height: 600 visible: true TabView { id: tabView anchors.fill: parent TabButton { text: "Home" } TabButton { text: "About" } TabButton { text: "Contact" } // pages Home {} About {} Contact {} } } ``` **Conclusion:** In this lab topic, we learned how to design and implement a multi-page application with navigation using QML layouts and components. We used StackView and TabView to manage the page navigation. **What's Next:** In the next topic, we will explore the basics of QML animations and learn how to create smooth and engaging animations for our application. **References:** * [QML StackView](https://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.html) * [QML TabView](https://doc.qt.io/qt-5/qml-qtquick-controls2-tabview.html) * [QML Navigation](https://doc.qt.io/qt-5/qmlapplication.html#navigation) **Do you have any questions or need help with implementing the concepts learned in this topic? Please leave a comment below.**