＜QML_JanQuickDemo＞一、登录界面

LongMAO丶

已于 2022-09-20 09:06:25 修改

阅读量630

点赞数 3

分类专栏： JanQuickDemo 文章标签：开发语言 qt qt5

于 2022-09-19 15:45:09 首次发布

本文链接：https://blog.csdn.net/Aike_li/article/details/126928665

版权

JanQuickDemo 专栏收录该内容

4 篇文章 4 订阅

订阅专栏

前言

本系列文章记录一下用之前写的JanQuick_ElementUI控件库的使用，摸鱼写了个demo，随缘更新。没看过之前写的控件库可以点连接了解一下。

本篇的demo源码地址放在末尾，有需要的读者可以自取

开发环境

Qt 5.13.2 + Qt Creator 4.10.1 + MSVC2017/MinGW_64

登录页面展示

代码结构

Demo以main.qml为入口，登录界面和主要内容用Stackview加载切换，加上一个EToast作为全局提示。代码如下：

Main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

import EUIpackage 1.0
import EControl 1.0
import "./qmlFile"

Window {
    id:rootWin
    visible: true
    width: 1440
    height: 900
    maximumWidth: 1440
    maximumHeight: 900
    minimumWidth: 1440
    minimumHeight: 900
    title: qsTr("JanQuick")
    flags: Qt.Window

    property int rootWinX //用来存储主窗口x坐标
    property int rootWinY //存储窗口y坐标
    property int xMouse //存储鼠标x坐标
    property int yMouse //存储鼠标y坐标

    property string currentUser: ""
    StackView{
        id:stackView
        width: parent.width
        height: parent.height
        initialItem:loginPageCom
        background: Rectangle{
            anchors.fill: parent
            radius: 8
        }
    }

    //登录页面组件
    Component{
        id:loginPageCom
        LoginPage{
            id:loginPage
            onSigSuccessLogin:{
                currentUser = userName
                stackView.push(systemPageCom)
            }
        }
    }

    //系统页面组件
    Component{
        id:systemPageCom
        SystemPage{
            id:systemPage
            onSigSignout: {
                stackView.pop()
            }
            Component.onCompleted: {
                var headPortraitUrl = DataHandleVM.getInfoByUser(currentUser,"avatarUrl").toString()
                loginUser(currentUser,headPortraitUrl)
            }
        }
    }

    //全局toast提示
    EToast{
        id:eToast
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

登录页面代码

登录页面主要就是对控件的排版外加一个login函数，没什么特别的之初。login函数如下所示：

function login(){                if(DataHandleVM.checkAccount(accountInput.text,passwordInput.text)){                            sigSuccessLogin(accountInput.text)        
        } 
        else{
                passwordInput.cusIsError = true            
                eToast.showToast("密码或密码错误",EToast.StyleEnum.ERROR)        
        }
}

DataHandleVM是一个c++类注册到qml的实例对象，用于完成一些数据处理和业务逻辑处理

LoginPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
import Qt.labs.settings 1.0

import EUIpackage 1.0
import EControl 1.0

Item {
    width: 1440
    height: 900
    signal sigSuccessLogin(var userName)
    Component.onCompleted: {
        if(mySettings.autoLogin){
            autoLoginTimer.start()
        }
    }

    //自动登录延时计时器 300ms后自动登录
    Timer{
        id:autoLoginTimer
        interval: 300
        running: false
        repeat: false
        onTriggered: {
            login()
        }
    }

    //注册表，记住密码使用
    Settings{
        id:mySettings
        category:"LoginSetting"
        property bool autoLogin: autoLoginBox.checked
        property string account: accountInput.text
        property string password:passwordInput.text
    }

    //左侧简介区域
    Rectangle{
        width: parent.width/2
        height: parent.height
        color: EColor.bgColor(EColor.BGColor_1)
        Item{
            width: parent.width
            height: logoText.height+introduceText.height+10
            anchors.centerIn: parent
            Text {
                id: logoText
                width: contentWidth
                height: contentHeight
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 38
                font.family: EFont.textHanSansMedium
                text: qsTr("JanQuick")
                color: EColor.mainColor(EColor.MColor_1)
            }
            Text {
                id:introduceText
                anchors.top: logoText.bottom
                anchors.topMargin: 10
                width: contentWidth
                height: contentHeight
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 21
                font.family: EFont.textHanSansNormal
                text: qsTr("这是一个用JanQuick_Eui控件库写的Demo")
                color: EColor.textColor(EColor.Text_Routine)
            }
        }
    }

    //右侧登录区域
    Rectangle{
        width: parent.width/2
        height: parent.height
        anchors.right: parent.right
        color: "white"
        Item {
            width: 250
            height: 320
            anchors.centerIn: parent
            EBaseTabBar{
                id:tabBar
                height: 32
                width: parent.width
                cusModel: ["账号密码登录","手机登录"]
                cusBotPlaceLineCor:"white"
                cusTextSize:18
                cusSpacing: 34
                onCurrentIndexChanged: {
                    if(currentIndex ===1){
                        eToast.showToast("暂无手机登录功能",EToast.StyleEnum.WARNING)
                    }
                }
            }
            Column{
                width: parent.width
                anchors.top: tabBar.bottom
                anchors.topMargin: 30
                spacing: 20
                EBaseInput{
                    id:accountInput
                    width: parent.width
                    height:40
                    placeholderText:"请输入账号"
                    text:mySettings.account
                }
                EPasswordInput{
                    id:passwordInput
                    width: parent.width
                    height:40
                    placeholderText:"请输入密码"
                    text:mySettings.password
                    onAccepted: {
                        login()
                    }
                }

                Item{
                    height: 22
                    width: parent.width
                    ECheckbox{
                        id:autoLoginBox
                        text: "自动登录"
                        cusIconSize:14
                        height: parent.height
                        checked: mySettings.autoLogin
                    }
                    Text {
                        width: contentWidth
                        height: contentHeight
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        font.pixelSize: 14
                        font.family: EFont.textHanSansNormal
                        color: EColor.mainColor(EColor.MColor_1)
                        text: "忘记密码"
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: {
                                eToast.showToast("暂无忘记密码功能",EToast.StyleEnum.WARNING)
                            }
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                            }
                            onExited: {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                    }
                }
                EMainBtn{
                    width: parent.width
                    height: 40
                    cusText: "立即登录"
                    onClicked: {
                        login()
                    }
                }
                Item{
                    height: 22
                    width: parent.width
                    Text {
                        id: otherText
                        width: contentWidth
                        height: contentHeight
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        font.pixelSize: 14
                        font.family: EFont.textHanSansNormal
                        color: EColor.textColor(EColor.Text_Routine)
                        text: "其他登录方式"
                    }
                    Text {
                        width: contentWidth
                        height: contentHeight
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        font.pixelSize: 14
                        font.family: EFont.textHanSansNormal
                        color: EColor.mainColor(EColor.MColor_1)
                        text: "账号注册"
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: {
                                var obj = {account:"test",password:"123456",url:""}
                                DataHandleVM.registerAccount(obj)
                                eToast.showToast("暂无注册功能",EToast.StyleEnum.WARNING)
                            }
                            onEntered: {
                                cursorShape = Qt.PointingHandCursor
                            }
                            onExited: {
                                cursorShape = Qt.ArrowCursor
                            }
                        }
                    }
                }
            }//end Column
        }//end contentitem
    }//end rightbg

    //登录函数
    function login(){
        if(DataHandleVM.checkAccount(accountInput.text,passwordInput.text)){
            sigSuccessLogin(accountInput.text)
        }
        else{
            passwordInput.cusIsError = true
            eToast.showToast("密码或密码错误",EToast.StyleEnum.ERROR)
        }
    }
}