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.