整理成了一个自定义组件方便调用,下面是完整代码:
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;
}
}
}
感觉还可以加动画,特效之类的.
