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
}
}
}
Related
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)
}
}
}
Quick Controls 2, Qt 5.10.
I created table control based on ListView item.
One of its columns is displayed using this component:
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
Item
{
id: root
implicitHeight: item1.implicitHeight
ColumnLayout
{
id: item1
visible: !model.finished
width: parent.width
RowLayout
{
Label
{
text: "38%"
Layout.alignment: Qt.AlignLeft
}
Label
{
text: "Paused"
Layout.alignment: Qt.AlignRight
}
}
ProgressBar
{
from: 0; to: 100; value: 40
// Variant A
/*Layout.preferredWidth: 30
Layout.preferredHeight: 10*/
// Variant B
width: 30
height: 10
}
}
}
Can somebody please explain me why Variant B does not "work". I may specify any width/height values or even just remove them - no effect. Variant A (Layout.preferredWidth/Layout.preferredHeight) works fine.
Variant A:
Variant B:
The ...Layout items alter the dimensions of their children. That is their purpose, and the behavior is documented.
As per documentation of the ColumnLayout Layout.preferredWidth the behavior is:
This property holds the preferred width of an item in a layout. If the preferred width is -1 it will be ignored, and the layout will use implicitWidth instead. The default is -1.
Since the default is -1, it will take the implicitWidth - it is not written "and use width instead".
If you don't want to use Layout don't use Layout. You can just take Column instead.
I'm running into some strange QML behavior. Basically, I have a TabBar header with several tabs running across it. I'd like the background element to be mostly the same for each of them, but some of them I want to be able to dynamically change the color of. So I have a component:
Component {
id: standardBackground
Rectangle {
opacity: parent.parent.checked ? 0 : (parent.parent.pressed ? 0.8 : 1)
color: tabColor
}
}
And for each TabButton, I'm doing:
TabButton {
text: qsTr("Tab 1")
background: Loader { sourceComponent: standardBackground }
height: 60
}
This works perfectly, but I'm running into some really strange errors. First off, running it this way gives me the following QML warning:
QML TabButton: Binding loop detected for property "implicitWidth"
So I figured I could fix this by adding: width: parent.width to the Rectangle in my component. This does silence the warning, but for some reason, it makes it so that the first tab will always be transparent regardless of whether or not it's clicked. This only affects the first tab. I have no clue why this would happen.
However, when I set width: <anything>, then this fixes both problems: No warnings and correct transparency. Playing around with different settings for the width causes no noticeable changes, as long as it's positive. So I have it set to 1. If I set it to 0, I get the same "implicit width" warnings.
So a couple different questions:
Why does the transparency of the component break when I set width: parent.width?
Why can I set width to any constant value without it affecting the GUI at all?
Is there a better way of silencing the warning about implicit width?
Here is my full code (simplified to less tabs):
import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import Qt.labs.settings 1.0
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Settings 2.1
import "DataEntry"
ApplicationWindow {
id: window
width: 1280
height: 1024
visible: true
title: "Hello World"
property var tabColor: "#353637"
property var dummy: InputContext.focus
Settings {
id: settings
property string style: "Universal"
}
Component {
id: standardBackground
Rectangle {
opacity: parent.parent.checked ? 0 : (parent.parent.pressed ? 0.8 : 1)
color: tabColor
width: 1
}
}
header: TabBar {
id: bar
width: parent.width
height: 60
TabButton {
text: qsTr("Tab 1")
background: Loader { sourceComponent: standardBackground }
height: 60
}
TabButton {
text: qsTr("Tab 2")
background: Loader {
sourceComponent: standardBackground
function getTabColor(error){
if (error)
return '#cccc00'
return window.tabColor
}
property var tabColor: getTabColor(hasError)
}
height: 60
}
}
StackLayout {
id: viewStack
width: parent.width
anchors.fill: parent
currentIndex: bar.currentIndex
tab1 {
}
tab2 {
}
}
}
As we are on SO I tend to answer only one question. For you, I choos the question for the binding loop.
The reason for that binding loop is documented here.
You do not specify a size for the Loader so the implicit width of the Loader is set to the width specified by the loaded Item. Here you set the size to be the same as the Loader's size. Now this would not be a problem, and the result would just be 0
Now we stir in the Button which also has an implicitSize set to its styling items. Here the Loader is instantiated widht width 0 and then resized to fill the implicitWidth of the Button which is (without a sized background) depending on the text and the paddings.
And now we update the round. So, the implicitWidth of the Rectangle is depending on the width of the Loader whose implicitWidth is depending on the Rectangles width. Further the Loaders width is depending on the Buttons width, which is depending on its implicitWidth and which is in turn depending on its childrenRect.width...
A binding loop is easily detected even if there are no direct problems, as the system is stabilizing in the first iteration.
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.