Qt-第一个QML程序-3-自定义一个按钮

项目基本信息前两个已经说了，这里直接放下运行截图，

对的，这里就是说上面的那个红色的按钮，这里需要了解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