Using Qt 5.10, Qt Quick2 2.10, Qt Quick Controls 2.3 Button class, I have defined a button that displays an icon and a button that displays text as follows:
Button {
iconSource: "my_button.png"
enabled: sometimes
}
Button {
text: "My Button"
enabled: sometimes
}
I would like the icon button to behave just like the text button below it for user interaction. It should change its appearance appropriately when it is in the click, hover, or disabled state.
Hover and click mode are working, since they only rely on changing the icon background, and not the icon image itself.
Disabled mode is not working. The button displaying text behaves correctly (the text and the border turn gray), but in my icon button, nothing changes when it is disabled.
Details about my icon file:
The RGB values are all black (#000000) corresponding to the color I want my icon drawing to be. The image shape is drawn in the alpha channel. I have tried playing around with the other channels, but I have not had success.
Here is an image from my project. You can see a row of icon buttons on top, and three text buttons below. Although some of the icon buttons are disabled, they all look the same.
I have cleaned up this question. Maybe should not have posted a question the day after St. Patrick's Day :)
The Qt docs for the Button class instruct you to set the iconSource property to define the url for the icon image file. However, this is for QtQuick 1.4.
QtQuick 2.3 does not appear to have documentation yet, though it is the standard for the current Qt 5.10.
The Button (Controls.2/Button.qml) inheritance list is:
QQuickItem
QQuickControl
Templates.2/QQuickAbstractButton
Templates.2/QQuickButton
Button or {Style}/Button
There is no longer any iconSource property in Button. Instead, you access the icon property of QQuickAbstractButton, which is of type QQuickIcon. Using icons in Qt Quick 2 is documented here - Icons in Qt Quick Controls 2 -, along with.. a Button example!
Since the parent classes of Button use prototype inheritance, it seems that the properties of the parents, such as "icon" are available in the Button class as well. You can look in the qml directories in the Qt installation directory to see the class declarations without downloading the whole Qt source code.
So, my new Button code looks like this:
Button {
icon.source: "my_button.qml"
icon.color: enabled ? "#000000" : "888888"
enabled: sometimes
}
Note: I am using the Fusion style, but this does not affect the existence of the icon property, which is inherited from a prototype.
Related
The application I currently work on has a map as a background, and above it various other dialogs(views) with more than one view inside can be opened. When some of the dialogs is active, when dragging over it's background map is moving like there's nothing above it. Does someone know how to disable this? I don't want map to react on clicks or anything inside a dialog.
The project is organised so that each dialog is implemented in separate qml file:
I have each qml file for each dialog, and each component of application (map), so
when you click, for example on settings tab in scrollable horizontal list, settings tab is opened from qml that holds all dialogs, including bottom and top of the app
each dialog is above map and has a 50% transparent background, with related images and buttons in it
I want to disable dragging map while dragging over dialog's background. I tried with setting this to each dialog:
MouseArea {
anchors.fill: parent
onClicked: mouse.accepted = true
}
(parent is Item that holds all elements of a dialog), but this doesn't work.
If I'm understanding your question correctly, it should suffice to set the MouseArea's propagateComposedEvents to false.
I want to paint controls directly into TextEdit. It is easy, but the problem is i need to have space for them, so they are not painted over the text.
For example (the whole line is representing what will be shown in TextEdit and the highlighted code should be qml component):
Here is button: button and here is text again.
I need somehow to reserve space for the button between Here is button: and and here is text again.
It looks like Qt qml doesn't provide any way how to specify font metrics (in that case i could ask the component what it's width is and just add
one whitespace char with properly setup font and its metrics and than
specify component coordinates so it is painted exactly where the space is).
I did it in Java SWT, because SWT StyledText allows to setup metrics for each character. So this is example how it should look.
You can use HTML markup in TextEdit
TextEdit {
textFormat: TextEdit.RichText
text: "<font size=50>text</font>"
}
I am using gwt 2.4. And I am not using uibinder.
I have a button which has a background image. when I place mouse on this button it should display a text saying "submit" . The kind of text which says what the button does.
Button is a UIObject and so you can use setTitle method on a Button to set the tooltip.
Or if you want to do something else on mouse over. Just make use of the mouse handlers.
Read Button documentation for more details.
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
I have an iOS6 iPhone application, with a Tabbar and tabbar buttons. These buttons need icons and that's where the trouble starts. Added one icon to the project, double clicked on a button in the designer and associated the (questionmark) icon via the image combobox to the button. When I run the app on my iPhone, I do indeed see that the button now does indeed display a gradient-gray square, which turns into a gradient light-blue square, but the questionmark icon is not shown. The icon is a .png and the size is width 40, height 51. I changed nothing in the code.
I solved my problem to the extent that I can work with it: you need so called 'transparent icons'.