如何在QML中实现与网页端效果一致的HTML popover组件

单独使用指针图片的方案适配性极差，切换弹出方向、调整指针位置、对齐不同圆角参数都需要重新切图，很难还原网页端的原生效果，推荐用整体矢量绘制的方案实现，具体思路如下：

• 优先用Canvas绘制带指针的气泡整体轮廓，不需要拆分素材
  将气泡矩形和三角指针作为完整路径绘制，用PathQuad实现圆角效果，填充底色后统一叠加阴影，所有样式参数（气泡尺寸、圆角大小、指针方向、指针偏移量、填充色）都可以做成可绑定属性，动态调整时不需要替换任何资源，视觉效果可以和CSS实现的popover完全对齐。
• 阴影效果用DropShadow组件统一实现
  直接将Canvas作为DropShadow的source，调整radius、spread、offset参数和网页端box-shadow的参数一一对应，颜色直接复用网页端的rgba值即可，边缘过渡比图片阴影方案自然很多，不会出现毛边或者锯齿问题。
• 定位逻辑对齐原生HTML popover行为
  封装附加属性绑定触发控件坐标，计算popover的显示位置时增加边界校验逻辑，如果气泡弹出后会超出窗口可视区域，自动调整气泡偏移量或者切换指针方向，和原生HTML popover的自适应定位逻辑对齐。

下面是核心实现的最简代码示例，你可以基于这个扩展其他方向的绘制逻辑：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    id: root
    // 可配置属性
    property int contentWidth: 240
    property int contentHeight: 120
    property color bgColor: "#ffffff"
    property int pointerSize: 8
    property int borderRadius: 8
    // 指针方向支持：top/right/bottom/left
    property string pointerDirection: "bottom"
    // 指针相对对应边的偏移量，默认居中
    property int pointerOffset: (contentWidth - pointerSize)/2
    property color borderColor: "#e5e7eb"
    property int borderWidth: 1

    width: contentWidth + (["left", "right"].includes(pointerDirection) ? pointerSize : 0)
    height: contentHeight + (["top", "bottom"].includes(pointerDirection) ? pointerSize : 0)

    Canvas {
        id: canvas
        anchors.fill: parent
        onPaint: {
            const ctx = getContext("2d")
            ctx.reset()
            ctx.fillStyle = bgColor
            ctx.strokeStyle = borderColor
            ctx.lineWidth = borderWidth
            ctx.beginPath()

            // 底部指向的绘制逻辑，其他方向只要调整路径坐标即可
            if (pointerDirection === "bottom") {
                ctx.moveTo(borderRadius, 0)
                ctx.lineTo(contentWidth - borderRadius, 0)
                ctx.quadraticCurveTo(contentWidth, 0, contentWidth, borderRadius)
                ctx.lineTo(contentWidth, contentHeight - borderRadius)
                ctx.quadraticCurveTo(contentWidth, contentHeight, contentWidth - borderRadius, contentHeight)
                // 绘制底部三角指针
                ctx.lineTo(pointerOffset + pointerSize, contentHeight)
                ctx.lineTo(pointerOffset + pointerSize/2, contentHeight + pointerSize)
                ctx.lineTo(pointerOffset, contentHeight)
                ctx.lineTo(borderRadius, contentHeight)
                ctx.quadraticCurveTo(0, contentHeight, 0, contentHeight - borderRadius)
                ctx.lineTo(0, borderRadius)
                ctx.quadraticCurveTo(0, 0, borderRadius, 0)
            }

            ctx.fill()
            ctx.stroke()
        }
    }

    DropShadow {
        anchors.fill: canvas
        source: canvas
        radius: 6
        samples: 12
        color: "#22000000"
        verticalOffset: 2
    }

    // 内容承载区域，直接在内部嵌套自定义内容即可
    Item {
        anchors.fill: parent
        anchors.margins: 12
        anchors.topMargin: pointerDirection === "top" ? pointerSize + 12 : 12
        anchors.bottomMargin: pointerDirection === "bottom" ? pointerSize + 12 : 12
        anchors.leftMargin: pointerDirection === "left" ? pointerSize + 12 : 12
        anchors.rightMargin: pointerDirection === "right" ? pointerSize + 12 : 12
        clip: true
    }
}

如果需要支持更多指针方向，只要在Canvas的paint逻辑里对应调整路径的绘制顺序和坐标即可，不需要修改其他逻辑。

内容的提问来源于stack exchange，提问作者Phil Moerschell