QML Text element hyperlink

Asked 21/9, 2012 at 18:45 Answered 22/10, 2021 at 10:32

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><a href="http://google.com">google</a></html>'
}

Any idea what I'm doing wrong?

Moise answered 21/9, 2012 at 18:45 Comment(2)

I do not know what you are doing wrong, but if everything else fails, create a QML component in c++ that calls system("xdg-open google.com"). This will work on desktop linux distros. I am not sure about symbian. include stdlib for system(). – Procurable 21/9, 2012 at 18:53

I spent hours debugging why my link doesn't work. It turns out the click area is always left-aligned, so if you use horizontalAlignment: Text.AlignHCenter then the blue underlined text and the actual link are at different positions. – Alumina 12/10, 2021 at 9:48

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.

Moise answered 21/9, 2012 at 18:57 Comment(2)

If there are multiple anchor tags in a single text block how can we distinguish between them? Using ID's somehow? Edit: whoops, we can just look at the passed in link param to figure out what link was activated! – Thorough 12/7, 2017 at 17:17

Link to a small addition about changing a mouse pointer on link hovering: blog.shantanu.io/2015/02/15/… – Peltz 6/11, 2019 at 5:37

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><a href="http://google.com">google</a></html>'
        onLinkActivated: Qt.openUrlExternally(link)
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            acceptedButtons: Qt.NoButton // Don't eat the mouse clicks
            cursorShape: Qt.PointingHandCursor
        }
    }

Politicize answered 19/10, 2021 at 23:7 Comment(0)

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
}

Guitar answered 22/10, 2021 at 10:32 Comment(0)

Recommended topics

Hot tags