QML实现的几个比较有用的控件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011283226/article/details/87993621

先上效果图：

如果觉得不错，请接着往下看~

---

首先是第一个，带有光圈的矩形，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