There's a plugin called Qt.labs.platform. Among other things, it provides tray icon with a menu. That menu has a list of MenuItems. Any menu item may have an icon, which would be displayed on the left side of item's text.
There's two ways of setting the icon, none of which work for me:
1) Version 1.0 defined iconSource and iconName properties.
Silently does not work, just shows no icon.
2) Revision 1.1 (declared as Q_REVISION(1)) introduces icon.name, icon.source and icon.mask "sub-properties" (not sure what's the right name for it?)
Fails QML engine with a message:
"MenuItem.icon" is not available in Qt.labs.platform 1.1.
I tried both import Qt.labs.platform 1.1 and 1.0.
Am I missing something in the mechanics of QML revisions or this is a bug in Qt?
A MenuItem is declared in qquickplatformmenuitem_p.h and defined in qquickplatformmenuitem.cpp files.
I'm using ArchLinux, KDE/Plasma. Some other apps (like electron-based) do have their icons in menu showing properly.
UPD Reported as a Qt bug.
I don't know what exactly you are doing to achieve your goal, because there is no minimal reproducible example.
But take a look at here
import QtQuick 2.12
import QtQuick.Window 2.12
// import Qt.labs.platform 1.1
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
width: 200
height: 200
anchors.centerIn: parent
MenuBar {
id: menuBar
Menu {
id: firstMenu
MenuItem {
icon.name: "download"
icon.source: "icons/cloud-down-icon.png"
}
MenuItem {
text: qsTr("Rewrap Paragraph")
onTriggered: rewrapParagraph()
}
}
}
}
}
Note: put your icon inside the icons folder in the project folder.
If you click on the menu then you should get a dropdown with two items, first one is just an icon without the text (you can include some text by yourself), second item is just a text.
Related
https://doc.qt.io/qt-5/qml-qtquick-controls2-menubar.html
MenuBar is supported in ApplicationWindow and not in Window.
Following throws an error "Invalid property name: MenuBar"
Window
{
visible: true
width: 280; height: 280
menuBar: MenuBar {
Menu {}
}
}
whereas following works:
ApplicationWindow
{
visible: true
width: 280; height: 280
menuBar: MenuBar {
Menu {}
}
}
In the new Qt version 5.12, the default code uses Window and not ApplicationWindow.
What is the difference between Window and ApplicationWindow? Which one should be used in which case?
The docs is very clear:
ApplicationWindow is a Window that adds convenience for positioning items, such as MenuBar, ToolBar, and StatusBar in a platform independent manner.
That is, it is an item that inherits from Window but has certain default attributes, it is similar to QMainWindow with respect to QWidget.
When you say: In the new Qt version 5.12, the default code uses Window and not ApplicationWindow I suppose you mean that QtCreator uses Window by default in creating projects, that's just because the developers wanted to and there is no science in it, just a choice.
When you should use one or the other depends on when you want to customize and if you are comfortable with the ApplicationWindow structure since as you can see the latter has a predefined structure.
Note: There are 2 items called ApplicationWindow 1, 2
In Qt 5.15 Quick 2 code, setting a QtQuick.Dialogs FileDialog visible property to true causes it to animate onto the screen in a "blorping" motion. I am developing a Gantt chart where clicking on an item in the timeline will bring up a window to edit its properties. Is there a way to not just have the Frame/Window appear instantly but instead to "blorp" out of the item clicked like the FileDialog does from the top of the window? I notice that the shape and interior controls of the FileDialog are morphed and then solidify to indicate that the dialog is being introduced and which window it is coming from. In my case I hope to have the window pop out of the control it will edit the properties of and, when finished, squirt back inside to reinforce that those properties are being pushed into the item being edited. Is this possible?
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Dialogs 1.2
import QtQuick.Controls 2.5
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button
{
onClicked: chooseFile.visible = true
text: "Click Me"
}
FileDialog
{
id: chooseFile
title: "Save Me!"
//folder: shortcuts.home
selectExisting: true
}
}
I'm trying to create an application that is extensible with plugins. Now the plugins should be able to add a Menu dynamically in the MenuBar.
From documentation I can find a MenuBar that is provided by QtLabsPlatform. This has a method addMenu. But Windows was not in the list of supported platforms. So I cannot benefit from it.
I tried the placeholder technique suggested in Error adding a Menu in QML, but this does not work with QtQuick.Controls 2.13
In the #timday answer in the question you indicate indicates the answer but does not show an example:
...
Dynamic creation of Menus is a little harder; see Qt.createQmlObject
or Qt.createComponent docs. (It may be simpler to just declare all the
ones you need in your code, but with their visible property wired to
whatever logic is appropriate). ...
(emphasis mine)
So my answer is just to show you how to do it although I think you want to add MenuItem to a Menu dynamically, instead of a Menu to a MenuBar:
import QtQuick 2.13
import QtQuick.Controls 2.13
ApplicationWindow {
id: root
width: 640
height: 480
visible: true
menuBar: MenuBar {
Menu {
id: plugins_menu
title: qsTr("&Plugins")
}
}
function onTriggered(item){
console.log(item.text)
}
Component.onCompleted:{
var plugin_names = ["plugin1", "plugin2", "plugin3"]
for(var i in plugin_names){
var item = Qt.createQmlObject('import QtQuick 2.13; import QtQuick.Controls 2.13; MenuItem {}',
plugins_menu)
item.text = plugin_names[i]
plugins_menu.addItem(item)
var f = function(it){
it.triggered.connect(function (){ root.onTriggered(it)
})}
f(item)
}
}
}
I am following this tutorial on YouTube and the person sets the TextField to fill the width of the RowLayout. However, it doesn't seem to work for me. I tried using Layout.fillWidth on the CheckBox and it seems to work perfectly fine but it doesn't seem to want to work on the TextField. Here is my code:
main.qml:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow
{
visible: true;
width: 640;
height: 480;
title: qsTr("Tabs");
ToDoList
{
anchors.centerIn: parent;
}
}
ToDoList.qml:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Frame
{
ListView
{
// Using implicit width and height allows the frame to automatically scale to the size of the list view
implicitWidth: 250
implicitHeight: 250
clip: true
model: 100
delegate: RowLayout {
width: parent.width
CheckBox {}
TextField
{
Layout.fillWidth: true
}
}
}
}
Here is a screenshot of what mine looks like
What did I do wrong?
I don't know if this has anything to do with it but I made a "Qt Quick Application - Swipe" instead of "Qt Quick Controls 2 Application" as that option wasn't available to me. Thanks in advance for any help.
Edit: I have written step by step instructions to replicate the issue below.
File > New File or Project
From the new window make sure "Application" is selected then click "Qt Quick Application - Swipe" and press "Choose"
Set any name for the project and click "Next"
Set the build system to "qmake" and click "Next"
Set the minimal required Qt version to "Qt 5.9" and the Qt quick controls style to "Material Dark" and click "Next"
Select the "Desktop Qt 5.12.0 MSVC2017 64bit" as the kit and click "Next"
Set the options to have no version control and click "Finish"
Delete "Page1Form.ui.qml" and "Page2Form.ui.qml" from the "Projects" pane
Replace the contents of "main.qml" with:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow
{
visible: true;
width: 640;
height: 480;
title: qsTr("Tabs");
ToDoList
{
anchors.centerIn: parent;
}
}
Right click on the root project file and click "Add New"
From the new window make sure "Qt" is selected then click "QML File (Qt Quick 2)" and press "Choose"
Name the file "ToDoList" and click "Next"
Add to project "qml.qrc Prefix: /" then set the options to have no version control and click "Finish"
Replace the contents of "ToDoList.qml" with:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Frame
{
ListView
{
// Using implicit width and height allows the frame to automatically scale to the size of the list view
implicitWidth: 250
implicitHeight: 250
clip: true
model: 100
delegate: RowLayout {
width: parent.width
CheckBox {}
TextField
{
Layout.fillWidth: true
}
}
}
}
Run the project
The width is set properly. The problem is with TextField style. You may check it by setting background like
TextField
{
Layout.fillWidth: true
background: Rectangle {
color: "red"
}
}
Or just start typing into those fields with and without Layout.fillWidth: true
Is there already something like the android "toast" fading message popup for qml? I surely can create something by myself but I would assume/hope that there already is something like that delivered with Qt / QtQuickControls2
See ToolTip. It is styled like a "toast" when using the Material style.
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
width: 360
height: 520
visible: true
Button {
text: "Button"
anchors.centerIn: parent
ToolTip.text: "ToolTip"
ToolTip.visible: pressed
ToolTip.timeout: 3000
ToolTip.delay: 500
}
}