This is my development environment.
Qt version: 5.9.4
Windows: Widows 10
Linux: Ubuntu 18.04
I have a requirement of setting the font size to 20.25. QML font.pixelSize takes an integer value, where as font.pointSize accepts real. So I decided to use font.pointSize. But using font.pointSize is showing some strange behavior.
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
Window {
visible: true
width: 800
height: 480
title: qsTr("Hello World")
Column {
spacing: 20
Rectangle {
height: 100
width: 200
Text {
text: "Sample Text with font.pixelSize = 20"
font {
pixelSize: 20
}
}
}
Rectangle {
height: 100
width: 200
Text {
text: "Sample Text with font.pointSize = 20"
font {
pointSize: 20
}
}
}
}
}
With above code I am getting following output.
For me pixelSize is appearing correct according the value set. But pointSize is appearing very big.
on windows:
on Linux:
Note: in the above example, I intentionally used pointSize and pixelSize both to 20 to demonstrate the difference for same value. My requirement is anyway to use font size as 20.25.
Please let me know, if I am doing anything wrong here.
Related
new bee here. I am trying something very simple and it is not working and I cannot figure out why.
I am on windows and according to to the documentation, I can easily re-size an image using "fillMode: Image.PreserveAspectFit"
https://doc.qt.io/qt-6/qml-qtquick-image.html
Here is the QML code
import QtQuick
Image {
id: buttonId
width: 60
height: 100
source: "large1.png"
fillMode: Image.PreserveAspectFit
}
This is getting included from a parent QML as such:
RowLayout
{
anchors.centerIn: parent
spacing: spacerWidth
MyImage {
}
}
The source image is 334x484 px
but here is what I get when I render the page:
my window is set to 480x272
Window {
width: 480
height: 272
visible: true
title: qsTr("Test")
What such a simple scaling is not working?
thank you.
With the user "SMR" help, it scaled properly as below:
Image {
id: buttonId
fillMode: Image.PreserveAspectFit
Layout.preferredWidth: 60
Layout.preferredHeight: 100
when applying property bindings in QML I have encountered one problem. When we have a parent component (Window) and a child (Rectangle), which has some properties bind to parent's (width, height, or anchors.fill: parent), when I change parents properties in JS code, and if I want to read the values of the child's properties (that are bound to parent's) in the same JS code, it shows the old values (not updated). It looks like that the change of parents properties hasn't been propagated to child's. Here is the example of this problem:
Window {
id:myWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:customRec
width:parent.width
height: parent.height
color: "blue"
}
Button{
id:myBtn
onClicked: {
myWindow.width = 800
myWindow.height = 600
console.log(customRec.width)
console.log(customRec.height)
}
}}
After clicking on the button, it shows:
qml: 640
qml: 480
instead of 800 and 600, new values. Although the rectangle has been scaled well. After clicking again it will show updated values (800 and 600). Can someone please explain what is happening here and how can binding property change be propagated immediately to bound properties. I am using Qt 5.12.2 with msvc2017_64 compiler.
You are printing the properties before they got updated. With the below code you can find that onWidthChanged signal comes after the console log. onWidthChanged signal comes after updating the width.
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.2
Window {
id:myWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:customRec
width: parent.width
height: parent.height
color: "blue"
onWidthChanged: console.log("***********")
}
Button{
id:myBtn
width: 100
height: 100
onClicked: {
myWindow.width = myWindow.width +50
myWindow.height = myWindow.height +50
console.log("--------------------------")
console.log("window width" + myWindow.width)
console.log("window height" + myWindow.height)
console.log("customrect width" + customRec.width)
console.log("customrect height" + customRec.height)
}
}
}
Doing my first steps in QML, so this might be obvious...
When using a TextInput with a simple validator (say an IntValidator), is there a way to know the maximum width that TextInput field will take?
As an example, if I create a IntValidator for a number from 0 to 999, I would like to find the width required to display that 999 (or whichever will be the widest, based on the font etc...).
I am trying to wrap that textinput into an item which will have a fixed size, just the right size for the worst case input, nothing less, nothing more?
Thanks.
Use TextMetrics:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextMetrics {
id: textMetrics
font: textField.font
text: "999"
}
TextField {
id: textField
width: textMetrics.width + leftPadding + rightPadding
validator: IntValidator {
bottom: 0
top: 999
}
}
}
I am trying to create a Slider in QML. The slider's maximumValue property can change depending on certain states in my application. When the maximumValue property changes I would like to "reset" my slider so that its value property is at the maximumValue. The problem what I am encountering is that when I change the maximumValue property, my value property changes to the right property, but visually it stays at the previous maximumValue property until I don't click on the handle for example.
Here is a simple dummy code, which reproduces this issue:
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int maxVal: 1
Item {
width: 20
height: 200
Slider {
anchors.fill: parent
orientation: Qt.Vertical
maximumValue: maxVal
minimumValue: 0
value: 1
stepSize: 1.0
style: SliderStyle {
groove: Rectangle {
width: control.height
height: control.width
color: "red"
}
handle: Rectangle {
width: 20
height: 20
color: "green"
Text {
anchors.centerIn: parent
text: control.value
}
}
}
onMaximumValueChanged: value = maximumValue
}
}
Button {
anchors.right: parent.right
text: "Press Me"
onClicked: maxVal = 100
}
}
Below you can see some screenshots of certain stages.
When the application opens:
When I press the "Press Me" button, which sets the maximumValue to 100 from 1. As you can see the value did change from 1 to 100, but visually it stayed at the 1 position:
Finally when I click on the handler of the slider (green rectangle), then it updates and switches value to 1 from 100.
Here is the same thing as a gif:
Anybody encountered this issue before?
It looks like QTBUG-63354, which will be fixed in Qt 5.9.3.
I have ListView with my own delegate.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ItemDelegate
{
height: 40
Row
{
spacing: 10
anchors.verticalCenter: parent.verticalCenter
CheckBox
{
}
}
}
The problem is that check boxes does not resize despite ItemDelegate's height.
I get this for height = 40:
I get this for height = 10:
I've tried playing with CheckBox'es width and height values - did not help.
Is it possible to make it smaller at all, without customizing it?
You can, in theory, increase the size of the indicator, but it won't increase the size of the checkmark image:
CheckBox {
text: "CheckBox"
anchors.centerIn: parent
checked: true
indicator.width: 64
indicator.height: 64
}
There are a couple of reasons why the image is not scaled. First of all, the checkmark would be blurry if it was upscaled. And more importantly, to retain best possible performance. Instead of calculating all the sizes relative to each other and that way creating huge amounts of bindings like Qt Quick Controls 1 did, Qt Quick Controls 2 bases its scalability instead on the automatic high-DPI scaling system introduced in Qt 5.6. You get simply a different #Nx image when running with scale factor N.
I'm afraid you need to customize your checkbox to get a different size.
Example:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component {
id: contactDelegate
ItemDelegate
{
id: item
width: 40
height: 40
CheckBox
{
id: control
text: name
indicator: Rectangle {
implicitWidth: item.width
implicitHeight: item.height
x: control.leftPadding
y: parent.height / 2 - height / 2
border.color: control.down ? "#dark" : "#grey"
Rectangle {
width: 25
height: 25
x: 7
y: 7
color: control.down ? "#dark" : "#grey"
visible: control.checked
}
}
}
}
}
ListView {
width: 180;
height: 200;
spacing: 10
model: ContactModel {}
delegate: contactDelegate
}
}
By the way, the spacing property should be set in your ListView, not the delegate. Otherwise, it has no effect.