QML项目实战：自定义Button

目录

一.添加模块

​1.QtQuick.Controls 2.1

2.QtGraphicalEffects 1.12

二.自定义Button

1.颜色背景设置

2.设置渐变色背景

3.文本设置

4.点击设置

5.阴影设置

三.效果

1.当enabled为true

2.按钮被点击时

3.当enabled为false

四.代码

一.添加模块

1.QtQuick.Controls 2.1

• QtQuick.Controls 提供了一组预定义的 UI 控件，这些控件可以用于构建现代、响应式的用户界面。
• 它包括按钮、标签、文本框、滑块、列表视图等常见的 UI 元素。

2.QtGraphicalEffects 1.12

• QtGraphicalEffects 提供了一组图形效果，可以在 QML 中应用到任何可视化项目上，如图像、视频或其他 UI 元素。
• 它包括模糊、阴影、颜色调整、光照等效果。

二.自定义Button

1.颜色背景设置

2.设置渐变色背景

3.文本设置

4.点击设置

5.阴影设置

三.效果

1.当enabled为true

正常状态下按钮为深蓝色渐变浅蓝色

2.按钮被点击时

点击按钮状态下按钮为深紫色渐变浅紫色

3.当enabled为false

按钮为不可选中状态，按钮被置成灰色

四.代码

import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("自定义按钮")

    //按钮颜色
    property color normalLeftColor: "#1A40FF"
    property color normalRightColor: "#5E8EFF"
    property color pressedLeftColor: "#6200E2"
    property color pressedRightColor: "#6B7DFF"
    property color disableLeftColor: "#8B99B2"
    property color disableRightColor: "#6D7B9A"

    function getLeftColor() {
        if (control.enabled) {
            return control.pressed ? pressedLeftColor : normalLeftColor;
        } else {
            return disableLeftColor;
        }
    }

    function getRightColor() {
        if (control.enabled) {
            return control.pressed ? pressedRightColor : normalRightColor;
        } else {
            return disableRightColor;
        }
    }

    //按钮点击增加数字
    property int   index: 0

    // 文本颜色。
    property color textColor: control.enabled ? "white" : "#C8D3E6"

    Button {
        id: control
        anchors.centerIn: parent
        implicitWidth: 180 // 默认是小按钮的宽高
        implicitHeight: 70
        font.family: "微软雅黑"
        font.pixelSize: 30
        enabled:true

        contentItem: Item {
            z: control.z + 1 // 避免含有图片时受shadow的影响而不显示
            anchors.fill: parent

            Text {
                anchors.centerIn: parent
                text: index
                color: textColor
                font.family: control.font.family
                font.pixelSize: control.font.pixelSize
            }
        }

        onClicked: {
            index++
        }

        // 渐变色背景。需要左侧颜色，右侧颜色。
        background: Rectangle {
            id:_background
            radius:10

            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop { position :0.0; color:getLeftColor() }
                GradientStop { position :1.0; color:getRightColor() }
            }
         }

         // 淡阴影(UI左上方照射的效果)
         DropShadow {
             id:_shadow
             anchors.fill:_background
             horizontalOffset :3
             verticalOffset :2
             radius :8.0
             samples :17
             color : control.enabled ?  "#00208B" : "#C8D3E6"
             source:_background
             visible:true
         }
     }
}