如何让QML Text元素内的链接hover时显示手型鼠标光标？

问题场景 #

使用QML的Text组件加载富文本内容时，链接无法像浏览器那样在鼠标悬停时显示手型光标。添加MouseArea实现光标切换后，会阻塞Text原生的onLinkActivated信号，重复实现点击逻辑又会造成代码冗余。

解决方案 #

通过给MouseArea设置事件传递属性，既实现光标切换，又保留Text的原生链接点击处理逻辑：

Text { 
    id: bodyMessage
    anchors.fill: parent
    textFormat: Text.RichText
    wrapMode: Text.WordWrap

    text:
        '<p>' + qsTr('Here is my first paragraph.') + '</p>' +
        '<p>' + qsTr('My second paragraph contains the <a href="link1">first link</a>.') + '</p>' +
        '<p>' + qsTr('My third paragraph contains the <a href="link2">second link</a> and that is it.') + '</p>'

    onLinkActivated: (link) => {
        console.log('Link activated to: `' + link + '`')
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        // 开启事件向下传递，让下层Text组件能接收鼠标事件
        propagateComposedEvents: true

        onPositionChanged: (mouse) => {
            // 根据鼠标位置是否在链接上切换光标形状
            cursorShape = bodyMessage.linkAt(mouse.x, mouse.y) ? Qt.PointingHandCursor : Qt.ArrowCursor
        }

        onClicked: {
            // 标记事件未被处理，允许传递给Text组件
            mouse.accepted = false
        }
    }
}

关键说明 #

• propagateComposedEvents: true：允许MouseArea将合成鼠标事件（如点击、双击）传递给层级更低的Item
• mouse.accepted = false：在onClicked中设置此属性，告诉Qt当前事件未被MouseArea消费，会继续传递给下方的Text组件，从而触发原生的onLinkActivated信号
• linkAt(x, y)：Text组件的内置方法，用于判断指定坐标位置是否存在链接，返回链接的href值（无链接则返回空字符串）

内容的提问来源于stack exchange，提问作者Paul Masri-Stone