Toplevel Windows and Menus with Qt Quick
We have already been writing shiny Qt Quick applications for a while now. Thanks to the people working on Qt Quick Desktop Components, Qt Quick is no longer interesting only on mobile platforms.
One of the fundamental things that was still missing, is the possibility to create a toplevel window directly inside a QML application. This is now possible without writing any additional C++ code, by using the new functionality provided in the Qt Quick Desktop Components repository.
- Creating toplevel windows directly in QML
- Define window modality and window decorations
- Use QML bindings to resize / minimize / maximize a toplevel window
- Adding menus with shortcuts to a toplevel window using QML items
- Gather information about the screen geometry
- Create property bindings across several windows
Lets take a brief look at those features.
A Toplevel Window
This is how a main window for your application can be created:
title: "My MainWindow"
If you want to create a child window, simply create another Window item inside the first one and set visible to true. Of course the child window will be deleted automatically as soon as the parent window is being closed.
Modality and Window Decorations
The modality or window decorations can be defined as well:
If your window should have certain constraints on size you can apply these as follows:
For a lot of applications the maximum window size is obviously tied to the available screen resolution and the available space on screen. Therefore we also export a Desktop item that delivers screenGeometry and availableGeometry per screen as well as a global screenCount. If you are interested in this information please take a look at the Gallery.qml example.
Minimize, Maximize and Normalize
In case you want your window to be minimized, normalized or maximized on a certain event, you can use the windowState property of the Window item to achieve this:
onClicked: window.windowState = Qt.WindowMaximized
Property Bindings across several Windows
Due to the fact that the scenes of different windows still share the same declarative engine, it is perfectly viable to create property bindings across several windows. Simply refer to an object in a different window as you are already used to do with QML Items.
onClicked: myRect.color = "red"
Menus, Submenus and Shortcuts
Using the QML items MenuBar, Menu and MenuItem you can actually create native menubars and menus on desktop platforms. A Menu can have several MenuItems and of course also nested Menus.
onTriggered: window.windowState = Qt.WindowMaximized;
Getting rid of QmlViewer's MainWindow
When using qmlviewer there will always be qmlviewer's main window visible on the screen that can not be styled with additional Menus.
You can avoid this by using the provided qmldesktopviewer application instead. If you decide to use qmldesktopviewer for this purpose, make sure that your main QML file's root item is a Window.
$ ./qmldesktopviewer/qmldesktopviewer examples/TopLevel.qml
Available Code and Examples
Currently all the code and examples can be found in the Qt Quick Components for Desktop repository in the master branch.
The repository also contains two examples that might be helpful.
There is the file examples/TopLevel.qml which wraps around the regular Gallery and adds menus and toplevel window behavior.
Further there is also examples/TopLevelBrowser.qml, a very simple webbrowser based on QtWebkit's WebView Item. While this very simple browser might not give you the best browsing experience, it serves great as an example for opening and closing tabs or even new browser windows on the fly.
Have fun experimenting with this new feature set. And let us know how you like it.
Subscribe to our newsletter
Try Qt 6.4 Now!
Download the latest release here: www.qt.io/download.
Qt 6 is the productivity platform for the future, with next-gen 2D & 3D UX and limitless scalability.
Explore Qt World
Check our Qt demos and case studies in the virtual Qt World
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
Näytä tämä julkaisu Instagramissa.
Want to build something for tomorrow, join #QtPeople today! We have loads of cool jobs you don't want to miss! http://qt.io/careers #builtwithQt #software #developers #coding #framework #tool #tooling #C++ #QML #engineers #sales #tech #technology #UI #UX #CX #Qt #Qtdev #global #openpositions #careers #job
Henkilön Qt (@theqtcompany) jakama julkaisu