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

本是古典何须时尚 2022-03-16 12:56 450阅读 0赞

### **【正文开始】** ###

先上效果图：

![20190227222000440.gif][]

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

--------------------

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

[20190227222000440.gif]: /images/20220316/ae9abc0edf964e1ab67c5eff23fc82fe.png
[https_github.com_mengps_QmlControls]: https://github.com/mengps/QmlControls