目录

一.添加模块

​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.12Window {visible: truewidth: 640height: 480title: 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: controlanchors.centerIn: parentimplicitWidth: 180 // 默认是小按钮的宽高implicitHeight: 70font.family: "微软雅黑"font.pixelSize: 30enabled:truecontentItem: Item {z: control.z + 1 // 避免含有图片时受shadow的影响而不显示anchors.fill: parentText {anchors.centerIn: parenttext: indexcolor: textColorfont.family: control.font.familyfont.pixelSize: control.font.pixelSize}}onClicked: {index++}// 渐变色背景。需要左侧颜色，右侧颜色。background: Rectangle {id:_backgroundradius:10gradient: Gradient {orientation: Gradient.HorizontalGradientStop { position :0.0; color:getLeftColor() }GradientStop { position :1.0; color:getRightColor() }}}// 淡阴影(UI左上方照射的效果)DropShadow {id:_shadowanchors.fill:_backgroundhorizontalOffset :3verticalOffset :2radius :8.0samples :17color : control.enabled ?  "#00208B" : "#C8D3E6"source:_backgroundvisible:true}}
}