I am using some QML controls like GroupBox and CheckBox which have text associated with them. The default color of the text is black. However, I have these items on a dark background and would prefer using white for the text color. These items don't have a color property so I'm not sure what to do.
CheckBox {
text: "Check Me"
}
I had the same problem with GroupBox so I wanted to post an answer for future reference.
The problem can easily be fixed using HTML formatting. For instance to change the color:
GroupBox{
title: "<font color=\"white\">my title</font>"
}
Size and other formatting parameters can be changed the same way.
Have you tried setting it as an entire sub-element of the checkbox?
CheckBox {
Text {
text: "Check Me"
color: "red"
}
}
You need to use the style property to redefine the Component to use for the label based on the CheckBoxStyle
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
Rectangle {
color: "black"
CheckBox {
style: CheckBoxStyle {
label: Text {
color: "white"
text: "check Me"
}
}
}
}
When using CheckBoxStyle you might have to redefine the whole component and not just the label property.
Related
The following Qml code gives the following output (expected):
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The following code (using contentItem) produces a different output:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
contentItem: Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The Qt documentation is not very clear, at least for me. The question is what does the property contentItem do? When it should be used?
Short answer: The contentItem is meant for customizing the control and replaces the existing implementation of the visual foreground element by your text.
Long answer:
A Quick Item has a so called "default property" - the data property. By definition, if you add an item as child of another item, it is instead assigned to the default property. Which means the following example:
Item {
Text { text: "test1"}
}
Is actually identical to:
Item {
data: [
Text { text: "test2"}
]
}
If you know look at your example, in the first variant, you simply append a child item to the root button. Since no further information is given, it is placed at the coordinates (0,0) within it's parent.
The contentItem property however is defined in the documentation as follows:
This property holds the visual content item.
In case of a Button it is an internally used Label to display the text property of the button. It exists to modify the appereance of the button.
In your second example, you "customize" the button by replacing the internal label with your custom Text - but without any code to properly position or fill the item. The correct way to declare a content item can be found in the customization guide:
Button {
id: control
text: qsTr("Button")
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
// ...
}
You could either define it as part of a custom style, or create a MyButton.qml where do exactly this and can then use MyButton in other QML files, giving you a custom styled button whilest keeping the API intact (like beeing able to set the text via the text property etc.)
I hope this was sufficient enough to help you understand how it works.
I am trying to design a login form with a material design on Qt which should look something like this:
However I can't figure out how to add colour to the button in QML and change the font colour of the button text. This is what I have got so far:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Item {
property alias login: login
Pane {
id: pane
x: 144
y: 117
width: 353
height: 246
clip: false
font.strikeout: false
background: Rectangle {
color: "#ffffff"
}
ColumnLayout {
id: columnLayout
x: 139
y: -158
anchors.fill: parent
TextField {
id: username
Layout.fillWidth: true
placeholderText: qsTr("Username")
}
TextField {
id: password
Layout.fillWidth: true
placeholderText: qsTr("Password")
}
Button {
id: login
text: qsTr("Login")
spacing: -2
font.capitalization: Font.MixedCase
Layout.fillWidth: true
highlighted: false
// background: Rectangle {
// implicitWidth: 100
// implicitHeight: 40
// color: button.down ? "#d6d6d6" : "#f6f6f6"
// border.color: "#26282a"
// border.width: 1
// radius: 4
// }
}
}
}
}
As you can see (in the commented code) I tried to add colour using Rectangle with the background property but this removes the button features like shadow, highlight, darken on click and so on. Is there a simple way to accomplish this?
For reference here is the output of my code:
In order to theme a Material controls, you have to use the Material attached properties
In your case you want to use Material.background :
import QtQuick.Controls.Material 2.2
// ...
Button {
id: login
text: qsTr("Login")
Layout.fillWidth: true
Material.background: Material.Indigo
Material.foreground: "white"
}
Note that buttons should have upercased text, according to the material guidelines.
If you want to have a design that complies with the Google Materials design guidelines, the easiest way, is to use
QtQuick.Controls.Materials
To use them, it is sufficent to use any of the methods described here to activate them in your application. To try it out, I'd reccomend the command line argument. Just start your application with
-style material
If you want to have it fixed in your code, put it in the main.cpp:
QQuickStyle::setStyle("Material");
Note that the -style options is the very same option defined here for widgets and desktop os styles. Despite this quick styles and widget styles are totally different things and you cannot apply the former to the latter and vice versa. Widget
If now you already use the Material-style, but are not contempt with it and desire to change some of the definitions for selected controls, you can import
import QtQuick.Controls.Materials 2.x
where you need to adapt x to the most recent version installed. 0 is the right one for Qt5.7
Then you can alter specific aspects like
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
ApplicationWindow {
id: mainWindow
width: 800
height: 600
visible: true
Button {
id: login
text: qsTr("LOGIN")
Material.background: Material.Orange // Change the background
}
}
If you don't want to use the Material and only want to change a specific color of the Control you need to understand why it is not that easy to do, without messing it up.
I tried to add colour using Rectangle with the background property but this removes the button features like shadow, highlight, darken on click and so on. Is there a simple way to accomplish this?
You can't just change the color of the background, as there is not the color. There are various colors that are applied for different states. The expression might look like this:
color: (control.down ? 'darkgrey' : 'lightgrey')
So if you change the color to orange like this:
color: 'orange'
you messed up, as now the other state is not considered anymore.
Additionally, of course, you can't change the color of the background like background.color: 'green' from the beginning, as QML does not know about the property background.color. It expects an Item there, which has no color and the Rectangle is only created later. So what you need to do is
Be cautious to not override states
Wait until the property is available
example.qml
Button {
id: login
text: qsTr("LOGIN")
Binding {
target: login
property: "background.color"
value: 'red'
when: !login.pressed // Here comes the state
}
}
You can simply highlight a Button to make the button colorize its background in a style-independent way. The Material style fills the background with the accent color and makes the text light:
Button {
text: qsTr("Login")
highlighted: true
}
A highlighted Button is by far more efficient than a customized button. Customization should be done only if necessary. It is just a visual highlight. There can be multiple highlighted buttons. Highlighting a Button does not affect focus.
I want to partially change the style of a control without affecting it's rendering otherwise. Let's take a button as an example and create a MyButton.qml containing:
Button {
id: mybutton
style: ButtonStyle {
label: Text {
renderType: Text.NativeRendering
font.family: "Helvetica"
font.pointSize: 20
text: control.text
}
}
}
Expected: a system theme colored button with an ugly font in it.
Got: default-styled button ignoring the system palette (while the rest of the application is themed fine)
Why does the overriding style ignore the system palette? What is the right way to do it?
EDIT:
Example:
I would like to customize style of my application and I'm stuck on the style of TextField pop-up menu.
TextField.style allows to customize the look of TextField but it doesn't contain the style of the menu. According to documentation there is a property menu containing the Menu so I tried something like this:
TextField {
menu.style: MenuStyle {
//...
}
}
Code above complains that property style is non-existent so it's not exactly Menu, it's Component used to create the menu and I don't know if there is a way to get through it to the actual Menu. Documentation only mentions that TextField.menu can be set to null to disable it completely and doesn't provide other use cases.
So is there a way to get to the menu of TextField and change its style?
Well, you should post all relevant code here. Anyway, you cannot define the TextField menu and its style separately. See the example below to customize Menu style and adding it to the TextField inline:
TextField {
text: "text here"
anchors.centerIn: parent
menu: Menu {
style: MenuStyle {
frame: Rectangle {
color: "green"
border.color: "purple"
}
itemDelegate {
background: Rectangle {
color: "yellow"
}
label: Text {
color: styleData.selected ? "red" : "blue"
text: styleData.text
}
}
}
MenuItem { text: "Cut" }
MenuItem { text: "Copy" }
}
}
See this page for complete list of MenuStyle properties.
I want to have a widget in QML which has combination of the following behaviors:
1) Multi line edit
2) Auto scroll the content as and when I hit newline. (The content on top of the page keeps going up as and when I enter new content at the bottom)
3) Have a placeholder text functionality.
As far as I know, only Text and TextField are having placeholder text property and only TextArea is having a multi line edit plus auto scroll. But If there is any such widget with all the combinations then, my question “Dynamically swap the visibility/opacity between overlapping Text and TextArea “ would be invalid.
In case there is no such widget (I wonder why), I am thinking to have a rectangle which has both Text and TextArea overlapping and based on the below logic I want to have the visibility/opacity/focus on one of them:
If the Text Area is empty (0 characters), then have the Text in the foreground with focus and with the placeholder text “Enter some text”. But as soon as the user starts typing, the Text should lose the focus, opacity and go to background and the TextArea should gain the focus and come to the foreground and start accepting multi line input. Similarly, when TextArea is in the foreground and is empty (0 characters) and when the user click on any other widget outside my Rectangle, the Text should again gain the focus, come to the foreground and display the placeholder again.
I tried to get inspiration from this code, but failed miserably, it would be helpful if anyone can help me with a few lines of code or give me some pointers on how to solve this.
You can implement placeholderText for TextArea the same way Qt does in TextField. The source can be found here: TextField.qml
When you remove all the comments and properties, you basically have a background and on top of that a MouseArea, the placeholderText Text and a TextInput. Since you need to have the placeholder visually below the TextArea, you must have a transparent background:
PlaceholderTextArea.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
Rectangle {
property alias placeholderText: placeholder.text
id: background
width: 640
height: 480
color: "#c0c0c0"
Text {
id: placeholder
anchors.fill: parent
renderType: Text.NativeRendering
opacity: !textArea.text.length && !textArea.activeFocus ? 1 : 0
}
TextArea {
id: textArea
anchors.fill: parent
backgroundVisible: false
}
}
and use your component:
PlaceholderTextArea {
placeholderText: qsTr("Hello World")
anchors.fill: parent
}
Here's an alternative implementation, that works a bit better for me:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item
{
property alias placeholderText: placeholder.text
property bool __shouldShowPlaceholderText:
!textArea.text.length && !textArea.activeFocus
// This only exists to get at the default TextFieldStyle.placeholderTextColor
// ...maybe there is a better way?
TextField
{
visible: false
style: TextFieldStyle
{
Component.onCompleted: placeholder.textColor = placeholderTextColor
}
}
TextArea
{
id: placeholder
anchors.fill: parent
visible: __shouldShowPlaceholderText
activeFocusOnTab: false
}
TextArea
{
id: textArea
anchors.fill: parent
backgroundVisible: !__shouldShowPlaceholderText
}
}