I have a checkbox in Qt that I want to change its style from the one in the picture below:
to the one in the picture below:
What I've tried so far is:
QCheckBox::indicator::checked
{
background-color: rgb(24, 144, 255);
indicator: white;
}
result:
the check inside checkbox disappears
You are on the right track. You can either use an image or a font like Font Awesome to be loaded. For example, the QML example below uses the checkmark unicode as the text property. You can use a FontLoader to load the font or see if you have a system font that has a checkmark.
FontLoader {
id: fontAwesome
source: "qrc:<path>/fontawesome.otf"
}
CheckDelegate {
contentItem: Label {
...
}
background: Rectangle {
...
color: "white"
}
indicator: Rectangle {
...
Text {
text: checked ? "\uf00c" : ""
font.family: fontAwesome.name // Setup from FontLoader
}
}
}
Related
Is it possible to use CSS properties in QML Text or QML Label element? I am interested in text-decoration: overline and I want to mix overlined characteres with plain characters. I know I can put separate Text element for every character and use font.overline: true, but this is impractical solution.
Hence, how to write out "*a b *c *d" in such a way that a, c, and d are overlined instead of being prefixed with asterisk.
By the way, it is simple with underline, just use <u> and </u>, but this does not help me.
Do you mean CSS inline in the text? Then yes. If you mean applying CSS to QML elements (as if they were HTML), then no (which I find ironic :).
Example adapted from the Qt Text demo:
import QtQuick 2.3
Pane {
id: root
width: 480
height: 320
Rectangle {
anchors.fill: parent;
color: "#272822"
}
Column {
spacing: 20
Text {
anchors.fill: parent;
text: '<font color="white">I am the <b>very</b> model of' +
'<p>a <span style="text-decoration: overline">modern</span> ' +
'<i>major general</i>!</p></font>'
font.pointSize: 14
textFormat: Text.RichText
}
}
}
I specifically needed to set textFormat: Text.RichText, with Text.StyledText the overline didn't work.
In addition to using CSS inline with style="..." attributes of HTML elements, it is also possible in QML Text objects to use CSS classes. Maxim's example would then look like this:
import QtQuick 2.3
Pane {
id: root
width: 480
height: 320
Rectangle {
anchors.fill: parent;
color: "#272822"
}
Column {
spacing: 20
Text {
anchors.fill: parent;
text: '
<html>
<head><style>
p.white { color: white; }
.overline { text-decoration: overline; }
</style></head>
<body>
<p class="white">I am the very model of a
<span class="overline">modern</span> major general!
</p>
</body>
</html>
'
font.pointSize: 14
textFormat: Text.RichText
}
}
}
Tested with Qt 5.12.
Using Qt Quick Controls 1, is there a way to change the color of the text of a RadioButton in QML?
I want to change it to white, because my background is black and can't find a way to do it.
RowLayout {
RadioButton {
width:15
height:15
text: "xlsx"
checked: true
}
RadioButton {
width:15
height:15
text: "Bottom"
}
}
For Qt Quick Controls 2, you should create your own RadioButton component with a custom contentItem:
RadioButton {
id: control
width: 15
height: 15
text: "xlsx"
contentItem: Text {
text: control.text
color: "white"
leftPadding: control.indicator.width + control.spacing
verticalAlignment: Text.AlignVCenter
}
}
See the full example in the doc: Customizing RadioButton.
For Qt Quick Controls 1 see #Roya Ghasemzadeh answer.
You need to define a style for your radioButton. for example for the second radioButton you can have:
RadioButton
{
width:15
height:15
style: RadioButtonStyle
{
label: Text
{
color: "white";
text: "Bottom"
}
}
}
Try this:
radioButton->setStyleSheet("QRadioButton{ background-color : black; color : white; }");
I trying to change the background of a TreeView to a gradient color, but i don´t find anything to do that.
In TreeViewStyle the only property relate to background is: "backgroundColor", but receive only the type color.
So, is it possible to set the background to gradient?
Demo:
TreeView {
id: tree
TableViewColumn {
title: "Name"
role: "fileName"
width: 300
}
TableViewColumn {
title: "Permissions"
role: "filePermissions"
width: 100
}
model: FolderListModel {}
Component {
id: gradient
LinearGradient {
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
}
}
rowDelegate: Item { } // make rows transparent to show the background
Component.onCompleted: {
// the sibling of listView is the background(Rectangle) of TreeView
var bg = tree.__listView.parent.children[1]
// set the gradient effect to the background
gradient.createObject(bg, {'anchors.fill': bg})
}
}
I am trying to make transparent text in qml.
I have a customized button:
ApplicationWindow {
visible: true
width: 320
height:240
style: ApplicationWindowStyle {
background: Image { // paste any url here
source: "https://t4.ftcdn.net/jpg/01/05/18/57/240_F_105185755_w384KDBvemK5Mn4oXzrWbCz9SRvHuDIh.jpg"
}
}
Button
{
anchors.centerIn: parent
style: ButtonStyle
{
padding
{
left: 16
right: 16
top: 8
bottom: 8
}
background:
Rectangle
{
antialiasing: true
color: control.pressed ? "#d1d1d1" : control.hovered ? "#666" : "transparent"
border.color: "white"
radius: height/2
border.width: 1
}
label:
Text
{
text: "buttonText"
color: control.pressed ? "white" : control.hovered ? "#00000000" : "white"
}
}
}
}
All I want is to have transparent text in button in hovered state. Text should have the color of background. Example:
upd. I need this to work without shaders on slow pc.
One option would be to use a custom QQuickPaintedItem and use a QPainterPath to draw the "text shaped hole".
Basically like this
void MyItem::paint(QPainter *painter)
{
QPainterPath path;
path.addRect(0, 0, width(), height());
path.addText(textX, textY, font, yourText);
painter->setBrush(yourBackgroundColor);
painter->setPen(Qt::transparent);
painter->drawPath(path);
}
The position, i.e. textX and textY, would have to be calculated manually I am afraid, though QFontMetrics::boundingRect() should help there.
Below is my Qml code:
Button {
id: newMenu
anchors {
top: topMenu.top
topMargin: 15
left: topMenu.left
leftMargin: 16
}
text: "New"
iconSource: "../images/New.png"
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true //this line will enable mouseArea.containsMouse
onClicked: {
newProjectFileDlg.visible = true
}
onEntered: {
console.log(tt1);
}
}
style: ButtonStyle {
id: buttonStyle
background: Rectangle {
id: tt1
implicitWidth: 100
implicitHeight: 25
border.width: 0
radius: 4
color: mousearea.entered ? "lightsteelblue" : "#2e2e2e"
}
}
I want to access this button's style property, change the background.color when mouse is hover. But the console.log outpu is always
qrc:/qmls/menu.qml:40: ReferenceError: tt1 is not defined
How to get the element using JavaScript? Or do we have other approach to change background color when mouse is entered.
Answering to your question, you should define public property like:
Button {
id: root
property color backgroundColor: pressed ? 'skyblue'
: mousearea.entered ? "lightsteelblue"
: "#2e2e2e"
...
MouseArea { id: mousearea; ... }
style: ButtonStyle {
background: Rectanlge { color: root.backgroundColor; ... }
}
}
and then use is property to override default implementation.
But,
You are trying to use styles in a completely wrong way. Style is a visual representation of Control's state and should't be changed manually in run-time. So, a proper way is to bind control properties to style (e.g. using property control).
style: ButtonStyle {
background: Rectangle {
color: control.hovered ? 'lightsteelblue'
: 'skyblue'
}
}
You can achieve something similar without using styles by nesting a rectangle inside the button and then using the onHoveredChanged property to modify the opacity. An example is below. I did it this way to avoid conflicting with the normal button style's hover effect.
Button {
text: "Push me"
Rectangle{
id: myRectId
anchors.fill: parent
anchors.margins: 1
color: "green"
opacity : .2
}
onHoveredChanged: hovered ? myRectId.opacity = 0 : myRectId.opacity = .2;
}
This ends up looking like this: