Send text from Qt textEdit control to QML TextInput control using Qt/QML - qml

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
}

Related

how to set TextField automatically editible without clicking Textfield on qtquick2

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()
}
}

QML file in application cannot detect touch but only works with mouse clicks

I've been looking everywhere online but cannot find a working solution. When the application is used on a Desktop computer or laptop, it works fine. Mouse clicks are working, it's when we try with a device with a touch screen like surface pro, that's when problems appear.
I have tried adding to the cpp file that calls the QQuickwidget the flag responsible for detecting touch events and it works with some buttons but other widgets or items are not responding.
AppName *AppName::createInstance(QWidget *parent)
{
instanceUsageCounter++;
if (instance == nullptr)
{
ui = new Ui::AppName();
instance = new AppName();
ui->setupUi(parent);
ui->dc_stackWidget->setCurrentIndex(0);
ui->widget_qml->setAttribute(Qt::WA_AcceptTouchEvents);
QCoreApplication::setAttribute(Qt::AA_SynthesizeMouseForUnhandledTouchEvents);
}
return instance;
}
Comboboxes for example.
What exactly needs to be added to make the app detect both mouse clicks and touch events and wokr properly? What exactly is missing?
This is a part in my QML code that worked when I added a TapHandler:
RoundButton
{
id: playButton
icon.source: "qrc:/Resourese/Images/Utility/play.png"
icon.color: "white"
icon.height: playButton.height*0.5
icon.width: playButton.width*0.5
width: settingsButton.width
height: width
radius: width/2
x: width + settingsButton.x + parent.width*0.015
y: settingsButton.y
// x: settingsButton.x
// y: height + settingsButton.y + parent.height*0.015
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: playButtonClicked();
}
onClicked:
{
playButtonClicked();
}
background: Rectangle
{
//border.color: "#14191D"
color: playButton.hovered || playButton.pressed ? "#3a5470":"#5f758d"
width: playButton.width
height: width
radius: width/2
}
}
Here you will see that there is an onClick and above it is the* TapHandler* that was added recently to add the ability for the boutton to be triggerd when touched on a touch screen. This only worked when the flag in the cpp file was added.
Now look at this:
Rectangle
{
id: settingsCell_R7_C3
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 3
Layout.rowSpan: 1
Layout.row: 6
Layout.column: 0
color: "transparent"
Button
{
text: "Save settings"
font.pixelSize: 30
width: parent.width*0.8
height: parent.height*0.7
anchors.centerIn: settingsCell_R7_C3
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: applySettings()
}
onClicked: applySettings()
}
}
This Rectangle is within a gridlayout that is inside a Pop up when a Round button similar to the above gets clicked it triggers the pop up window that contains the Rectangle above. The button in this Rectangle when touched is within focus, but not triggered.

Qml button fix size

I have made list whose delegate is RowLayout consist of Button. The list takes data from cpp.
My problem is the button variable width. The button side changed based on data. I want to keep fix button side and wrap text
To give your Button a fixed width, just set the property with the same name to a fixed value.
The Button has a contentItem that is a Text. You can change the wrapMode there to Text.WordWrap
As the contentItem is of type Item you can't set the wrapMode like this:
Button {
width: 100
text: 'Very very long button description.'
contentItem.wrapMode: Text.WordWrap // Won't work
}
Instead you might use Component.onCompleted like this:
Button {
width: 100
text: 'Very very long button description.'
Component.onCompleted: contentItem.wrapMode = Text.WordWrap
}

Placeholder text in QML TextEdit

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 ?

Resize rectangle with Text

I want to create a custom drop-down box with text inside. The problem is, when I resize my Rectangle to fold it the Text stays on screen.
Rectangle {
id: dropdown
height: 200
width: 200
color: "red"
Behavior on height {
NumberAnimation {
duration: 1000;
easing.type: Easing.InQuad
}
}
Text {
id: text
anchors.left: parent.left
anchors.top: parent.top
text: "foobar"
}
}
How to solve this?
Ok. I have it thanks to jbache.
I need to put clip:true inside dropdown. According to the documentation of clip:
This property holds whether clipping is enabled. The default clip value is false.
If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.
Hence, by setting the property to true, I can ensure that also the child Text will be correctly hidden on drop-down dismiss.