These days its fairly common that your UI designer walks up to you and asks to include web-style links in your desktop app.
Thanks to the fact that Qt Quick Text element supports HTML, you can say-
Text {
anchors.centerIn: parent
text: "To learn about KDE, <a href='http://www.kde.org'>click here</a>"
}
which results in-
Notice how nothing happens when you click on the link? This is because Qt Quick doesn’t open a browser by default, but lets you decide what to do by emitting the linkActivated signal which you can handle-
Text {
anchors.centerIn: parent
text: "To learn about KDE, <a href='http://www.kde.org'>click here</a>"
onLinkActivated: Qt.openUrlExternally(link)
}
The link works now, but there’s another problem: you don’t see a hand cursor when hovering over the link. This is going to cause quite some confusion for your user. To fix this, use the following-
Text {
anchors.centerIn: parent
text: "To learn about KDE, <a href='http://www.kde.org'>click here</a>"
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
}
}
Presto! You get a link with the correct hand cursor in Qt Quick.
Nice one man, that saved me some dev time, really appreciated.
LikeLike
Nice one, that saved me some dev time. Much appreciated.
LikeLike
Thanks a lot – been looking for this and it works perfect!
LikeLike
Nice, thanks! 🙂
LikeLike