Changing Toolbar dynamically (solved)

jimcad

I'd like to change Toolbar content dynamically depending on page. The main toolbar has been set in the main qml file.

ApplicationWindow {
  id: appWindow
  ...
    toolBar: ToolBar {
        id: mainToolbar
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: "Back"
            }
            Label {
                text: "Title"
            }
            Item { Layout.fillWidth: true }
        }
    }
    StackView {
        ...
    }
}

The pages are handled using StackView and the content of toolbar should be changed when to changing page.

I know that I can show or hide parts of content, but can I replace the whole toolbar and how?

p3c0

Hi @jimcad,
Assign a Loader to toolBar and load the Component's as required. The Component can contain any Item.
Eg:

toolBar: Loader {
    id: loader
    sourceComponent: comp1
}

Component {
    id: comp1
    ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                iconSource: "new.jpg"
            }
        }
    }
}

Component {
    id: comp2
    ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                iconSource: "new.jpg"
            }
            ToolButton {
                iconSource: "edit.jpg"
            }
        }
    }
}

...
loader.sourceComponent = comp2

jimcad

Thank you very much! It works... only problem seems to be Layout.fillWidth. ToolButton is not displayed if fillWidth is used. Any ideas?

ToolButton {
   iconSource: "new.jpg"
   Layout.fillWidth: true // <-- doesn't work with loader
}

p3c0

@jimcad Not sure. Try adding some width for Loader.

jimcad

@p3c0 yep, so simple. Thanks again :)

p3c0

@jimcad Glad that it worked :)