Text type has this nice feature fontSizeMode, which tries to fit the font size to the actual size of the visual component. So that when I set the font size to 20 and I resize the window so this font size is too big, it automatically lowers the font size.
Text {
text: qsTr("Text")
font.pointSize: 20
fontSizeMode: Text.Fit
}
Now I wanted to use this functionality with the TextInput type, but there is no fontSizeMode available. So my question is, how can I achieve the same functionality with TextInput? Now, when the font size is set and I downsize the window, the string in the TextInput is cut in half like this:
You can scale the element down to constrain it to a specific width:
Rectangle {
width: 100
height: 50
color: "red"
TextInput {
anchors.centerIn: parent
font.pointSize: 20
text: "test"
scale: Math.min(1, parent.width / contentWidth)
Rectangle {
color: "white"
anchors.fill: parent
z: -1
}
}
}
I sticked with this solution. Bind the font.pixelSize property to the parent height. Although I'm not sure if it is 100% correct, it does exactly what I want. If there is some problem about it, please make me know.
Text {
text: qsTr("Text")
font.pixelSize: 0.1 * parent.height
}
Related
The following code to create a rounded TextField
TextField {
id: usernameTextField
placeholderText: qsTr("username")
width: 250
height: 40
anchors {
top: parent.top
topMargin: giveDetailsLabel.anchors.topMargin + 36
horizontalCenter: parent.horizontalCenter
horizontalCenterOffset: 0
}
background: Rectangle {
radius: 20
border.color: "#C9C9C9"
border.width: 1
}
verticalAlignment: TextField.AlignVCenter
font.pixelSize: 16
font.weight: Font.Normal
font.family: "Open Sans"
leftPadding: 10
}
The problem with the following code, the text is not in the center it's shifted up for some reason and I try many different ways like anchors the background rectangle to fit the parent and it not work, using verticalAlignment: TextField.AlignVCenter not work properly
another question is I have the same exact text field but I used echoMode: TextField.Password to make the password, the password dots are so big, I try to decrease the font but the text also decrease before it converts to dot, so how to decrease the dot only without decrease the text size so user see what they are writing in big font before the character converts, here how it looks on Android
and also again the text shifted up and for dots for character and never center inside the text.
using QT 6.2
I am posting because I want a text the be wrap into a rectangle (if the text is too long, it will be cut and the end of it won't be display)
For now I tried with :
Rectangle {
id: form
property alias px: form.x
property alias py: form.y
property alias pheight: form.height
property alias pwidth: form.width
property ItemControl itemControl
color: itemControl.backgroundColor
border.width: 1
border.color: itemControl.color
radius: 1
Text {
id: text_field
height: parent.height
width: parent.width
anchors.centerIn: parent
text:itemControl.text
color: itemControl.color
font.pixelSize: 16
font.family: robotoMono.name
font.bold: false
wrapMode: text_field.WordWrap
maximumLineCount: 1
}
}
But I don't have the expected result. The text is still continuing after the end of the rectangle. Does anyone knows how to compel the text into the rectangle ?
You used Text.WordWrap but the text only contains one word (the . and underscores aren't treated as word separators). Text.Wrap and Text.WrapAnywhere may be more appropriate in this case. Moreover, maximumLineCount: 1 will limit Text to only show one line.
Consider making the font smaller, the rectangle larger, or redesign the UI for this bit.
In following listview's items, length of text can be different (10, or 1000 characters), so I want make each list view item height fit text height.
(Like css height: auto).
Component {
id: sysNotificationsDelegate
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: childrenRect.height
color: "#eee"
Text {
text: model.body // <-- TEXT SIZE CAN BE DIFFERENT
wrapMode: Text.WordWrap
}
}
}
ListView {
anchors.fill: parent
spacing: 10
model: ListModel {
id: listModel
}
delegate: sysNotificationsDelegate
}
What is proper and most performant way to achieve this? (taking into account that I will have a lot of such elements and I've read that property bindings in qml have some additional performance cost)
(Qt 5.10)
For a Text to be able to wrap (or elide), it needs to have a width set, otherwise it will expand with no limit.
Text has 3 important width properties:
width: consider it the max width of a line of your text, it should always be set unless you don't want to limit the width of your screen (you can scroll or pan horizontally). Setting wrapMode or elide with no width will have no effect.
implicitWidth: the width the text would need to occupy to fit in a single line. Includes the left and right padding. Does not depend on the explicit width. Not sure when to use it ¯\_(ツ)_/¯ any ideas in the comments?
contentWidth: the width the text is actually occupying taking in account the wrapping and eliding. Does not include the left and right padding. Depends on the explicit width. Use this to query the width of your text, like when you want to draw a box around some text (a chat bubble for example).
The same corresponding properties exist for height too. maximumLineCount can limit the height of a text in addition to an explicit height
That means that in your case you want to do:
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
height: text.contentHeight // contentHeight, height and implicitHeight are all the same here since there's no padding, no maximumLineCount and height isn't explicitely set
color: "#eee"
Text {
id: text
text: model.body // <-- TEXT SIZE CAN BE DIFFERENT
width: parent.width // remember, width = max width for Text
wrapMode: Text.WordWrap
}
}
I'd like to create my own styled RadioButton, but I'm having difficulty controlling the size of the components used in the RadioButtonStyle that I am using. I want to put my RadioButton in a GridLayout and have the RadioButton take up all the available space (as if I were setting Layout.fillWidth and Layout.fillHeight to true)
To start off with, I am using the RadioButtonStyle code from the Qt docs inside a GridLayout:
GridLayout {
columns: 3
anchors.fill: parent
RadioButton {
text: "Radio Button"
style: RadioButtonStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
}
}
}
}
}
we can see that implicitWidth and implicitHeight of the indicator Rectangle are set int literals. I want to size the indicator Rectangle to fill the space provided by the layout.
I would like the width and height of the indicator Rectangle to track the width and height of the RadioButton, which in turn tracks the width and height of the GridLayout cell containing it.
== UPDATE ==
I have tried the following - setting Layout.maximumHeight/Width prevents Qml going into some kind of infinite loop
RadioButton {
id: rdbt
Layout.fillHeight: true
Layout.fillWidth: true
Layout.maximumWidth: 200
Layout.maximumHeight: 200
style: RadioButtonStyle {
id: ab
indicator: Rectangle {
color: "blue"
height: control.height
width: control.width //control.width
a pretty simple scenario, actually:
Text {
text: "Hover me!"
font.family: "Arial"
font.pointSize: 16
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
parent.color = "#ffffff"
}
onExited: {
parent.color = "#000000"
}
}
}
As you can see, all i want is that the text color changes when i hover it. However, it works only when i'm holding down my left mouse button. Since i'm pretty new to Qt, i've no idea where the problem could be. I googled all day to find an answer, but everything leads me to the "set hoverEnabled: true" solution, which i'm already using.
I'm working on windows with Qt 2.4.1 including VPlay (doesn't think that VPlay matters here)
From your snippet, it looks like you're not assigning the Text element a size (either explicitly or via anchoring), so it has a width/height of (0,0), which means it will never contain the mouse cursor. Note that in QtQuick, the size of items is not defined by their contents or where they paint (an item can paint anywhere outside of its (position, size) rectangle). An item without explicit width/height attributes or anchoring will have a size of (0,0), no matter how it appears on screen.
In the following example, the mouse area has a size of 360, 360 inherited from its parent rectangle (via anchors.fill: parent):
import QtQuick 2.0
Rectangle {
width: 360
height: 360
color: "black"
Text {
anchors.centerIn: parent
text: qsTr("Hello World")
color: mouseArea.containsMouse ? "red" : "white"
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
}
}
I preferred the declarative approach using a property binding with containsMouse here, but onEntered/onExited would work as well.