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.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Switch{
        id: _Switch
        anchors.centerIn: parent
        width: 140
        height: 50
        //checked:
        indicator: Rectangle {
            anchors.fill: parent
            width: 140
            height: 50
            radius: 25
            color: _Switch.checked ? "#2C62FF" : "#D7E1F0"
            border.width: 2
            border.color: "white"
            // border.color: _Switch.checked ? checkedColor : "#E5E5E5"
            Rectangle {
                x: _Switch.checked ? parent.width - width - 5 : 5
                width: 38
                height: width
                radius: 20
                anchors.verticalCenter: parent.verticalCenter
                color: _Switch.checked ?  " white" : "#97ACC8"

                Behavior on x {
                    NumberAnimation { duration: 200 }
                }
            }
            layer.enabled:          true
            layer.effect: DropShadow {
                verticalOffset: 4
                radius: 8
                samples: 10
                color: "#4d000f43"
            }
        }
        onCheckedChanged: {
            _Label.text = _Switch.checked
        }
    }

    Label{
        id:_Label
        anchors.top: _Switch.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
        font.pixelSize: 45
        text: "我是一个标签"
    }
}