qml完美实现横向或者斜向的渐变色按钮

竖向渐变色按钮

设计思路

qml的Button控件主要是内容和背景实现的，背景可以使用一个Rectangle控件，恰巧它存在一个属性gradient可以实现渐变色，说干就干，可以得到一个竖向渐变色按钮，效果和代码如下：

Button {
    width: 160
    height: 44
    text: "竖向渐变色按钮"
    background: Rectangle {
        anchors.fill: parent
        radius: 8
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "#FF66B8FF"
            }
            GradientStop {
                position: 1.0
                color: "#FF338BFF"
            }
        }
    }
}

修改文本样式

我们发现背景是变成渐变色了，但是文本有点丑，加一点魔法，效果如下：

Button {
    width: 160
    height: 44
    contentItem: Label {
        font.pixelSize: 14                      // 字体大小
        font.weight: Font.Black                 // 字体粗细
        horizontalAlignment: Text.AlignHCenter  // 字体水平居中
        verticalAlignment: Text.AlignVCenter    // 字体垂直居中
        color: "#FFFFFF"                        // 字体颜色
        text: "竖向渐变色按钮"                   // 文本
    }
    background: Rectangle {
        anchors.fill: parent
        radius: 8                               // 圆角大小
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "#FF66B8FF"              // 上侧起始颜色
            }
            GradientStop {
                position: 1.0
                color: "#FF338BFF"              // 下侧终止颜色
            }
        }
    }
}

横向渐变不仅仅只是旋转一下就能实现的，旋转会把整个Rectangle控件都发生旋转，下面介绍新的方式来实现横向和斜向的渐变色

LinearGradient 线性渐变

LinearGradient 线性渐变，它可以从给定的起始点开始，到给定的结束点结束，使几种颜色无缝衔接渐变，代码如下：

使用LinearGradient的时候记得导入：QtGraphicalEffects

import QtGraphicalEffects 1.15  // 导入QtGraphicalEffects才能正常使用LinearGradient

LinearGradient {
    anchors.fill: parent
    start: Qt.point(0, 0)   
    end: Qt.point(width, 0)        ///1、横向渐变
//        end: Qt.point(0, height)     ///2、竖向渐变
//        end: Qt.point(width, height) ///3、横向渐变
    gradient: Gradient {
        GradientStop {  position: 0.0;    color: "red" }
        GradientStop {  position: 0.5;    color: "blue" }
        GradientStop {  position: 1.0;    color: "green" }
    }
}

横向和斜向的渐变色按钮

直接使用LinearGradient是没办法修改圆角大小的，这里启用layer来实现，效果和代码如下：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15  // 导入QtGraphicalEffects才能正常使用LinearGradient

Button {
    width: 160
    height: 44
    contentItem: Label {
        font.pixelSize: 14                      // 字体大小
        font.weight: Font.Black                 // 字体粗细
        horizontalAlignment: Text.AlignHCenter  // 字体水平居中
        verticalAlignment: Text.AlignVCenter    // 字体垂直居中
        color: "#FFFFFF"                        // 字体颜色
        text: "斜向渐变色按钮"                   // 文本
    }
    background: Rectangle {
        anchors.fill: parent
        radius: 8                               // 圆角大小
        layer.enabled: true
        layer.effect: LinearGradient {
            start: Qt.point(0, 0)               // 渐变色起始位置
            end: Qt.point(width, 0)             // 渐变色终止位置（横向）
//            end: Qt.point(width, height)        // 渐变色终止位置（斜向）
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: "#FF66B8FF"          // 起始颜色
                }
                GradientStop {
                    position: 1.0
                    color: "#FF338BFF"          // 终止颜色
                }
            }
        }
    }
}

加点动态效果

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15  // 导入QtGraphicalEffects才能正常使用LinearGradient

Button {
    id: btn
    width: 160
    height: 44
    property color lightColor: "#FF66B8FF"  // 起始颜色
    property color darkColor: "#FF338BFF"   // 终止颜色
    contentItem: Label {
        font.pixelSize: 14
        font.weight: Font.Black
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: "#FFFFFF"
        text: "横向渐变色按钮"
    }
    background: Rectangle {
        anchors.fill: parent
        radius: 8
        layer.enabled: true
        layer.effect: LinearGradient {
            start: Qt.point(0, 0)
            end: Qt.point(width, 0)
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: btn.pressed ? btn.darkColor : btn.lightColor
                }
                GradientStop {
                    position: 1.0
                    color: btn.pressed || !btn.hovered ? btn.darkColor : btn.lightColor
                }
            }
        }
    }
}

写成自己的模板按钮控件

文件MyButton.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
import QtGraphicalEffects 1.15

T.Button {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)
    padding: 0
    font.pixelSize: 14
    font.weight: Font.Black

    property int radius: 8
    property color textColor: "#FFFFFF"
    property color lightColor: "#FF66B8FF"  // 起始颜色
    property color darkColor: "#FF338BFF"   // 终止颜色

    contentItem: Label {
        font: control.font
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        opacity: control.enabled ? 1 : 0.4
        color: control.textColor
        text: control.text
    }

    background: Rectangle {
        id: backgroundRect
        implicitWidth: 160
        implicitHeight: 44

        radius: control.radius
        opacity: control.enabled ? 1 : 0.4
        layer.enabled: true
        layer.effect: LinearGradient {
            start: Qt.point(0, 0)
            end: Qt.point(width, 0)  //横向渐变按钮
//            end: Qt.point(width, height)  //斜向渐变按钮
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: control.pressed ? control.darkColor : control.lightColor
                }
                GradientStop {
                    position: 1.0
                    color: control.pressed || !control.hovered ? control.darkColor : control.lightColor
                }
            }
        }
    }
}

使用模板按钮和效果

使用代码如下：

MyButton {
    text: '使用模板按钮'
}

使用代码如下：

MyButton {
    width: 90
    height: 32
    radius: 4
    text: '小型按钮'
}

大功告成，希望对你有所帮助