Change header icons changing page

[davidino]

Goodmorning,
I've realized inside the ApplicationView, a stackView so that I could change page. Aside that I'd like to add a header that changes its content according to the selected page. Consider that inside the header, I have some icons that are the same, others can change function when pressed, too.
What is the best option to implement such thing?

Thank you in advanced.

[GrecKo]

The usual and flexible way to do that is a data driven solution.
Don't add a button that will be added in the header, but define an action which the header will display how it wants.

Create a custom page type with a property list<Actions> actions (a QQC2 Action can have a icon defined in it) and the display this actions with a Row + Repeater in the header.

MyPage {
    title: "My Test Page"
    actions: [
        Action {
            icon: /* ... */
            onTriggered: doStuff()
        }
    ]
}

MyHeader {
    property MyPage currentPage
    Text {
        anchors.centerIn: parent
        text: currentPage ? currentPage.title : ""
    }
    Row {
        anchors.right: parent.right
        Repeater {
            model: currentPage ? currentPage.actions
            delegate: MyActionDelegate {
                // display the icon in it, call the action.triggered method in the onClicked, ...
            }
    }
}

Quick and dirty positionning, do better than that. But the idea is here.
You can add more feature as needed.
Add a visible property in the action and follow it in the delegate, respect the enabled property too.
Add a back button in the header to pop the stackview. You could add a way for the currentPage to prevent going back, et cetera, et cetera.