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

来源：互联网发布：金九银十数据网编辑：程序博客网时间：2024/04/29 22:02

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

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

4 0