Qt radio button switch display delay - qt

I'm having a Qt application here where I have a main window with 5 QPushButtons that are aligned vertically.
These buttons work in a radio-group manner.
This means, that they are checkable and auto-exclusive.
Since I need to be able to resize the font size of the button text when the main window resizes, I included my own override of QPushButton and set it as custom widget in designer.
What I don't understand is, that there is a heavy delay when I switch from one button to another via keyboard shortcuts! Same when I click with the mouse.
I would say that this delay is about 0.5 to 1 second.
Have tried it on different machines.
I really need to get rid of this!
Anyone has an idea of what I could do to fix this??
Edit : Just found out that this behavior is the same when I just use normal QPushButtons. It seems that the delay is getting more when the buttons are getting bigger. Any help is strongly appreciated!!!

A shot in the dark: Setting the font might cause another resizeEvent, which in turn causes another one and so on... Try putting the font adjustment code into a method that you explicitly call when you enter/leave full screen mode.

Related

How to create an gradient button with colored shadow

I'm kind of noobie in Flutter and I'm trying to learn it for the moment by creating different UI styles for whatever applications. But I encounter a problem in terms of designing a button.
WHAT I WANT TO DO:
WHAT I TRIED:
Using a GradientButton:
I can't change the rounded corners to not be that rounded.
I can't change the size of the button dynamically based on the size of text
I can't change the shadow of the box
Using a RaisedButton in combination with a Container:
If I will tap the button is going to show a gray box which was clicked on, but this box is not going to have the same size or shape with the box, so it's going to look weird.
Using an InkWell in combination with a Container:
I'm not quite sure but I can't do the click animation with that, is like I'm pressing on nothing, even those the action is happening.
If you do have any idea how can I archive this button please let me know, for me at the moment at least is the most complicated button I've ever seen.
see the source code at github
https://github.com/bluemix/Gradient-Widgets/blob/master/lib/src/gradient_button.dart
You can use Container to custom button gradient and add GestureDetector or InkWell to onTap handle action.
GestureDetector will have no effect. InkWell will have effect.

qml: achieve a chrome-like menu

I would like to achieve with QML a menu with a single menu item, like chrome does it. It has this button with those three horizontal bars and when you click it you get a single menu. Recent versions of firefox also follow the same principle. It allows not to waste too much horizontal space in the GUI of the application, unline usual menus which take up the whole width of the window.
I did not manage to reproduce exactly this GUI with QML. From what I saw you can either use a QML ApplicationWindow, and then a MenuBar, but then it takes the whole width of the window... Or have a toggle button to trigger the menu, then use a standalone Menu and its popup() method, but then it pops-up directly under the cursor, not exactly under the button to open the menu, which doesn't look good. That's really more abusing the mechanism for a context menu.
I could make a fake menu which would be a custom widget in my window but then it could not expand beyond my application window. Such a behaviour is almost required because I'll put this button on the far right of the window, as chrome does it.
Is it possible to achieve exactly that behaviour in pure QML (no C++)?
What I did for now is the last option that I mentioned: fake menu in the window. It's drawing using the canvas which enables me to make it a little pointy arrow from the menu to the menu toggle button, as done also by firefox.
The minus as I said is that the menu cannot go out of the window, plus everything is very manual (mouseover effect for menu items...), so I'm still interested in other solutions.
EDIT: ok after some time I realized a big plus of my approach: I can put custom widgets, not only labels in the menu. So I think it's absolutely the right approach now.

QToolBar: styling 'show more' button

