QML 流光按钮

---

前言

工作繁忙，好久没写博客了。今天看视频看到了前端写的按钮，于是尝试用qml实现看看。

一、效果

二、代码

// StreamerButton.qml

import QtQuick
import QtQuick.Controls.impl
import QtQuick.Templates as T
import Qt5Compat.GraphicalEffects

T.Button {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
        implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
        implicitContentHeight + topPadding + bottomPadding)

    padding: 6
    horizontalPadding: padding + 2
    spacing: 6

    icon.width: 24
    icon.height: 24
    icon.color: control.checked || control.highlighted ? control.palette.brightText :
                control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText

    contentItem: IconLabel {
        spacing: control.spacing
        mirrored: control.mirrored
        display: control.display

        icon: control.icon
        text: control.text
        font: control.font
        color: control.checked || control.highlighted ? control.palette.brightText :
               control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
    }

    background: Item {
        implicitWidth: 100
        implicitHeight: 40
        visible: !control.flat || control.down || control.checked || control.highlighted
        clip: true

        Item {
            width: Math.max(parent.width, parent.height) * 1.2
            height: Math.max(parent.width, parent.height) * 1.2
            anchors.centerIn: parent
            rotation: angle
            property real angle: 0
            Timer {
                running: true
                interval: 5
                repeat: true
                onTriggered: parent.angle = (parent.angle + 1) % 360
            }
            LinearGradient {
                anchors.fill: parent
                gradient: Gradient {
                    GradientStop {
                        position: 0.0; color: "red"
                    }
                    GradientStop {
                        position: 0.2; color: "orange"
                    }
                    GradientStop {
                        position: 0.7; color: "green"
                    }
                    GradientStop {
                        position: 1.0; color: "blue"
                    }
                }
            }
        }

        Rectangle {
            anchors.centerIn: parent
            implicitWidth: parent.width - border.width
            implicitHeight: parent.height - border.width
            color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button,
                control.palette.mid, control.down ? 0.5 : 0.0)
            border.color: "transparent"
            border.width: 4
        }
    }
}