QML与C++交互 登陆界面设计

               

QML与C++交互:登陆界面设计

本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.

环境：

主机:WIN7

开发环境:Qt5.2.1

说明:

QML设计前台界面,C++后台负责逻辑

效果图:

源代码:

前台qml文件

login.qml

/**********************************************************************                            登陆界面qml文件*                       (c)copyright 2014,jdh*                         All Right Reserved*新建日期:2014/4/29 by jdh*修改日期:2014/4/30 by jdh*修改日期:2014/5/4 by jdh*修改日期:2014/5/5 by jdh**********************************************************************/import QtQuick 2.0import "content"import Login_Gui 1.0Rectangle{    id: login    width: 320; height: 512    SystemPalette { id: activePalette }    //C++组件:用户界面    Login_Gui    {        id:login_gui        onSig_login_result:        {            //关闭登陆动画            load_gif.opacity = 0            //根据登陆结果处理            switch (result)            {            //登陆成功            case 0:                message.text = "登陆成功"                message.opacity = 1                break;            //无此用户名            case 1:                message.text = "登陆失败:无此用户名"                message.opacity = 1                break;            //密码错误            case 2:                message.text = "登陆失败:密码错误"                message.opacity = 1                break;            //达到最大登陆次数            case 3:                message.text = "登陆失败:达到最大登陆次数"                message.opacity = 1                break;            }        }    }    //背景图片    Image    {        id: background        anchors { top: parent.top; bottom: parent.bottom }        anchors.fill: parent        source: "pics/pic1.png"        fillMode: Image.PreserveAspectCrop    }    //消息框    Message    {        id: message        font_size: login.height * 0.03        anchors {
   centerIn: parent}        opacity: 0    }    //登陆动画    AnimatedImage    {        id: load_gif; source: "pics/load.gif"        anchors {
   horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter}        z: 100        opacity: 0    }    //顶栏    Item    {        id: top_bar        width: login.width; height: login.height * 0.06        anchors.top: parent.top        Text        {            id: title            anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }            //text: "登陆"            text: "登陆"            font.bold: true            font.pointSize: login.height * 0.06 * 0.4            color: "dark red"        }    }    //空白栏    Item    {        id: space1        width: login.width; height: login.height * 0.1        anchors.top: top_bar.bottom    }    //登陆框    Rectangle    {        id: rect1        width: login.width * 0.8; height: login.height * 0.3        anchors { top: space1.bottom; horizontalCenter: parent.horizontalCenter }        border.color: "#707070"        color: "transparent"        radius: 8        Row        {            spacing: rect1.width * 0.05            Item            {                width: rect1.width * 0.05; height: rect1.height            }            Column            {                spacing: rect1.height * 0.025                Item                {                    width: rect1.width * 0.8; height: rect1.height * 0.05                }                LineInput                {                    id: txt_user_id                    width: rect1.width * 0.8; height: rect1.height * 0.2                    font_size:height * 0.7                    //anchors {horizontalCenter: rect1.horizontalCenter; top: rect1.top; topMargin: 8}                    hint: "请输入用户号"                    text:login_gui.user_id                }                LineInput                {                    id: txt_password                    width: rect1.width * 0.8; height: rect1.height * 0.2                    font_size:height * 0.7                    //anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top;  bottomMargin: rect1.height * 0.1}                    hint: "请输入密码"                    text:login_gui.password                }                Row                {                    spacing: rect1.width * 0.1                    Button                    {                        id: btn_login                        width: rect1.width * 0.35; height: rect1.height * 0.2                        //anchors { left: rect1.left; leftMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }                        text: "登陆"                        onClicked: login_req()                    }                    Button                    {                        id: btn_quit                        width: rect1.width * 0.35; height: rect1.height * 0.2                        //anchors { right: rect1.right; rightMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }                        text: "退出"                        onClicked:                        {                            Qt.quit();                        }                    }                }                Row                {                    spacing: rect1.width * 0.1                    CheckBox                    {