QML选择按钮封装

最新推荐文章于 2023-07-30 23:11:22 发布

马斯尔果

最新推荐文章于 2023-07-30 23:11:22 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/qq_42108501/article/details/127822752

版权

QT 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

QML

7 篇文章 0 订阅

订阅专栏

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
//        }
//    }
}