qml如何实现鼠标滑动突出显示效果

目录

前言

一、qml如何实现鼠标滑动放大效果

二、思路

三、代码

---

 

---

前言

 

最近一段时间在用qml写客户端程序，做UI是真的好用，感觉比QT widget顺手。不过我也是新手，用什么学什么。

毕业一晃眼好多年了，从只会C/C++，陆陆续续接触java、oc、lua、js、python，没有特别精通的，但是基本都了解，搞个程序出来是没问题的。

写代码真的是一通百通的，理解了原理就好，要想完全精通，真的要多练多看了。

 

一、qml如何实现鼠标滑动放大效果

最近在优化UI，想实现鼠标悬浮后突出显示鼠标指向的数据内容，没有找到好的示例，自己造一个，效果大概是这样

二、思路

监测鼠标焦点，用一个大的rectangle遮罩住当前鼠标指向的字符，原理是这样，想做成其他效果，应该都是一样的，微调一下就行了

---

三、代码

直接上代码，一看就明白

//LabelListView.qml
import QtQuick 2.13

Rectangle
{
    id:idColorbtn
    property alias itemName: idBtnName.text

    property int itemNum: itemName.length/4 //内部计算得出每个项占多少个像素，一个项目有4个字符，如"A:  "
    property int itemLeftMargin: 0
    property int itemCurSelPos: 0 //当前是第几项
    color:"#171B27"
    height: idBtnName.contentHeight
    width: idBtnName.contentWidth
    Text {
        id: idBtnName
        anchors.fill:parent
        text: itemName
        font.pixelSize: 18
        font.weight: Font.Medium
        color: "#CECECE"
        verticalAlignment: Text.AlignVCenter
    }
    Rectangle{
        id:idMark
        visible: itemNum!==0?true:false
        width: {if(itemNum!==0)idBtnName.contentWidth/(2*itemNum)}
        height: idBtnName.contentHeight
        anchors.top:parent.top;
        anchors.bottom:parent.bottom;
        color: parent.color
        z:1
        x:itemLeftMargin
        Text {
            id:idMarkText
            anchors.fill:parent
            text: itemName.charAt(itemCurSelPos*4)
            font.pixelSize: 26
            font.weight: Font.ExtraBold
            color: Qt.lighter("#CECECE")
            verticalAlignment: Text.AlignVCenter
        }
    }
    MouseArea
    {
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton
        onPositionChanged:{
            //mouse
            var itemLenth = (idBtnName.contentWidth/itemNum)
            if(itemNum!==0){
                var npos = parseInt((mouse.x)/itemLenth)
                if(npos<itemNum){
                    idColorbtn.itemLeftMargin = parseInt(npos*itemLenth)
                    itemCurSelPos = npos
                }
            }
        }
    }
}

调用：main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "#171B27"
    LabelListView{
        id: idLogLabel
        itemName:"A   B   C   D   "
        anchors.centerIn: parent
        onItemCurSelPosChanged: {
            //检测鼠标焦点，自动更新信息
            switch(idLogLabel.itemCurSelPos){
            case 0:
                idRectColor.color="red"
                break;
            case 1:
                idRectColor.color="green"
                break;
            case 2:
                idRectColor.color="black"
                break;
            case 3:
            default:
                idRectColor.color="white"
                break;
            }
        }
    }
    Rectangle{
        id:idRectColor
        anchors.bottom: idLogLabel.top
        anchors.bottomMargin: 80
        anchors.horizontalCenter: parent.horizontalCenter
        width: 80
        height: 80
        color: "white"
    }
}