Prevent resize and flicker when showing a window
-
When displaying a (modal) window (QQuickView) with a QML component (with children) inside it, the QML component (and its children) does not report correct size until after the window is made visible. The result is that the window initially appears small and then as the QML components are laid out and rendered, their sizes are updated, eventually the size of the window is updated too to reflect the content size change. The problem is that this is all visible to the user and does not look nice. Are there any techniques to show a window such that the only thing the user sees is the final appearance and size of the window? Like fully prepare the window and then show it so the preparation does not happen in front of the user? One thing that comes to mind is make the window transparent, show it and then make it opaque but there's got to be a better way.
-
You're seeing the window resize because QML layouts and implicit sizes are only resolved after the window is shown. To avoid this visual flicker, the best approach is to fully prepare the window before making it visible.
To prevent the visual flicker:
Use
visible: false
and
Component.onCompleted
Defer display until layout is complete.
UsesetVisibility(QWindow::Hidden)
first.Create and prepare window off-screen, then show.
-
How exactly should I prepare it off-screen if the preparation happens when it is shown? The QML is created dynamically with
Qt.createComponent
itsComponent.onCompleted
executes before the QQuickView is shown. The QML component is added as a child of the QQuickView and then the QQuickView is shown. Since we use this to display a simple question dialog, we want the QML component to auto-resize itself and the dialog to resize as well to accommodate for this. It works but as I said this is all visible to the user.