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