Quick Controls 2, is it possible to show and hide header (toolbar) dynamically?
-
I have an
ApplicationWindowwith 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. theSlider), but the reserved header and footer areas themselves stay on screen. Is there a workaround? -
@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 (withanchors.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...
-
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. -
-
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 perfectheader: 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 BARSfor your scenario use .active of the loader instead of .visible of the header
should work -
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 perfectheader: 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 BARSfor 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 (manipulatingheader.visible+toolbar.height). But this looks complicated since I don't want to declare a separate .qml. Gonna give it a try. -
you can use a Component for the Loader
http://doc.qt.io/qt-5/qml-qtquick-loader.html -
you can use a Component for the Loader
http://doc.qt.io/qt-5/qml-qtquick-loader.htmlThis post is deleted! -
you can use a Component for the Loader
http://doc.qt.io/qt-5/qml-qtquick-loader.html@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.
