QML项目实战：自定义Switch按钮

目录

一.添加模块

1.QtQuick.Controls 2.1

2.QtGraphicalEffects 1.12

二.自定义Switch

三.标签

四.效果

五.代码

---

一.添加模块

1.QtQuick.Controls 2.1

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

2.QtGraphicalEffects 1.12

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

二.自定义Switch

1.Switch 控件定义了一个自定义的指示器，根据 Switch 的状态（选中或未选中），矩形的颜色会发生变化。

2.指示器内部定义了一个滑块，它的初始位置取决于 Switch 的状态。滑块的颜色也会根据状态变化。

3.为滑块的位置变化添加了一个动画效果，使其在状态切换时平滑移动。

4.阴影效果

5.checked

三.标签

四.效果

五.代码

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Switch{id: _Switchanchors.centerIn: parentwidth: 140height: 50//checked:indicator: Rectangle {anchors.fill: parentwidth: 140height: 50radius: 25color: _Switch.checked ? "#2C62FF" : "#D7E1F0"border.width: 2border.color: "white"// border.color: _Switch.checked ? checkedColor : "#E5E5E5"Rectangle {x: _Switch.checked ? parent.width - width - 5 : 5width: 38height: widthradius: 20anchors.verticalCenter: parent.verticalCentercolor: _Switch.checked ?  " white" : "#97ACC8"Behavior on x {NumberAnimation { duration: 200 }}}layer.enabled:          truelayer.effect: DropShadow {verticalOffset: 4radius: 8samples: 10color: "#4d000f43"}}onCheckedChanged: {_Label.text = _Switch.checked}}Label{id:_Labelanchors.top: _Switch.bottomanchors.topMargin: 30anchors.horizontalCenter: parent.horizontalCenterfont.pixelSize: 45text: "我是一个标签"}
}