クイックコントロール--6.switchボタン

1件の結果

2はじめに

Control2の製最も一般的に使用されるキーボタン、ボタンは組立カスタムボタンスイッチのより柔軟な使用を可能にするために、パッケージ内に固定しました。

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