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

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

Qt-第一个QML程序-3-自定义一个按钮_第1张图片

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




你可能感兴趣的:(Qt,QML)