Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change header icons changing page



  • 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.


  • Qt Champions 2018

    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.


Log in to reply