Quick Controls 2, is it possible to show and hide header (toolbar) dynamically?

  • I have an ApplicationWindow with a header and a footer:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Material 2.0
    ApplicationWindow {
        Material.theme: Material.Dark
        id: window
        visible: true
        header: ToolBar {
            id: toolBar
            RowLayout {
                anchors.fill: parent
                Slider {
                    Layout.fillWidth: true
        footer: ToolBar {
            id: statusBar

    So far it works fine. But if I try to hide the footer and the header at runtime upon some event (toolBar.visible = false), the contents disappears (e. g. the Slider), but the reserved header and footer areas themselves stay on screen. Is there a workaround?

  • @Violet-Giraffe


    Do you want this? window.header.visible = false

  • @Devopia53
    Hi. That looked very promising, but no, that doesn't work either. A stripe of the window background color remains where the header and footer were. The full-screen view inside the window (with anchors.fill: parent) did not expand into this free area.

  • Please report a bug. ApplicationWindow actually even relayouts the content when the visibility of the header or footer changes, but it must be missing a check for their visibility and so it merely uses their heights regardless of their visibility. As a temporary workaround, you can set the header to null or set the tool bar's height to 0. Sorry for the inconvenience. We have plans to introduce some sort of transient headers and footers at some point, but the work for that hasn't started yet...

  • @jpnurmi
    Thanks a lot, will report a bug shortly. For a moment there I was afraid the window isn't supposed to relayout its contents, meaning what I'm trying to do is impossible.

  • Qt Champions 2016

    you can use headers dynamically. simply use loaders.
    while my app is starting-up my header is null
    then I have different headers for Portrait and Landscape
    works perfect

    header: isLandscape || !initDone ? null : titleBar
        // show TITLE  BARS is delayed until INIT DONE
        Loader {
            id: titleBar
            visible: !isLandscape && initDone
            active: !isLandscape && initDone
            source: "navigation/DrawerTitleBar.qml"
        // in LANDSCAPE header is null and we have a floating TitleBar
        Loader {
            id: titleBarFloating
            visible: isLandscape && initDone
            active: isLandscape && initDone
            source: "navigation/DrawerTitleBar.qml"
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
        // end TITLE BARS

    for your scenario use .active of the loader instead of .visible of the header
    should work

  • @ekkescorner
    That's interesting, especially since I'm still struggling with my initial approach (manipulating header.visible + toolbar.height). But this looks complicated since I don't want to declare a separate .qml. Gonna give it a try.

  • Qt Champions 2016

    you can use a Component for the Loader

  • This post is deleted!

  • @ekkescorner, yes, I've seen that. Turns out I had an anchor loop that prevented it from working. Works now! The QML is starting too look way too complicated, but at least it works.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.