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
}
Related
I am working with qml, I want to apply a like feature on my application so I want to replace a black image with the red image, when i click on the black image.
Image {
id: like_img
source: "image/oneImage.png"
height: 18
width: 20
Layout.alignment: Qt.AlignHCenter
MouseArea{
id:mousearea
anchors.fill: parent
onClicked: {
like_img.source="images/anotherImage.png"
}
}
}
But the problem is When i again clicking on orange image I want the previous black image back.
By the looks of it, you are going to connect this to a backend, which actually should drive the favorite property, but for the time-being you can start with this:
Image {
id: like_img
source: favorite ? "image/oneImage.png" : "images/anotherImage.png"
height: 18
width: 20
Layout.alignment: Qt.AlignHCenter
property bool favorite : false
MouseArea{
id: mousearea
anchors.fill: parent
onClicked: {
like_img.favorite = !like_img.favorite
}
}
}
Check the onclicked function contains desired image link or not like red image link.
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.
I'm using a TextArea to display multi-line text with embedded <IMG ...> tags in the delegate for a ListView. I have it set to read-only (and not disabled) because I need hyperlinks in the text to be clickable so I need to make use of its onLinkActivated event handler. This is normally something that would call for a Label (which does not handle mouse wheel events), but a Label does not render line-breaks correctly when the text includes <IMG ...> tags in the HTML.
The problem I'm having is that a TextArea handles mouse wheel events even when it is read-only, so if the cursor happens to be over one of the visible TextArea controls, the ListView will not respond to mouse wheel events (and so it does not scroll). In other words, the TextArea is capturing the mouse wheel events and I want it to not do this.
I see in the docs that controls have a wheelEnabled: property, but TextArea does not seem to support this.
Update: here is a minimum code sample that demonstrates the problem:
import QtQuick.Controls 1.4 as Controls
Rectangle {
id: test
color: "white"
width: 300
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
Controls.ScrollView {
id: _scrollview
anchors.fill: parent
ListView {
anchors.fill: parent
model: 100
delegate: Rectangle {
id: tableRow
width: test.width
height: 50
color: "yellow"
TextArea {
width: test.width / 2
height: tableRow.height
readOnly: true
text: "Row # " + index
}
}
}
}
}
If you hold the mouse cursor over the right side of this listview (i.e. not over the TextArea control in the row), the mouse wheel works as expected. But if you hold the mouse cursor over the TextArea in any of the rows, the ListView will not scroll with the mouse wheel (because the readOnly TextView is capturing the events).
This is actually pretty easy, too bad I wasted the bounty. All this requires is a MouseArea positioned over the TextArea like so:
MouseArea {
anchors.fill: txtTester
onPressed: {
mouse.accepted = false
}
onReleased: {
mouse.accepted = false
}
property int scrollValue: 15
onWheel: {
if (wheel.angleDelta.y < 0) {
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYEnd)
_scrollview.flickableItem.contentY += scrollValue
}
else {
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYBeginning)
_scrollview.flickableItem.contentY -= scrollValue
}
}
}
This ignores press and release events so clicking on hyperlinks in the TextArea still works, but it intercepts mouse wheel events and applies them to moving the ScrollView as if the TextArea were not there.
Try this out:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
visible: true
width: 400
height: 200
TextArea {
id: text
anchors.fill: parent
text: "Current\ntext\n\\to\nmove\ndown\ndown\ndown
\ndown\ndown\ndown\ndown\ndown\ndown\ndown"
flickableItem.interactive: false
}
}
TextArea has flickableItem.enabled property. Since you're stuck with !t 5.6 this should work for you.
EDIT: changed to flickableItem.interactive instead.
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
}
}
The QT documentation has this tutorial.
I initially followed it exactly, and it works. I then made two modifications:
I replaced the ListView with a GridView (that works without #2).
I attempted to add a ToolButton to my delegate inside the Rectangle "content" like so:
Rectangle {
id: content
ToolButton {
id: toolButton
icon.color = "transparent"
icon.source = "image://Loader/iconName"
}
Drag.active: dragArea.held
Drag.source: dragArea
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
}
This does not work, the ToolButton appears to be processing the mouse movements and not propagating the messages (I can click the button, but I can not drag it)? This is actually somewhat expected to be honest.
So that said, does anyone have a good way of dragging ToolButtons around? Or is it just accepted that you can't do that? I have tried various combinations of Rectangles and MouseAreas but I can't seem to do one without breaking the other (ie either the drag fails or the button fails).
You can move the MouseArea as a child of the ToolButton to manage the drag with pressAndHold, and propagate the click to keep the button behavior:
Rectangle {
id: content
ToolButton {
id: toolButton
// bind the visual state of the button to the MouseArea
background: Rectangle {
color: marea.pressed
? Qt.darker("blue")
: marea.containsMouse
? Qt.lighter("blue")
: "blue" // use your desired colors
}
MouseArea {
id: marea
property bool held: false
drag.target: held ? content : undefined
drag.axis: Drag.YAxis
anchors.fill: parent
hoverEnabled: true
onPressAndHold: held = true
onReleased: held = false
onClicked: toolButton.clicked() // propagate clicked event to the ToolButton
}
}
// ...
}