仿手机上的按钮,特别简单

[attachment=18151][attachment=18152]
整理成了一个自定义组件方便调用,下面是完整代码:
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;
        }
    }
}

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

angelus	2017-11-14 16:09
官方的组件库不是有这种组件吗? 自己设置个风格就行了,也不需要自己去从头实现!

newbe	2017-11-14 17:23
angelus:官方的组件库不是有这种组件吗? 自己设置个风格就行了,也不需要自己去从头实现! (2017-11-14 16:09) 受教了.

liuchangyin	2017-11-15 10:21