目录
一.添加模块
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}}
}
