目录
前言
最近一段时间在用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"
}
}