QMLを使用してこれを実行したい場合は、非常に簡単です。これは私が約1分で作ったものの簡単なデモです。次に、それを使用しているすべてのものに適切に接続する必要があります。これよりももっと凝ったものにしたい場合は、長方形の代わりに画像ファイルを使用することをお勧めします。
import QtQuick 1.1
Rectangle {
width: 360
height: 360
color: "grey"
Item{
id: root
anchors.centerIn: parent
Rectangle{
id: button
radius: 5
color: "transparent"
width: 100
height: 50
smooth: true
Rectangle{
id: leftButton
height: parent.height
width: 45
color: "black"
anchors.left: parent.left
anchors.leftMargin: parent.radius
smooth: true
}
Rectangle{
id:leftButtonEdge
height: parent.height
width: 10
radius: 5
anchors.right: leftButton.left
anchors.rightMargin:-width / 2
color: "black"
smooth: true
}
Rectangle{
id: rightButton
height: parent.height
width: 45
color: "white"
anchors.right: parent.right
anchors.rightMargin: parent.radius
smooth: true
}
Rectangle{
id:rightButtonEdge
height: parent.height
width: 10
radius: 5
anchors.left: rightButton.right
anchors.leftMargin:-width / 2
color: "white"
smooth: true
}
MouseArea{
anchors.fill: parent
onClicked: {
console.log("Clicked")
if(rightButton.color == "#000000"){
rightButton.color = "white"
rightButtonEdge.color = "white"
leftButton.color = "black"
leftButtonEdge.color = "black"
}else{
rightButton.color = "black"
rightButtonEdge.color = "black"
leftButton.color = "white"
leftButtonEdge.color = "white"
}
}
}
}
}
}