I am looking for a way to show a text hint stating the expected input as advice for the user. Take the Google search bar for example:
Is there a property I am missing, or is this something that has to be achieved through scripting?
The property doesn't exist on the Qt Quick input items. You can vote for the feature here.
In the meantime, you can use TextArea from Qt Quick Controls 2.
If you would rather use pure Qt Quick, you can do something similar to what the Controls do and add a Text item above the field:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
width: 300
height: 300
visible: true
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text
}
}
}
This is kinda old but I found another necessity for Android builds.
Since Android only send the text editing signal after you press ok in virtual keyboard, the placeholder remains there. So to avoid it, I recommend:
TextEdit {
id: textEdit
width: 200
height: 50
property string placeholderText: "Enter text here..."
Text {
text: textEdit.placeholderText
color: "#aaa"
visible: !textEdit.text && !textEdit.activeFocus // <----------- ;-)
}
}
If you want one line input then why not use TextField ?
Related
i am trying to create a TextField and when the TextField is appeared i want it to become editible even without clicking the Text area. It appears but without clicking on placeholder text which is text area, it is not becoming active. Here is what i tried
import QtQuick 2.12
import QtQuick.Controls 2.0
Item {
TextField {
id: textFieldTest
placeholderText: "This area should appear as clicked"
anchors.centerIn: parent
focus: true
Component.onCompleted: textFieldTest.forceActiveFocus()
}
}
I've also tried to use
focus: true
and
Component.onCompleted: textFieldTest.forceActiveFocus()
seperately. Also together. But both of them did not work. Which function or feature should i use?
Sometimes, you need to delay it, e.g.
Component.onCompleted: Qt.callLater(textFieldTest.forceActiveFocus)
The reason being, is that other components initializing may also want to change focus. So, you want to delay your request for focus so that "last in wins".
Please share your entire code if possible. It seems some thing else is stealing the focus. In my case this is working:
import QtQuick
import QtQuick.Controls
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
TextField {
id: textFieldTest
placeholderText: "This area should appear as clicked"
anchors.centerIn: parent
focus: true
Component.onCompleted: textFieldTest.forceActiveFocus()
}
}
How can I set the font size of a TextField element in QML? wanna change size of the placeholderText and also for the text which the user enters.
I tried with a lot of ways without luck!
TextField {
id: name_TextField; horizontalAlignment: Text.AlignHCenter;
Layout.preferredWidth: parentCLayer.width * 0.90; Layout.preferredHeight: 50
style: TextFieldStyle {
font.pixelSize: 20 // This doesn't seem to work either
}
placeholderText: qsTr("Your name here")
}
You can use the style property to customize your TextField. For example:
TextField {
style: TextFieldStyle {
font.pixelSize: 14
}
}
I tried it and it works like a charm
Using the font member of TextField
The TextField type itself has a member font which contains an instance of the QML basic type font. It's sufficient to change the values of the inner-members of the font member of TextField to make the changes you want to see. Note that the color is provided by the TextField itself, not the font type.
TextField {
font.pointSize: 20
font.bold: true
font.family: "Times New Roman"
textColor: "red"
}
Default Style
Custom Style
Using the style member of TextField
If you want to do more in-depth styling of the TextField you can attach a TextFieldStyle to the style member of the TextField. The TextFieldStyle instance also has a font member, though in the IDE it will complain that font has no members if you reference them with dot notation, this may be bug QTCREATORBUG-11186. I believe the proper way to assign values is using group notation by referencing the font property with inner-items as such:
TextField {
style: TextFieldStyle {
background: Rectangle {
color: "red"
radius: 10
}
font {
bold: true
pointSize: 22
}
textColor: "white"
}
}
It could be that bug #11186 is a genuine bug, or maybe by design the font property is TextFieldStyle is null; someone with better Qt/QML knowledge could provide a clearer answer as to that part of the question.
This guide on styling may help: http://wiki.qt.io/Qml_Styling
Is there a way in cascades to get font size for a given text and fixed width?
I was trying with:
TextField{
autoFit: TextAutoFit.FitToBounds
}
But the text always appear left align. The requirement is to center align text with variable font size label render in fixed rect.
If you want just to center align text, you'd need to use textStyle.textAlign property like that:
textStyle.textAlign: TextAlign.Center
In order to center align text with variable font size label render in fixed rect, you basically need to specify the desired width and height of that rectangle for a Label use textStyle.textAlign property mentioned above and choose the font size via respective textStyle.fontSize Label property. Text aligning will be done by Cascades automatically (of course, if your text couldn't be fit in specified width/height it'd be cut off):
import bb.cascades 1.0
Page {
Container {
layout: DockLayout {}
horizontalAlignment: HorizontalAlignment.Fill
verticalAlignment: VerticalAlignment.Fill
Label {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
maxWidth: 300
minWidth: maxWidth
maxHeight: 100
minHeight: maxHeight
multiline: true
text: "Some very very very very very long text here"
textStyle.textAlign: TextAlign.Center
textStyle.fontSize: FontSize.XLarge
}
}
}
I'd recommend this approach for achieving the goal set.
However, if you really want to get absolute values of font being used in a widget, use textStyle.fontSize property for this (TextStyle official documentation).
There are no font metrics in BB10 Cascades at the moment so you won't be able to find out if the font does not fit in the label and resize it.
You can use sort of hack with layoutUpdateHandler to get some rough resizing, but I wouldn't recommend it. If the text changes frequently you will see flickering, but if it's only set once then it might be okay. Change the text set in "onCreationCompleted" to see if the text resizes for you.
Container {
id: root
implicitLayoutAnimationsEnabled: false
background: Color.Cyan
property int width: 500
property string text: ""
property double textSize: 20
layout: DockLayout {
}
attachedObjects: [
LayoutUpdateHandler {
onLayoutFrameChanged: {
if (layoutFrame.width > root.width) {
root.textSize = root.textSize - 1
}
}
}
]
Label {
implicitLayoutAnimationsEnabled: false
maxWidth: root.width
text: root.text
textStyle {
fontSize: FontSize.PointValue
fontSizeValue: root.textSize
}
}
Label {
implicitLayoutAnimationsEnabled: false
text: root.text
opacity: 0
textStyle {
fontSize: FontSize.PointValue
fontSizeValue: root.textSize
}
}
onCreationCompleted: {
root.text = "Hello World AAAAAAAA"
}
}
I am using JSON to receive data and place it into List. There is a Label displaying the text that I am receiving from the JSON. In some of the cases there is a Link in the text. By default you can't click on the Link from the label. Is there a way to make the Link to be clickable?
Label {
text: "Click here to open browser and get redirected to www.stackoverflow.com";
}
The output is "Click here to open browser and get redirected to www.stackoverflow.com" but the Link to StackOverflow is not clickable.
Use TextArea instead of Label and set property editable to false, it would look same as Label.
Don't forget to set inputMode to either Text or Chat.
TextArea {
text: "http://www.google.com"
editable: false
inputMode: TextAreaInputMode.Text
}
You can actually use HTML in the label itself to style the text as a link, according to the Text Styles documentation. You need to be aware of a few quirks though if you are going to apply any of your own styles, as discussed on the Blackberry Developer support forums here. The example below should work, using the default style which will colour the link blue, with bold and underline:
Label {
text: "<html>Click here to open browser and get redirected to <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a></html>"
}
Note: you may need to set multiline: true on the Label in order to see all of the text, depending on your layout.
You should assign Text.RichText value to "textFormat" property of the Label:
import QtQuick 1.1
Rectangle {
width: 360
height: 360
Text {
text: "Click here"
anchors.centerIn: parent
textFormat: Text.RichText
onLinkActivated: {
Qt.openUrlExternally(link)
}
}
}
I have created a UI in widget and added a edittext control and a pushButton control to it. In the QML file I have a TextInput control. I am able to display the Widget controls in the QML. Now I want to set the EditText control text in the QML to the text in the edittext control that is there inside the widget when the pushButton of the Widget is clicked. On button click I want to send the text from the editText to QML TextInput.
How is it possible.
I used the following to register and use the Widget in the QML.
main.cpp file --->
qmlRegisterType<WidgetContainer>("MyWidget", 1, 0, "MyWidget");
QML file contents:
import QtQuick 1.1
import MyWidget 1.0
Rectangle {
width: 360
height: 360
color: "gray"
TextInput {
id: textInput1
x: 10
y: 10
width: 100
height: 100
color: "black"
cursorVisible: true
text: widget.getText()
}
MyWidget {
id: widget
x:10;
y:70
width: 180;
height: 150
text: "Widget text"
}
}
Class WidgetContainer should emit signal when button is clicked. Then you will be able to write the clicked handled which you need in QML.
By default button (or any other member of WidgetContainer class) is not available in QML code. So you can't use button's clicked signal in QML directly.
You need to declare e.g. buttonClicked signal inWidgetContainer class. Then you need to connect WidgetContainer's buttonClicked signal to button's clicked signal.
Now you can use buttonClicked signal in QML:
TextInput {
id: textInput1
text: widget.getText()
}
MyWidget {
id: widget
text: "Widget text"
onButtonClicked: textInput1.text = text
}