项目基本信息前两个已经说了，这里直接放下运行截图，
对的，这里就是说上面的那个红色的按钮，这里需要了解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，目前完成
源码连接：
GitHub：