对的，这里就是说上面的那个红色的按钮，这里需要了解Qml的动画和状态
这里先把整个按钮的代码写出来，一点一点写
Rectangle
{
id:close_Btn
width: 50
height: 30
color: "transparent"
state: "nomal"
anchors.top: parent.top
anchors.right: parent.right
Text {
id: close_Text
anchors.centerIn: parent
text: qsTr("X")
}
MouseArea
{
id:close_MouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{
close_Btn.state="press"
Qt.quit()
}
onEntered: close_Btn.state="hover"
onExited: close_Btn.state="nomal"
}
states:
[
State
{
name: "nomal"
PropertyChanges
{
target: close_Btn
color:"#777777"
}
},
State
{
name: "hover"
PropertyChanges
{
target: close_Btn
color:"red"
}
},
State
{
name: "press"
PropertyChanges
{
target: close_Btn
color:"blue"
}
}
]
transitions:
[
Transition
{
from: "nomal"
to: "hover"
ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "hover"
to: "press"
ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "press"
to: "nomal"
ColorAnimation
{
target: close_Btn
duration: 100
}
}
]
}
这是一个按钮的大整体代码，可能用过widget那边的人会觉得好多，确实是，不过后期我可能会把这个按钮封装成一个整的Button就可以了，使用起来就会简单好多
id:close_Btn width: 50 height: 30 color: "transparent" state: "nomal" anchors.top: parent.top anchors.right: parent.right
这部分就是这个按钮的基本部分，按钮大小50*30
按钮的背景颜色透明
默认状态为nomal
布局为右上角
Text {
id: close_Text
anchors.centerIn: parent
text: qsTr("X")
}
显示的文本信息，布局为在父级中心布局，文本内容“X”
MouseArea
{
id:close_MouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{
close_Btn.state="press"
Qt.quit()
}
onEntered: close_Btn.state="hover"
onExited: close_Btn.state="nomal"
}
鼠标点击区域，把整个父级设置为鼠标点击区域，同时把鼠标滑入设置为允许。添加鼠标点击事件，当鼠标点击后，将状态改为press，同时推出程序
下面的就是当鼠标滑入是，将状态改为hover，滑出时，将状态改为nomal
states:
[
State
{
name: "nomal"
PropertyChanges
{
target: close_Btn
color:"#777777"
}
},
State
{
name: "hover"
PropertyChanges
{
target: close_Btn
color:"red"
}
},
State
{
name: "press"
PropertyChanges
{
target: close_Btn
color:"blue"
}
}
]
定义按钮的三个状态，这里就是简单的改变一下颜色
transitions:
[
Transition
{
from: "nomal"
to: "hover"
ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "hover"
to: "press"
ColorAnimation
{
target: close_Btn
duration: 100
}
},
Transition
{
from: "press"
to: "nomal"
ColorAnimation
{
target: close_Btn
duration: 100
}
}
]
动画机制，需要绑定目标和时间
ok，目前完成
源码连接：http://download.csdn.net/detail/z609932088/9802022
GitHub：https://github.com/DreamLifeOffice/MyQmlProject
