Assign ApplicationWindow header/footer

BourgeoisLab

Hi there,

I have a qml ApplicationWindow and I want to assign the header and/or footer depending on the current page shown.

I have a StackView with a home page and a SwipeView that get pushed when the user chose something from the home page. Now the home page has a footer and all pages from the SwipeView have another common footer. How can I activate the corresponding footer?

What I do so far is hiding elements depending on the StackView depth. But that is not really flexible. I want to define 2 footers (Toolbars) and assign them.

Here my simplified code:

ApplicationWindow {

    StackView {
        id: stackView
        initialItem: homePage

        HomePage {
            id: homePage
            onSomethingChanged: parent.push(mainView) // todo: change here the footer
        }

        SwipeView {
            id: mainView
			
            SwipePage1 {
            }

            SwipePage2 {
            }
        }
    }

    footer :  ToolBar {
        RowLayout {
            anchors.fill: parent
            Text {
                id: errorMsg
                visible: stackView.depth == 1 // todo: unflexibel stuff
                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                text: "footer"
            }
            PageIndicator {
                visible: stackView.depth > 1 // todo: unflexibel stuff
                count: mainView.count
                currentIndex: mainView.currentIndex
                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

Btw: I prefer not to define the footer in the pages themselves. In one footer I want to have a PageIndicator to show the SwipeView's current index.

Thanks for any help. Cheers.
Frederic

p3c0

@BourgeoisLab

I want to define 2 footers (Toolbars) and assign them.

You can wrap them inside Component and load them using Loader when required. Something like:

Component {
   id: compA
}

Component {
   id: compB
}

footer: Loader {
        sourceComponent: (some condition) ? compA : compB
}