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

Violet Giraffe

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?

Devopia53

@Violet-Giraffe

Hi.

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

Violet Giraffe

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

? Offline

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

Violet Giraffe

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

Violet Giraffe

https://bugreports.qt.io/browse/QTBUG-55143

ekkescorner

hi,
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

Violet Giraffe

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

ekkescorner

you can use a Component for the Loader
http://doc.qt.io/qt-5/qml-qtquick-loader.html

Violet Giraffe

This post is deleted!

Violet Giraffe

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