QML实现的几个比较有用的控件
先上效果图:
如果觉得不错,请接着往下看~
首先是第一个,带有光圈的矩形,GlowRectangle:
import QtQuick 2.7
import QtGraphicalEffects 1.12
Item
{
id: root
property alias color: rect.color;
property alias radius: rect.radius;
property alias spread: backEffect.spread;
property alias glowColor: backEffect.color;
property alias glowRadius: backEffect.glowRadius;
RectangularGlow
{
id: backEffect
anchors.fill: rect
glowRadius: 0
spread: 0.2
cornerRadius: rect.radius + glowRadius
}
Rectangle
{
id: rect
anchors.fill: parent
}
}
这里主要就是看RectangularGlow,具体在文档就很清楚。
然后是第二个,圆角版的Image,CircularImage:
import QtQuick 2.7
import QtGraphicalEffects 1.12
Item
{
id: root
width: 80
height: 80
property int radius: width >> 1; //默认宽度的一半
property alias source: image.source;
property alias mipmap: image.mipmap;
property alias fillMode: image.fillMode;
Image
{
id: image
sourceSize: Qt.size(parent.width, parent.height)
mipmap: true
visible: false
}
Rectangle
{
id: mask
anchors.fill: parent
radius: root.radius
visible: false
}
OpacityMask
{
anchors.fill: parent
source: image
maskSource: mask
}
}
这里主要就是看OpacityMask,emmm....具体在文档就很清楚....
然后是前面的合体,GlowCircularImage:
import QtQuick 2.7
Item
{
id: root
property alias spread: back.spread; //光圈强度
property alias radius: back.radius; //图像圆半径
property alias glowRadius: back.glowRadius; //光圈半径
property alias glowColor: back.color; //光圈颜色
property alias source: image.source;
property alias fillMode: image.fillMode;
GlowRectangle
{
id: back
anchors.fill: parent
color: "black" //默认为黑色
glowColor: color
CircularImage
{
id: image
anchors.fill: parent
radius: parent.radius
mipmap: true
antialiasing: true
}
}
}
这个就很简单了,直接在第一个里面放第二个,然后我加了个动画,控制光圈的颜色,这样看起来更炫酷了,具体代码在main.qml中:
import QtQuick 2.12
import QtQuick.Window 2.2
Window
{
visible: true
width: 640
height: 480
title: qsTr("Glow Circular Image")
GlowRectangle
{
id: glowRect
width: 100
height: 50
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
color: "#09A3DC"
glowColor: "#09A3DC"
radius: 5
glowRadius: 5
}
CircularImage
{
id: image
anchors.left: glowRect.right
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
width: 200
height: 200
fillMode: Image.PreserveAspectFit
source: "qrc:/test.png"
}
GlowCircularImage
{
id: blend
anchors.left: image.right
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
width: 200
height: width
radius: width / 2
spread: 0.8
glowRadius: 30
glowColor: "#663366"
fillMode: Image.PreserveAspectFit
source: "qrc:/test.png"
ColorAnimation
{
target: blend
property: "glowColor"
from: "#FF88FF"
to: "#663366"
duration: 800
running: true
easing.type: Easing.Linear
property bool reverse: false
onStopped:
{
if (!reverse)
{
from = "#663366";
to = "#FF88FF";
}
else
{
from = "#FF88FF";
to = "#663366";
}
reverse = !reverse
running = true;
}
}
}
}
好了,这次的三个控件很简单,不过效果挺漂亮的。
以后我还会做很多其他的控件,都会放到Github上,需要的可以自取,地址:https://github.com/mengps/QmlControls