Qt-第一个QML程序-4-自定义按钮类，动画，状态

上运行截图

在上面的关闭按钮了，就是我们上篇文章里面写到的那个自定义的按钮，下面的这个text的按钮了，就是使用我们自己定义的一个类，MyButton

import QtQuick 2.0

import QtQuick.Controls 1.4

/************************************************

 Date：2017年4月3日

 Author：DreanLife

 About：写一个自己定义的按钮

 **********************************************/

Rectangle

{

   property string nomal_Image: ""

   property string hover_Image: ""

   property string press_Image: ""

//    property string currentImage: ""

   id:root_Button

   width: 50

   height: 30

   color: "transparent"

   state: "nomal"

   Image

   {

       id: button_Background

       anchors.fill: parent

       fillMode: Image.PreserveAspectFit

       source: nomal_Image

   }

   Text

       id: button_Text

       anchors.centerIn: parent

       text: qsTr("text")

   MouseArea

       id:button_Mousearea

       hoverEnabled: true

       onEntered: root_Button.state="hover"

       onExited: root_Button.state="nomal"

       onPressed:

       {

           root_Button.state="press"

       }

   states:

       [

       State {

           name: "nomal"

           PropertyChanges {

               target:button_Background

               source: nomal_Image

           }

       },

           name: "hover"

               target: button_Background

               source: hover_Image

           name: "press"

               source: press_Image

   ]

   transitions:

       Transition {

           from: "nomal"

           to: "hover"

           PropertyAnimation

           {

               duration: 100

           from: "hover"

           to: "press"

           from: "press"

           to: "nomal"

}

这就是一个类的完整代码了，和上篇没有太多差异，这里就累赘了，下面是这个类的使用的

   MyButton

       id: myButton

       width: 30

       height: 30

       y:30

       anchors.right: parent.right

       nomal_Image: "qrc:/Images/button/1.png"

       hover_Image: "qrc:/Images/button/2.png"

       press_Image: "qrc:/Images/button/3.png"

       state: "nomal"

这个类的使用

源码地址：

https://github.com/DreamLifeOffice/MyQmlProject