Quick控件--6.switch button

1 效果

在这里插入图片描述

2 简介

button按键最常用,control2中对button做了固定封装,为了更灵活使用,自定义switch button组件。

3 控件代码

3.1 SenSwitchBtn.qml

import QtQuick 2.12

Rectangle {
    id: root
    width: 80
    height: 26
    color: "#EAEAEA"
    radius: 12

    property string leftString: ""
    property string rightString: ""
    signal switchLeft
    signal switchRight

    Rectangle {
        id: rect
        width: parent.width * 0.6
        radius: parent.radius
        color: rect.state == "left" ? "#4040FF" : "#CCCCCC"
        state: "left"
        anchors {
            top: parent.top
            bottom: parent.bottom
        }

        states: [
            State {
                name: "right"
                PropertyChanges {
                    target: rect
                    x: root.width - rect.width
                }
            }
        ]

        transitions: [
            Transition {
                from: "*"
                to: "*"
                NumberAnimation { property: "x"; duration: 200 }
            }
        ]

        Text {
            id: label
            anchors.centerIn: parent
            text: rect.state == "left" ? root.leftString : root.rightString
            color: "white"
            font.pointSize: 10
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: {
            if (rect.state == "left") {
                rect.state = "right";
                root.switchRight();
            } else {
                rect.state = "left";
                root.switchLeft();
            }
        }
    }
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

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

    SenCom.SenSwitchBtn {
        anchors.centerIn: parent
    }
}
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读