I have an abstract in Text item and I need to emit the signal when I click on some phrase in this text:
Text {
id: textFirst
Layout.fillWidth: true
width: parent.width
text: qsTr("Some long part of text and I need to emit signal by clicking on THIS")
font.pointSize: 14
wrapMode: Text.Wrap
}
So, the signal should be emitted when I click on "THIS". The window, where this Text located on is resizable, so I can't calculate the location of "THIS" beforehand. So, does it possible to do it?
PS I found that it possible to add hyperlinks, but emitting signals is a bit different
Thanks for your help!
Put the Text into Rich Text mode and use a hyperlink like this:
Text {
id: textFirst
Layout.fillWidth: true
textFormat: Text.RichText
text: qsTr("Some long part of text and I need to emit signal by clicking on <a href='app://goto_this'>THIS</a>")
font.pointSize: 14
wrapMode: Text.Wrap
onLinkActivated: {
console.log("link", link);
}
}
Use MouseArea
Text {
id: textFirst
Layout.fillWidth: true
width: parent.width
text: qsTr("Some long part of text and I need to emit signal by clicking on THIS")
font.pointSize: 14
wrapMode: Text.Wrap
MouseArea {
anchors.fill: parent
onClicked: SIGNAL()
}
}
But figure out how you can stop sending signal for other text.
Suggestion: Use HTML to display you text and have THIS as hyperlink. And in mousearea use acceptedButtons: Qt.NoButton to skip click on text but does call onClicked when clicked on hyperlink.
Related
I am trying to pass log data to my QML front end, one line at a time, and have it append to the end of a TextArea. I've considered several approaches. The following is the most promising. I have created a QAbstractListModel (in Python) and pass this model into a repeater where it arrives as a single item (rowCount =1) which I append to the TextArea using the line
text: terminal_text.text + display
This works but I get this warning everytime the text is updated.
file://.../TextArea.qml:728:9: QML QQuickTextEdit*: Binding loop detected for property "text"
See below for the code of the repeater.
Repeater {
model: TerminalFeed { }
delegate: TextArea {
id: terminal_text
font.family: "Courier"
width: parent.width
height: parent.height
readOnly: true
selectByMouse: true
wrapMode: TextEdit.NoWrap
horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded
verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
text: terminal_text.text + display
}
}
How can I stop this happening? Alternatively does anyone have a better way of achieving the same result?
Technically, that is indeed a binding loop because text is dependent on its own value. If QML didn't detect it and break it, an infinite loop of updating would result.
Instead of using a binding, you can do something like this:
Repeater {
model: TerminalFeed { }
delegate: TextArea {
id: terminal_text
font.family: "Courier"
width: parent.width
height: parent.height
readOnly: true
selectByMouse: true
wrapMode: TextEdit.NoWrap
horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded
verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
onDisplayChanged: {
text = text + display;
}
}
}
With the original binding approach, it will try and update whenever either display or text changes. With this approach, it will only try and update whenever display changes – which is what you really want.
I had a similar problem where I wanted to show logged data in a QML window.
I use the insert() method, which is inherited from QML TextField. The insertion position is the length of the TextArea.
TextArea {
id: outputTextArea
}
Component.onCompleted: {
data = "dummyString"
outputTextArea.insert(outputTextArea.length, data)
}
I want to create a custom dialog in qml without the ok button.
this is my code :
Dialog {
id: DialogId
title: appName
}
when the dialog is opened there is an Ok button.
I'm using QtQuick.Dialogs 1.2
The property standardButtons controls wich buttons are in your dialog.
The default value is StandardButton.Ok
If you don't whant any button you need to re-implement contentItem
For instance:
contentItem: Rectangle {
color: "lightskyblue"
implicitWidth: 400
implicitHeight: 100
Text {
text: "Hello blue sky!"
color: "navy"
anchors.centerIn: parent
}
}
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
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
In my QML Text element I want to have a hyperlink to a website and managed to do so with it looking like one etc. but when I click or touch it nothing happens, the link is supposed to open in a the default browser.
Text {
id: link_Text
text: '<html><style type="text/css"></style>google</html>'
}
Any idea what I'm doing wrong?
Ok I just found that I have to add this:
onLinkActivated: Qt.openUrlExternally(link)
I did not originally consider something like this because I thought if the string was correctly formatted it would open the link on its own.
If you also want to change the cursor on Hover, you can do this combination:
Text {
id: link_Text
text: '<html><style type="text/css"></style>google</html>'
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.NoButton // Don't eat the mouse clicks
cursorShape: Qt.PointingHandCursor
}
}
I was faced with a task of imitating a hyperlink: When a user hovers on it, the text should look like a hyperlink. But when a user clicks on the link, a customer handler should be called instead of opening URL. Maybe this will be useful for someone.
Text{
id: hyperlinkButtonText
text: "Hyperlink button"
color: application.primaryColor
font.pixelSize: 12
font.bold:true
MouseArea{
id: mouseHyperlinkArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// to do something on clicking the link
}
}
}
Rectangle{ /*Here is an underline item for the text above*/
visible: mouseHyperlinkArea.containsMouse
anchors.top:hyperlinkButtonText.bottom
anchors.topMargin: -1
width:hyperlinkButtonText.width
height: 0.5
color: application.primaryColor
}