QML选择按钮封装

最新推荐文章于 2025-03-17 08:00:00 发布

马斯尔果

最新推荐文章于 2025-03-17 08:00:00 发布

阅读量283

点赞数

分类专栏： QML QT 文章标签： qt 开发语言

本文链接：https://blog.youkuaiyun.com/qq_42108501/article/details/127822752

版权

QT 同时被 2 个专栏收录

16 篇文章

订阅专栏

QML

7 篇文章

订阅专栏

本文介绍了如何使用Qt Quick 2.0和Controls2.12库创建一个带有动态切换指示器的小型开关组件，包括背景颜色变化、信号触发和小圆点动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import QtQuick 2.0
import QtQuick.Controls 2.12

Switch{
    id:control
    property color backgroundColor: control.checked? "#3d73ff" : "#9FB7CE"
    property alias ischeck: control.checked
    signal checkChange(bool check)

    onClicked: {
        control.checkChange(ischeck);
    }

    indicator: Rectangle{
        implicitWidth: 40
        implicitHeight:24
        x:control.leftPadding
        y:parent.height / 2 - height / 2;
        radius: 12
        color: control.backgroundColor
        border.color: control.backgroundColor
        //小圆点
        Rectangle{
            id:smallRect
            width: 18
            height: 18
            radius: 13
            color: "#FFFFFF"
            border.color: "#999999"
            anchors.verticalCenter: parent.verticalCenter
            //改变小圆点位置
            NumberAnimation on x{
                to:smallRect.width
                running: control.checked? true : false;
                duration: 0
            }
            NumberAnimation on x{
                to:0
                running: control.checked? false : true;
                duration: 0
            }

        }
    }
    //要显示的文本
//    contentItem: Text {
//        text: qsTr("text")
//        color: "#4e5969"
//        verticalAlignment: Text.AlignVCenter
//        anchors.right: indicator.left
//        font{
//            family: "Microsoft YaHei"
//            pixelSize: 14
//        }
//    }
}

在这里插入图片描述