I'm writing a reusable font property, as described here and here.
Here's my property
property font button2: Qt.font({
family: defaultFont.name,
styleName: "Bold",
pointSize: 16
})
and here it how I use it, and it works fine
Text {
text: "button"
font: MyFont.button2
}
Now I would add the capitalization but adding it to the property like this
property font button2: Qt.font({
family: defaultFont.name,
styleName: "Bold",
capitalization: "AllUppercase",
pointSize: 16
})
It does not have effect at all. If I add it in the text component instead
Text {
text: "button"
font: MyFont.button2
font.capitalization: Font.AllUppercase
}
it gives me a "Property has already been assigned a value" error.
How should I do that?
If you want to change the capitalization then you must use it in Component.onCompleted:
Text {
text: "button"
font: MyFont.button2
// font.capitalization: Font.AllUppercase
Component.onCompleted: font.capitalization = Font.AllUppercase
}
Related
I have two Text items in qml and I want to set font of first text to the font of second text. How can I do that?
e.g
Text{
id:t1
//some code
//anchors ..etc
}
Text{
//set font = t1.font or something similar
}
You are almost there, you need to use colon : to assign the property:
Text {
id: txt1
font.bold: true
text: "Hello"
}
Text {
id: txt2
font: txt1.font
text: "World"
}
I would like to use font awesome font in my QML app. But it doesn't work very well.
First I use this method : https://github.com/QMLCommunity/font-awesome-qml
But I got only two icons working, see the capture of my app.
Only the laptop and battery icons are displayed. The others (one top left, and others on each tab) got kanjis or other symbols.
After I also tried that solution : How to use Font Awesome in QML
on the top left icon, whithout success.
Here the code of the notification bar :
RowLayout {
anchors.fill: parent
Label {
font.pointSize: 10
font.family: "fa-solid-900"
text: "\uf071" + " Message"
}
Item {
Layout.fillWidth: true
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_laptop : "x"
Layout.alignment: Qt.AlignRight
}
Label {
font.pointSize: 10
font.family: awesome.family
text: awesome.loaded ? awesome.icons.fa_battery_full + " 100 %" : "x"
Layout.alignment: Qt.AlignRight
}
}
PS: I used the 2nd link solution for the first icon, but the result is exactly the same with the first solution.
And the tab bar:
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
Material.theme: Material.Dark
FontAwesome {
id: awesome
resource: "qrc:///controls/fa-solid-900.ttf"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_star : "x") + " " + "Général"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_cogs : "x") + " " + "Test"
}
TabButton {
font.pointSize: 10
font.family: awesome.family
text: (awesome.loaded ? awesome.icons.fa_trophy : "x") + " " + "Match"
}
}
How can I display the right icons each time?
Thanks in advance!
I recently ran into the same issues and documented my approach in a blog post.
Basically, my issue was that starting with version 5, Font Awesome provides some of the icons in one font file with "regular" weight and one in a file with "solid" weight classes. However, when loading, both will register with a font name of "Font Awesome 5 Free" (assuming the free version is used).
I would have expected that it is possible to switch between the regular and solid icon sets by setting e.g. the bold property of a font in QML:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: "Font Awesome 5 Free"
font.bold: true // use "solid" variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: "Font Awesome 5 Free"
font.bold: false // use "regular" variant
text: "\uf073" // fa-calendar-alt
}
}
}
Unfortunately, this did not work for me, as Qt merges both fonts and only either the regular or the solid variant was used (which causes some icons from not being rendered at all, especially if you use the regular variant which contains much less icons at least in the free version of the font).
My "solution" was to edit the solid font file (e.g. using FontForge) and change the font name to e.g. "Font Awesome 5 Free Solid". With this, I was able to load both variants of the font at the same time and switch between the two by using their font name like this:
import QtQuick 2.0
Item {
width: 100
height: 100
FontLoader {
id: faRegular
source: "./fa-regular-400.ttf"
}
FontLoader {
id: faSolid
source: "./fa-solid-900.ttf"
}
Column {
width: parent.width
Text {
font.family: faSolid.name // use solid variant
text: "\uf073" // fa-calendar-alt
}
Text {
font.family: faRegular.name // use regular variant
text: "\uf073" // fa-calendar-alt
}
}
}
This is probably due to font merging when some characters cannot be resolved. You can try to load FontAwesome from C++ side
Loading the font with a QFontDatabase
int fontId = QFontDatabase::addApplicationFont(QStringLiteral("/path/to/font-awesome.ttf");
Disabling merging on a new font
QFont font("fa-solid-900"); // You can also use the fontId to get family name here
font.setStyleStrategy(QFont::NoFontMerging);
Exposing the font to QML with a QFont Q_PROPERTY or directly in the context
Q_PROPERTY(QFont fontAwesome READ fontAwesome CONSTANT)
This is discussed in the Qt mailing list here
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 know which fonts I can use in a QML environment for the font.family property. Are these fonts system-specific or are they built into the framework? Is there any way to list all available fonts?
This code will list all the accepted font families:
ListView {
anchors.fill: parent;
model: Qt.fontFamilies()
delegate: Item {
height: 40;
width: ListView.view.width
Text {
anchors.centerIn: parent
text: modelData;
}
}
}
The fonts are system-specific so you should see what your system proposes.
If you are using QtCreator :
try putting your mouse over the end of your component name
Text <here> {
...
}
You should see a yellow light, click on it and you'll have an interface that allows to choose the font.
You can also access the interface with ctrl + alt + space while inside the component. Or with right click.
This is a system-specific list of fonts, but you can specify external font from resources (QRC)
You can improve the previous answer by adding this
Text {
font.family: modelData
anchors.centerIn: parent
text: modelData;
}
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.