Qt教程之利用Qml实现滑动按钮效果

 0  773

索鸟 2021-03-16

需要：0索币

整理成了一个自定义组件方便调用,下面是完整代码:
import QtQuick 2.0

Rectangle{
    id:outerRec
    radius:25;
    implicitWidth: 100;
    implicitHeight: 50;
    color:initOuterColor;
    property real count: 0
    property color initOuterColor: "lightgrey"
    property color aferChangedColor: "#8a2be2"
    property alias innerColor: innerRec.color;
    Rectangle{
        id:innerRec
        anchors.left: parent.left;
        anchors.leftMargin: 2;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 2;
        height:46;
        width:49;
        radius:25;
        color:"white";

        states:[
            State{
                name:"left";
                when:mousearea.pressed&count%2==0
                changes: [
                    PropertyChanges{
                        target:innerRec;
                        anchors.leftMargin: 1;
                        anchors.rightMargin: 50;
                        restoreEntryValues: false;
                    }
                ]
            },
            State{
                name:"right";
                when:mousearea.pressed&count%2==1
                changes:[
                    PropertyChanges{
                        target:innerRec;
                        anchors.leftMargin: 50;
                        anchors.rightMargin: 1;
                        restoreEntryValues: false;

                    }
                ]
            }
        ]
    }
    MouseArea{
        id:mousearea
        anchors.fill:parent;
        onPressed: {
            count++;
            if(count%2==0)
                parent.color=initOuterColor;
            else
                parent.color=aferChangedColor;
        }
    }
}

感觉还可以加动画,特效之类的.

回帖

消灭零回复