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
}
}
Related
I am using Qt 5.15 Quick 2 QML to create a row of custom buttons in a window. When I have a standalone custom button things appear to work fine, but when I put them in a RowLayout there appears to be severe clipping and artifacting issues.
A minimum reproducible example might look like:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
RowLayout
{
anchors.fill:parent
anchors.margins: 25
Button
{
text: "Click Me"
Layout.fillWidth: true
}
CustomButton
{
text: "That Boy Don't Glow Right"
}
Button
{
x: 100; y:100
text: "Click Me"
Layout.fillWidth: true
}
}
}
with the custom control
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Button {
id: control
text: "Click Me"
Glow {
anchors.fill: control
radius: 64
spread: 0
samples: 128
color: "red"
source: control
visible: true
}
}
with example output:
One potential fix is to add change the Glow to
Glow {
anchors.fill: control
width: parent.width
height:parent.height
x:control.x
y:control.y
parent: control.parent
...
But this doesn't seem right. First, it's not obvious to me where parent.width and control.x and control.parent are bound from and what happens in single and multiple nesting. If a CustomButton is placed inside another control with id control, would it rebind the property? And it appears if a RowLayout is placed inside a RowLayout, then it would require parent: control.parent.parent. In my actual code there is some non-trivial positioning to allow margins for a drop shadow, too, and the CustomButton is in another container so the actual code that works is: x:control.x + parent.pad/2 and parent:control.parent.parent.parent which is, frankly, ridiculous and assumes that non-standard fields in the parent are always available.
Is there a better way? Was hoping I could keep the button's ability to glow itself.
According to the docs:
"Note: It is not supported to let the effect include itself, for instance by setting source to the effect's parent."
So it's fortunate that you were able to get your example to work at all. One way to avoid using the parent as a source is to point the Glow object at the Button's background object:
Button {
id: control
Glow {
source: control.background
}
}
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.
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
Qt 5.11.1 & Qt Creator 4.7.0, Windows 10
Create a maximized window, click the button (use showMinimized() or visibility = Window.Minimized) to minimized it.
Then click the application icon in taskbar, the window supposed to show maximized. But, it's always windowed instead of maximized.
If I click the system "minimize button" top-right corner, the window can restore to maximized.
main.qml:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.3
Window {
visible: true
width: 640
height: 480
Component.onCompleted: showMaximized()
Button {
anchors.centerIn: parent
onClicked: {
showMinimized()
// visibility = Window.Minimized
}
}
}
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
}
}