I've been having trouble with different OSs (tried Windows 7 and Ubuntu 13.10) having different font widths and heights. I tried setting pixelSize and pointSize and both results in different sizes in both Arial and Courier font texts (Windows fonts are generally bigger).
Here is an example:
Rectangle {
width: 312
height: 44
Text {
id: text_1
text: qsTr("1234567890123456789012345678901234567890")
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_2
text: qsTr("123456789012345678901234567890")
anchors.top: text_1.bottom
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_3
text: qsTr("12345678901234567890123456789012345")
anchors.top: text_2.bottom
anchors.left: parent.left
anchors.right: parent.right
font.family: "Courier"
font.pointSize: 10
}
}
This rectangle's width and height are defined by trial and error to fit the 3 text's in Ubuntu. See screenshots below:
In my application, I'd like one text object (with Courier font) to fill it's parent's width (text is fixed). In another rectangle, I'd like the text objects (more than one, anchored just like in the example above, with Arial font) to fill the parent's height.
Currently, I'm looking for a way to set the parent's width and height dynamically, calculated from the fixed text content, but I can't shake the feeling there's got to be a simpler way to do this.
Any tips are appreciated.
Choosing a parent height/width in this case in a bad idea - as you can see, it's not portable; and what if you decided to change your font later, would you want to recalculate everything? This is something you want to delegate to QML.
I suggest using Layouts, like this :
import QtQuick.Layouts 1.1 // Necessary to use ColumnLayout
ColumnLayout { // A Single Column
Text {
id: text_1
text: qsTr("1234567890123456789012345678901234567890")
// No need for anchoring ! You may want to use Layout.fillWidth: true in some cases
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_2
text: qsTr("123456789012345678901234567890")
font.family: "Courier"
font.pointSize: 10
}
Text {
id: text_3
text: qsTr("12345678901234567890123456789012345")
font.family: "Courier"
font.pointSize: 10
}
}
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.
I am trying to apply some styles to a new qt 5.7 application I am working on and the following is not working at all. It gives the error:
qrc:/SignInView.qml:67 Cannot assign to non-existent property "style"
And I can't edit it in design mode for the same reasons.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
Page {
id: page1
ColumnLayout {
id: columnLayout1
height: 100
anchors.right: parent.right
anchors.left: parent.left
anchors.top: parent.top
Label {
text: qsTr("Label")
font.pointSize: 16
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
}
Image {
id: image1
width: 200
height: 200
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent
source: "qrc:/qtquickplugin/images/template_image.png"
Button {
id: button1
text: qsTr("Button")
anchors.bottomMargin: 10
anchors.rightMargin: 10
anchors.bottom: parent.bottom
anchors.right: parent.right
}
}
Rectangle {
id: field1
width: 200
height: 40
color: "#ffffff"
Layout.fillWidth: true
Label {
id: label1
text: qsTr("Full Name")
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
}
TextField {
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
}
}
}
}
}
}
I have being trying to follow this example:
http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html
It fails at the style attribute in the Qt Creator giving the error that style doesn't exist.
I assume it's something with my libraries not loading or maybe the environment I have setup.
I don't have style in buttons or anywhere else either. I assumed if I had the imports it would work but it's not.
A related issue on SO is here: QML - How to change TextField font size
But here it seems to just work.
In Qt Quick Controls 2, there is no such property as TextField::style. In general, there is no way to use the style objects from Qt Quick Controls 1 with Qt Quick Controls 2. The APIs between the two major versions of Qt Quick Controls are not compatible. See the following documentation pages for more details:
Differences between Qt Quick Controls
Styling Qt Quick Controls 2
Customizing Qt Quick Controls 2
A new API-incompatible major version was introduced, because there is basically no way to make the heavily Loader-based architecture of Qt Quick Controls 1 perform reasonably well. Therefore all that dynamic loading of Components was ditched in Qt Quick Controls 2. The delegates that used to be dynamically instantiated from Components provided by a dynamically loaded style object are now part of the control instead, instantiated "in place". In essence:
TextField {
style: TextFieldStyle {
textColor: "white"
background: Rectangle { color: "black" }
}
}
vs.
TextField {
color: "white"
background: Rectangle { color: "black" }
}
You can read more about the history here. In particular, this post highlights the fundamental structural changes in Qt Quick Controls 2.
i am making customized controls in the qt using the qml
tried with the previous versions of qt expect 5.11 it is working , i don't know what i need to change can any one please help
Rectangle{
width: parent.width - 30
height: 25
anchors.leftMargin: 15
anchors.left: parent.left
color: "transparent"
visible: (!auto_start)
RowLayout{
anchors.fill: parent
Text{
text: "Frame Rate:"
anchors.leftMargin: 10
anchors.left: parent.left
font.pointSize: 13
font.family: fontFamily.name
}
Text{
id: framesValueLabel
text: "0 fps"
font.bold: true
anchors.right: parent.right
anchors.rightMargin: 10
font.pointSize: 13
font.family: fontFamily.name
}
}
}
with previous versions it is working fine now the qt5.11 it is working but showing lot of warning errors in the console
You should not combine the anchors with the Layouts since they both fulfill similar tasks that is positioning items.
As the warning indicates:
Detected anchors on an item that is managed by a layout. This is undefined behavior; use Layout.alignment instead.
Maybe in previous versions Qt was not so smart to detect these possible errors so I did not point you out.
So the solution is to use Layout.alignment, Layout.leftMargin and Layout.rightMargin:
Rectangle{
width: parent.width - 30
height: 25
anchors.leftMargin: 15
anchors.left: parent.left
color: "blue"
visible: (!auto_start)
RowLayout{
anchors.fill: parent
Text{
text: "Frame Rate:"
Layout.leftMargin: 10
Layout.alignment : Qt.AlignLeft
font.pointSize: 13
font.family: fontFamily.name
}
Text{
id: framesValueLabel
text: "0 fps"
font.bold: true
Layout.alignment : Qt.AlignRight
Layout.rightMargin: 10
font.pointSize: 13
font.family: fontFamily.name
}
}
}
I am developing a Qt program using QML in which a user has to enter a variable-sized input (up to 50 chars). Since the program window is not big enough I cannot accommodate a 50 char-wide input rectangle. I would like the input box ("inputNameField" below) to act as a mask over the text so that the characters that are out of the input box are not visible. Here is my base code:
Rectangle
{
id: inputNameBox
onVisibleChanged: if (visible) textNameInput.forceActiveFocus()
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: 'grey'
radius: 5
height: parent.height/8
width: parent.width/4
TextInput
{
id: textNameInput
autoScroll: true
anchors.margins: inputNameBox.radius
anchors.fill: inputNameBox
font.pixelSize: inputNameBox.height/2
maximumLength: 50
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
}
}
I have tried using the inputNameField as an OpacityMask over the textNameInput to no avail.
EDIT: duplicate of Custom TextEdit, how to hide TextInput when it goes wide