Does anyone have idea on how to style this rectangular button -which is a default child of a QToolbar?
First two images show the button when the graphical interface is on normal screen mode. It appears; since toolbar icons don't have enough space. Third picture shows fullscreen mode, in which my icons have space.
I want to style its shape, so that it has a radial border, without a corner. This will cancel its ugly look, in second image.
I want to let users use the interface in normal view, so locking application to fullscreen is not an option. I do want to use the button, so removing is not acceptable. Styling its position to 5 pixels left or replacing it with another stylable button could be possible solutions, but I couldn't manage to do them.
I played a lot with toolbutton and pushbutton stylesheets, but had no luck on styling this small button. I am pretty obsessed about my graphical design, but don't want to waste too much time (if solution is not trivial, I will change my toolbar to a rectangular one).
Thanks in advance.
I found the solution by listing the children object names of my toolbar.
QStringList list;
for(int i=0; i<toolBar->children()->size(); i++)
list.append(toolBar->children()[i]->objectName();
Inside the list, there is only one object that has a default name (not " "). It is qt_toolbar_ext_button
Then I was able to style it as:
"#qt_toolbar_ext_button { //... }"
I know this has been answered, but for anyone who needs to know the answer its a "QToolButton" and if you need to style a specific button with an object name you do "QToolButton#objectName" in an external resources file stylesheet or in the Widget UI stylesheet dialog for different objects.
QToolButton#objectName {
}
Check out the documentation - http://doc.qt.digia.com/4.2/stylesheet.html
This gives you the syntax for stylesheets in Qt, or "QSS" files.
Just do it: Qt documentation about stylesheets

Window flags not helping in mdiarea in Qt

I am using Qt and creating a GUI with multiple sub windows. I am using MDI Area for the same. I want to hide the top toolbar of mdi subwindow but using window flags is not helping.
I have tried writing the code as follows. First I tried for mdiarea and then for subwindow but neither worked.
mdiarea.setWindowsFlags(Qt::FramelessWindowHint);
subwindow.setWindowsFlags(Qt::FramelessWindowHint);
I have also tried using Qt::CustomizedWindowHint but even that is not helping. Please help me with this.
Thank You.
Try this:
mdiArea->addSubWindow(new QLabel("Qt::FramelessWindowHint"), Qt::FramelessWindowHint);
You don't want to set the MDI area itself as a frameless window, because it's a widget you likely have embedded in another window... it most likely already doesn't have a frame.
Your setting the 'subwindow' should work... but addSubWindow(myWidget) actually wraps the widget passed in in the real subwindow, so that's what was going wrong. Qt lets you pass in window flags as the second parameter of addSubWindow() and those flags go to the real subwindow.
Note that with a frameless window, you can't drag the window around to move it, or grab the edges to resize it, because there's nothing for you to grab onto!
If you just want the minimize and maximize buttons gone (but still want the close button), try passing Qt::Dialog instead.
Try also experimenting with these:
addSubWindow(new QLabel("Qt::Tool"), Qt::Tool);
addSubWindow(new QLabel("Qt::Tool|Qt::CustomizeWindowHint"), Qt::Tool|Qt::CustomizeWindowHint);
addSubWindow(new QLabel("Qt::Dialog"), Qt::Dialog);
I think Qt::Tool|Qt::CustomizeWindowHint is probably the best option (no buttons, but still movable and resizable - if you don't want it resizable, give it a fixed size (setFixedSize()).
Edit: Also try: Qt::CustomizeWindowHint|Qt::WindowTitleHint

To build a flex volume control component similar to that of Youtube

Hey, I've been assigned to design a flex 3 volume control component similar to the one Youtube players have. I mean, you move the mouse over the volume icon and a vertical slider appears.
My only doubt is about how making this vertical slider to appear and to hide properly.
Should I extend a PopUpButton somehow? Maybe another kind of PopUp component? Or do I really need to program the whole thing in actionscript(that would be just sad and sounds like reinventing the wheel)?
Is anyone able to simply point me in the right direction?
OBS: No need to teach me about skinning, designing.. or any of the rest. :)
No! Don't use a popup. Put a canvas somewhere hidden behind your bar of controls and just set it's visible to true when you mouse over the control.
I don't remember if the youtube slider covers the volume button or appears above it, but either way you can put it in there with a canvas.
If you want it to be one single component, the problem you run in to is that the size will be wrong if you hide the slider in the button component (It will be measured to be the size of the slider, instead of the button). But don't worry! Just override measure() and measure the button instead of both. Then if you set clipContent to false, it can display the slider outside of its bounds
What I suggest is to create a flex control that contains a graphic for displaying the volume meter and a hidden slider.
When you roll over the graphic volume meter you show the slider.
When you roll out the slider or the volume meter then you hide the slider.
I believe that's all

Resources