Qml和C++开发的学生信息管理软件一

一个月前接触到了Qml，也做过一些练习，但只能实现动画和简单的布局功能，逻辑部分和数据处理很难上手，看到许多人将C++和结合起来，Qml负责界面设计，C++实现逻辑处理，但将C++注册到 Qml中一直让我头疼，比如属性声明和函数声明类想不通为什么这么做，可能是时间问题吧，慢慢的就发现了其实也不难，花了好几天做成了这个小应用，算是这一阶段的小小纪念吧。

下来就是贴代码的时间了.

先是main.qml

启动时先进入登录界面

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import Login_gui 1.0
import QtQuick.Particles 2.0

Window {
    visible: true
    id:mainwindow
    width: 300
    height: 533
    color: "#F0F0F0"
    LoginDialog {}
}

LoginDialog的代码如下：

import QtQuick 2.0
import Login_gui 1.0
import QtQuick.Controls 1.1
Rectangle {
               id:loginsence
               width: 300
               height: 533
               color: "#F0F0F0"
               visible: true
               x:300
               Component.onCompleted: {
                   x=0;
               }
               Behavior on x {
                   NumberAnimation {easing.type:Easing.OutQuint;duration: 1100}//OutQuint动画效果 结束时速度变慢
               }

property string userselect
/*************************************************************************************/
     //登陆请求函数
     function login_req()
       {
            //判断用户名是否有效
            if (userinput.text== "")
            {
                message.text = "请输入用户名!"
                message.opacity = 1
                return
            }
             //判断密码是否有效
              if (passwordinput.text == "")
                   {
                       message.text = "请输入密码!"
                       message.opacity = 1
                       return
                   }
               //显示登陆动画
                load_gif.opacity = 1
                //登陆请求
                //console.log("***********************")
                login_gui.user_id = userinput.text
                login_gui.password = passwordinput.text
                login_gui.slot_login_req()
       }

 /*************************************************************************************/
       Login_gui{
       id:login_gui
       property var loginstudent
       onSig_login_result:
            {
                    //关闭登陆动画
                     load_gif.opacity = 0
                    //根据登陆结果处理
                    switch (result)
                    {
                    //登陆成功
                    case 0:
                        message.text = "登陆成功"
                        message.opacity = 1
                        if(userselect=="studentselect " )
                        {  loginstudent= Qt.createComponent("StudentDialog.qml").createObject(loginsence);break; }
                        else
                        { loginstudent= Qt.createComponent("TeacherDialog.qml").createObject(loginsence);break; }
                    //无此用户名
                    case 1:
                        message.text = "登陆失败:无此用户名"
                        message.opacity = 1
                        break;
                    //密码错误
                    case 2:
                        message.text = "登陆失败:密码错误"
                        message.opacity = 1
                        break;
                    case 3:
                        message.text = "登陆失败:请选择登录类型"
                        message.opacity = 1
                    }
            }
    }
/************************************************************************/
        Rectangle  //顶栏
            {
                id: top_bar
                anchors.left: parent.left;
                anchors.leftMargin: parent.width/2;
                anchors.top: parent.top;
                anchors.topMargin: 10;
                border.color: "#707070"
                Text
                {
                    id: title
                    anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
                    text: "登陆"
                    font.bold: true
                    font.pixelSize: mainwindow.height/25;
                    color: "blue"
                }
            }
    /**************************************************************/
        //用户名框
        Rectangle{
              id:loginBox
              height:parent.height/16;width:parent.width;
              anchors.left: parent.left;
              anchors.leftMargin:0;
              anchors.top: parent.top;
              anchors.topMargin: 150;
              color:"white"
          Row{
              spacing:1
              Rectangle//用户名框
              {  id:user
                  height:loginBox.height;width:loginBox.width/4;
                  anchors.left: loginBox.left;
                  anchors.leftMargin:0;
                  anchors.bottom: loginBox.bottom;
                  anchors.bottomMargin: 0;
                  Text{
                     text: "用户名:";
                     anchors.left: parent.left;
                     anchors.leftMargin:0;
                     anchors.bottom: parent.bottom;
                     anchors.bottomMargin: 0;
                     font.bold:false
                     font.family: "微软雅黑"
                     color:"black"
                     font.pointSize: 15
                  }
              }
           Rectangle//用户名输入框
           {
            id:loginuser
            height:loginBox.height;width:loginBox.width-user.width;
            anchors.left: loginBox.left;
            anchors.leftMargin:user.width;
            anchors.bottom: loginBox.bottom;
            anchors.bottomMargin: 0;
            TextInput
                {  id:userinput
                    anchors.left: parent.left;
                    anchors.leftMargin:0;
                    anchors.bottom: parent.bottom;
                    anchors.bottomMargin: 0;
                    width: parent.width
                    height: parent.height/2
                    font.family: "微软雅黑"
                    font.pointSize: 15
                    focus: true
                    color:"black"
                    text: "王红"
                   // MouseArea { anchors.fill: user;onClicked: user.selectAll()}
                }
            }
        }
    }
/************************************************************************/
        //密码框
        Rectangle{
              id:passwordBox
              height:parent.height/16;width:parent.width;
              anchors.left: parent.left;
              anchors.leftMargin:0;
              anchors.top: parent.top;
              anchors.topMargin: loginBox.height+151;
              color:"white"
              Row{
                  spacing: 1
                  Rectangle//密码框
                  {  id:password
                      height:passwordBox.height;width:passwordBox.width/4;
                      anchors.left: passwordBox.left;
                      anchors.leftMargin:0;
                      anchors.bottom: passwordBox.bottom;
                      anchors.bottomMargin: 0;
                      Text{
                         text: "密   码:";
                         anchors.left: parent.left;
                         anchors.leftMargin:0;
                         anchors.bottom: parent.bottom;
                         anchors.bottomMargin: 0;
                         font.family: "微软雅黑"
                         font.pointSize: 15
                      }
                  }
                  Rectangle{   //密码输入框
                   id:loginpassword
                   height:passwordBox.height;width:passwordBox.width-password.width;
                   anchors.left: passwordBox.left;
                   anchors.leftMargin:password.width;
                   anchors.bottom: passwordBox.bottom;
                   anchors.bottomMargin: 0;
                   color:"white"
                   TextInput{
                       id:passwordinput
                       text: "1234567"
                       anchors.left: parent.left;
                       anchors.leftMargin:0;
                       anchors.bottom:  parent.bottom;
                       anchors.bottomMargin: 0;
                       width: parent.width
                       height: parent.height/2
                       font.family: "微软雅黑"
                       font.pointSize: 15
                       // MouseArea { anchors.fill: password;onClicked: password.selectAll()}

                   }
           }
       }
    }
/************************************登录*******************************************/
        Rectangle{
            id: loginbutton
            anchors.left: parent.left
            anchors.leftMargin: 6
            anchors.top: passwordBox.top
            anchors.topMargin: parent.width/4.2;
            width: parent.width-12;
            height: passwordBox.height;
            radius: 5 //倒角
            color:"#19cff7"
            Text{
                anchors.horizontalCenter: parent.horizontalCenter  //水平中心
                anchors.verticalCenter:parent.verticalCenter  //垂直中心
                text:"登录"
                font.family: "华文细黑"
                styleColor: "white"
                font.pointSize: 15
            }
            MouseArea {
                anchors.fill: parent;
                onClicked:{console.log(passwordinput.text); login_req()}

            }
        }
/************************************登录动画*****************************************/
        AnimatedImage
            {
                id: load_gif ;
                source: "qrc:/new/prefix1/image/login.gif"
                anchors {horizontalCenter: mainwindow.horizontalCenter;verticalCenter:mainwindow.verticalCenter}
                y: 180; x:90
                opacity: 0
            }

/***************************************信息框*************************************/
            Rectangle{
                anchors.horizontalCenter: parent.horizontalCenter  //水平中心
                anchors.bottom: loginBox.bottom
                anchors.bottomMargin:45;
                width:  loginbutton.width/2;
                height:  loginbutton.height/2;
                radius: 3 //倒角
                color: "#F0F0F0"
                Text{
                    id:message
                    anchors.horizontalCenter: parent.horizontalCenter  //水平中心
                    anchors.verticalCenter:parent.verticalCenter  //垂直中心
                    font.family: "华文细黑"
                    styleColor: "black"
                    font.pointSize: 10
                    opacity: 0
                       }

                 }
/****************************注册*************************************/
    Rectangle{
               id:newuserrer
               anchors.right: parent.right;
               anchors.rightMargin: 28;
               anchors.bottom: parent.bottom;
               anchors.bottomMargin: 35;
               Text
                       {
                           id: newuser
                           anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
                           text: "新用户"
                           font.family: "华文细黑"
                           font.pixelSize: 12

                           color: "#3aa7ea"
                           MouseArea {
                               anchors.fill: parent;
                               property var login
                                                onClicked:
                                                          {
                                                               login= Qt.createComponent("NewUserDialog.qml").createObject(loginsence);
                                                               loginsence.deleteLater();
                                                          }
                                              }
                       }

                   }
/****************************登录类型*************************************/

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter  //水平中心
        anchors.bottom:loginbutton.bottom;
        anchors.bottomMargin: (loginbutton.y-passwordBox.y+loginbutton.height)/2
        ExclusiveGroup {
            id: language;
        }
        Row {
            anchors.centerIn: parent;
            spacing:loginsence.width/4.5
            CheckBox {
                id:student
                text: "学生登录";
                exclusiveGroup: language;
                onCheckedChanged: {     if(checked){login_gui.student=true;login_gui.teacher=false;userselect="studentselect " } }
            }

            CheckBox {
                id:teacher
                text: "教师登录";
                exclusiveGroup: language;
                onCheckedChanged: {   if(checked){ login_gui.teacher=true;login_gui.student=false;userselect="teacherselect"}  }
            }
        }
     }

 /************************************************************************************/
}

---

没什么难点，主要是界面布局费点事，定义了一个属性property string userselect来标标识是管理员登录还是学生登录，以便进图不同的界面。还有就是使用Textinput是，需要设置高度和宽度，否则无法输入文字，这个很是奇怪，我觉得软件做的不够人性化，好了，今天就先到这里了。