Qt/QML学习-Switch

放假当宅宅

于 2024-08-25 15:00:22 发布

阅读量485

点赞数 19

分类专栏： Qt/QML学习文章标签： qt 学习

本文链接：https://blog.csdn.net/qq1138345424/article/details/141529404

版权

Qt/QML学习专栏收录该内容

44 篇文章 1 订阅

订阅专栏

QML学习

Switch例程
视频讲解
代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Switch {
        id: mySwitch
        anchors.centerIn: parent
        text: "点赞"
        background: Rectangle {
            border.width: 1
        }
        contentItem: Text {
            leftPadding: mySwitch.indicator.width
            text: mySwitch.text
            font.pointSize: 15
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        indicator: Rectangle {
            implicitWidth: 60
            implicitHeight: 20
            radius: 5
            x: mySwitch.leftPadding
            y: mySwitch.height / 2 - height / 2
            color: "lightGray"
            Rectangle {
                width: 20
                height: 20
                radius: 5
                x: mySwitch.checked? 0: parent.width - width
                y: parent.height / 2 - height / 2
                color: mySwitch.checked? "gray": "green"
                Behavior on x {
                    NumberAnimation {
                        duration: 100
                    }
                }
                Behavior on color {
                    ColorAnimation {
                        duration: 100
                    }
                }
            }
        }
    }
}