Changing Toolbar dynamically (solved)
-
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?
-
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?
Hi @jimcad,
Assign aLoader
totoolBar
and load theComponent
's as required. TheComponent
can contain anyItem
.
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
-
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 }