QML自定义ToolTip

实现原理

通过获取parent来进行定位，并显示内容

关键问题

1. 如何确定最佳的定位位置，如：
   • 什么时候位于parent上面
   • 什么时候位于parent下面
   • 什么时候和parent左对齐
   • 什么时候和parent右对齐
2. 如何获取全局坐标

实现代码

//XJYToolTip.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle {

    property alias text: content.text
    property int margin: 15

    id:self
    z:4

    color: "white"
    radius: 4
    width: content.width+20
    height: content.height+20

    anchors{
        top:getGlobalPositon(parent).y+parent.height+margin+height<Window.height?parent.bottom:undefined
        bottom:getGlobalPositon(parent).y+parent.height+margin+height>=Window.height?parent.top:undefined
        left: (width-parent.width)/2>getGlobalPositon(parent).x?parent.left:undefined
        right:width+getGlobalPositon(parent).x>Window.width?parent.right:undefined
        topMargin: margin
        bottomMargin: margin
    }

    x:(width-parent.width)/2<=parent.x&&width+parent.x<=Window.width?(-width+parent.width)/2:0

    Text{
        id:content
        text: "这是一段提示文字！"
        lineHeight: 1.2
        anchors.centerIn: parent
        font.family: window.mFONT_FAMILY
    }

    function getGlobalPositon(target=parent){
        var targetX = 0
        var targetY = 0
        while(target!==null){
            targetX += target.x
            targetY += target.y
            target  = target.parent
        }
        return {
            x:targetX,
            y:targetY
        }
    }

}
qml

• 上面getGlobalPositon是用来获取全局坐标的方法，途径是遍历parent

用法

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("XJY Components")

    Button{
        anchors.top: parent.top
        Text{
            anchors.centerIn: parent
            text: "左上"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }

    Button{
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        Text{
            anchors.center: parent
            text: "上中"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }

    Button{
        anchors.top: parent.top
        anchors.right: parent.right
        Text{
            anchors.centerIn: parent
            text: "右上"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }

    Button{
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        Text{
            anchors.centerIn: parent
            text: "中左"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }

    Button{
        anchors.centerIn: parent
        Text{
            anchors.centerIn: parent
            text: "中心"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }
    Button{
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        Text{
            anchors.centerIn: parent
            text: "中右"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }
    Button{
        anchors.bottom: parent.bottom
        Text{
            anchors.centerIn: parent
            text: "左下"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }
    Button{
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        Text{
            anchors.centerIn: parent
            text: "下中"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }
    Button{
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        Text{
            anchors.centerIn: parent
            text: "右下"
        }
        XJYToolTip{
            visible: parent.hovered
            text: "这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字这是一段提示文字"
        }
    }
}
qml