Java教程

Qt6.2.4 qml 实现登录注册及显示详情demo

本文主要是介绍Qt6.2.4 qml 实现登录注册及显示详情demo,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

参考

  • https://www.bilibili.com/video/BV1dS4y1u7vN?spm_id_from=333.999.0.0 (很棒的教程)

环境

环境 版本
windows 10
QT 6.2.4
Qt Creator 8.0.1 (Community)
qmake

config.ini 文件会自动在项目目录下生成

  • signal 使用信号和槽实现事件监听、参数传递
  • 父组件实现函数,子组件调用,实现复用
  • anchors 锚点实现节点位置调整
  • Settings 实现数据保存本地与读取
  • Popup 实现弹出框提醒

效果展示

gif演示

image

项目结构截图

image

登陆注册详情页展示

image

image

image

代码

  1. main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.settings

Window {
    id: mainWindow
    width: 640
    height: 480
    visible: true
    title: qsTr("主窗口")
    // 点击登录处理函数
    function onLoginChange(userName,userPass){
        console.log(userName,userPass)
    }
    // 点击退出处理函数
    function onAppExit(){
         mainWindow.close()
    }
    LoginWindow {
        id: loginPage
        visible: true
        anchors.centerIn: parent
       // 接受信号第一种(多处调用推荐):可以调用公共方法,但是接收参数要与信号一致
      //  onLoginChange:  mainWindow.onLoginChange(name,password)
        // 接受信号第二种(只在这里使用的方法推荐这种):匿名函数方式,参数可以不与信号参数一致
        onLoginChange:  function(userName,userPass){
            loginPage.visible = false
            userInfoPage.visible = true
        }
        // 切换到注册界面
        onChangePageToReg: {
            loginPage.visible = false
            regUserPage.visible = true
        }
        // 接受信号
        onAppExit: mainWindow.onAppExit()
    }
    UserInfo {
        id: userInfoPage
        visible: false
        anchors.centerIn: parent
        // 切换到登录界面
        onChangePageToLogin: {
            userInfoPage.visible = false
            loginPage.visible = true
        }
    }

    RegUser {
        id: regUserPage
        visible: false
        anchors.centerIn: parent
        // 接受信号
        onAppExit: mainWindow.onAppExit()
        // 切换到登录界面
        onChangePageToLogin: {
            regUserPage.visible = false
            loginPage.visible = true
        }
    }
}

  1. LoginWindow.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.settings


Rectangle{
    id: loginPage
    width: 300
    height: 120
    // 发送登录信号
    signal loginChange()
    // 发送切换到reg注册界面信号
    signal changePageToReg()
    // 退出信号
    signal appExit()
    // 配置
    Settings {
        id: settings
        fileName: "./config.ini"
        property string userName
        property string userPass

    }

    Grid{
        id: userInfoList
        columns: 2
        rows : 2
        spacing: 10
        anchors.horizontalCenter:loginPage.horizontalCenter
        topPadding: 10
        Text{
            text: "用户名:"
        }
        TextField {
            id:userName
        }
        Text{
            text: "密码:"
        }
        TextField {
            id:userPass
            echoMode: TextField.Password
        }
    }
    Popup {
        id: loginMessageBox
        visible: false
        anchors.centerIn: parent
        width: parent.width
        height: 40
        modal: true
        Text{
            id: loginMessageBoxText
            anchors.centerIn: parent
            text:"出错啦"
            width: parent.width
        }
    }
    Row{
        spacing: 10
        anchors.bottom: loginPage.bottom
        anchors.horizontalCenter:loginPage.horizontalCenter
        Button{
            text:"登录"
            onClicked:{
                if(settings.userName !== userName.text || settings.userPass !== userPass.text){
                    loginMessageBox.visible = true
                    loginMessageBoxText.text = "账号密码错误或者不存在该用户";
                    return console.log(loginMessageBoxText.text)
                }
                // 发送登录信号
                loginChange()
            }
        }
        Button{
            text:"切换注册"
            onClicked:{
                // 发送切换到reg注册界面信号
                changePageToReg()
            }
        }
        Button{
            text:"退出登录"
            onClicked:{
                // 发送退出信号
                appExit()
            }
        }
    }

}


  1. RegUser.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.settings

Rectangle{
    id: regUserPage
    width: 300
    height: 120
    // 切换登录
    signal changePageToLogin()
    // 退出信号
    signal appExit()
    // 配置
    Settings {
        id: settings
        fileName: "./config.ini"
        property string userName
        property string userPass
    }
    //
    Grid{
        id: regUserInfoList
        columns: 2
        rows : 4
        spacing: 10
        anchors.horizontalCenter:regUserPage.horizontalCenter
        topPadding: 10
        Text{
            text: "用户名:"
        }
        TextField {
            id: userName
        }
        Text{
            text: "密码:"
        }
        TextField {
            id: userPass
            echoMode: TextField.Password
        }
        Text{
            text: "性别:"
        }
        TextField {

        }
    }
    Row{
        spacing: 10
        anchors.bottom: regUserPage.bottom
        anchors.horizontalCenter:regUserPage.horizontalCenter
        Button{
            text:"注册"
            onClicked:{
                console.log(userName, userPass);
                settings.userName = userName.text
                settings.userPass = userPass.text
                changePageToLogin()
            }
        }
        Button{
            text:"切换登录"
            onClicked:{
                changePageToLogin()
            }
        }
        Button{
            text:"退出登录"
            onClicked:{
                // 发送退出信号
                appExit()
            }
        }
    }

}


  1. UserInfo.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.settings

Rectangle{
    id: userInfoPage
//    border.width: 5
//    border.color: "black"
    width: 300
    height: 120
    // 切换登录
    signal changePageToLogin()
    // 配置
    Settings {
        id: settings
        fileName: "./config.ini"
        property string userName
        property string userPass
    }
    Grid{
        id: userInfoList
        columns: 2
        rows : 4
        spacing: 10
        anchors.horizontalCenter:userInfoPage.horizontalCenter
        topPadding: 10
        Text{
            text: "用户名:"
        }
        TextField {
            id: userName
            text:settings.userName
        }
        Text{
            text: "密码:"
        }
        TextField {
            id: userPass
            text:settings.userPass
        }
        Text{
            text: "性别:"
        }
        TextField {

        }
    }
    Row{
        spacing: 10
        anchors.bottom: userInfoPage.bottom
        anchors.horizontalCenter:userInfoPage.horizontalCenter
        Button{
            text:"更新"
            onClicked:{
                console.log(userName, userPass);
                settings.userName = userName.text
                settings.userPass = userPass.text
                changePageToLogin()
            }
        }
        Button{
            text:"退出登录"
            onClicked:{
                changePageToLogin();
            }
        }
    }

}


这篇关于Qt6.2.4 qml 实现登录注册及显示详情demo的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!