QML文本中实现网页超链接

来源：互联网发布：psp网络联机编辑：程序博客网时间：2024/05/22 17:40

最近因为项目需要开始学习QML，大概学习了一周左右了，有些东西在网上查的时候发现资源非常少，不知道是不是我搜索的不对还是其他原因，最近遇到的两个问题，觉得应该拿来和大家分享一下，如果有不对的地方，请大家指正，互相学习！！

一：QML文本中实现网页超链接

在网上看到一篇诺基亚内部QML培训的资料，上面写到在文本中可以实现超链接，给出的HTML的格式如下：

"<html><b>Qt Quick</b></html>“，当我将该代码粘贴到如图1所示的代码中，并用http://www.baidu.com网址替换掉Qt Quick后，运行该程序，发现效果如图2所示。

Rectangle {

    width: 200

    height: 200

    color: "lightblue"

    Text {

        anchors.centerIn: parent

        text: "<html><b>http://www.baidu.com</b></html>"

图1

图2

发现该网址只是以字符串的形式显示在了文本框上，并不是想要的超链接，经过两个小时的调查，终于在一个网站上提出的问题中找到了解决办法，原来是格式有问题，将以上代码中超链接部分改动一下即可，改完后的代码如图3所示，效果如图4所示:

Rectangle {

    width: 200

    height: 200

    color: "lightblue"

    Text {

        anchors.centerIn: parent

        text: '<html></style><a href="http://baidu.com">baidu</a></html>'

图3

图4

从图4中可以看到，该百度网址已经是以超链接的方式显示出来了，但是点击”baidu“后发现没有反应，应该怎么解决呢？原来是缺少了一句激活链接的语句，将该语句添加好的代码如图5所示：

Rectangle {

    width: 200

    height: 200

    color: "lightblue"

    Text {

        anchors.centerIn: parent

        text: '<html></style><a href="http://baidu.com">baidu</a></html>'

        onLinkActivated: Qt.openUrlExternally(link)

图5

这时候重新运行程序，在出现的图4中点击”baidu“字样，就可以实现跳转到百度界面的超链接功能了！