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
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´m new to Qt and want to have some Buttons (made in a seperate .qml file with Rectangle...) in a GridLayout. Unfortunately it seems like it doesn´t positions the Buttons to different cells. Everything is in the first row/column. Is there a variable for the ID necessary, like an array? Or QML dynamic objects?
Here the Button:
Item {
property string textOnButton: "Test"
property int w: 130
property int h: 100
Rectangle{
id: emptyRectangle
width: parent.w
height: parent.h
Text {
text: parent.parent.textOnButton + parent.index
anchors.horizontalCenter: parent.parent.horizontalCenter
topPadding: 6
font.pixelSize: 30
}
}
}
And here the GridLayout where the Item should be placed in a few times:
GridLayout{
id:grid1
rows: 3
Layout.margins: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
columnSpacing: 10
rowSpacing: 10
EmptyButton{
id: eins
textOnButton: "HELP"
}
EmptyButton{
id: zwei
textOnButton: "HELP"
}
}
Later I want to use different colors/text on the button and switching different lights for instance.
Thanks for any help!!
You need to set the width and height of the GridLayout and all of the other items
GridLayout{
width: 500
height: 500
id:grid1
rows: 3
Layout.margins: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
columnSpacing: 10
rowSpacing: 10
EmptyButton{
id: eins
textOnButton: "HELP"
}
EmptyButton{
id: zwei
textOnButton: "HELP"
}
}
I am trying to create a button like control in QML which displays an image and also some text under it. My current attempt stands as follows:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.fill: parent
source: "qrc:/images/test.png"
}
Text {
id: buttontext
font.bold: true
text: "Test"
}
}
This has a lot of problems unfortunately. So, at the moment, I am specifying the width and height of the item but this should be calculated based on the width and height of the image and the text. Also, the text is shown at the top and inside the image where I would like to position the text under the image, centered with image horizontally with some margins.
You must use anchors in the Image and in the Text. Example:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: buttontext.top
source: "qrc:/images/test.png"
}
Text {
id: buttontext
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
font.bold: true
text: "Test"
}
}
Since QtQuick.Controls 2.3 (Qt 5.10), display property was introduced:
This property determines how the icon and text are displayed within the button.
For your case it's AbstractButton.TextUnderIcon
Something I have done in the past as a workaround for this,
create a Rectangle{……} which holds all the 'Button' items, (Text/Image Ect),
It may not be the prettiest way but there is a few variations
Create the 'Image' and 'text' externally (photoshop whatever you choose) then fill your Rectangle with the content, then also set a MouseArea { onClicked {……}} event to that,
Make a Column/Grid/Row within the Rectangle and position your items using that method
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
}
}