Qml结合声网Agora SDK创建视频通话项目（一）：Qml创建自定义登录模块

0、前言

音视频通话是现在通讯类项目必备的一个功能，刚好对声网agora感兴趣，如今以一个音视频通话项目来复习或者说学习被自己遗忘了的qml技术，qwidgets如今已经很成熟，处于一个维护状态，之后qml将处于一个蓬勃发展的阶段。qml构建快速、美观的用户界面，也处理部分业务逻辑，而核心逻辑交给C++来处理，这使得ui与逻辑进行了分离。

1、项目简介

项目简单绘制：

1.1 登录页面的绘制

 

绘制页面时采用：设计器与手写结合。

源码：

import QtQuick 2.4
import QtQuick.Controls 1.0
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4


/*
      author:zhen.ma
      date  :20200625
      description: 登录框
    */
Item {
    id: root
    // 基本属性设置
    // 第一个输入框旁边的标签
    property string textName1: qsTr("text1")
    // 第一个输入框的placeholder
    property string myPlaceholder1: qsTr("hello")
    // 第二个输入框旁边的标签
    property string textName2: qsTr("text2")
    // 第二个输入框的placeholder
    property string myPlaceholder2: qsTr("hello2")
    // 头像文件路径
    property string iconPath: qsTr("icon.png")
    // 头像是否显示
    property bool showIcon: true
    // 绑定账户以及密码输入框的值，父组件中使用
    property string _account: account.text
    property string _password: password.text
    // 信号
    signal loginClicked
    signal cancelClicked
    width: 300
    height: 200
    Rectangle {
        id: rectangle1
        width: 310
        anchors.fill: parent
        color: "#dce7dc"
        radius: 10
        anchors.topMargin: 0
        Column {
            id: column
            anchors.verticalCenterOffset: 36
            anchors.horizontalCenterOffset: 0
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: 10
            Row {
                id: row
                spacing: 10

                Text {
                    id: label
                    text: textName1
                    anchors.verticalCenter: account.verticalCenter
                }

                TextField {
                    id: account
                    width: 170
                    placeholderText: myPlaceholder1
                    background: Rectangle {
                        width: parent.width
                        radius: 4
                    }
                    validator: RegExpValidator {
                        regExp: /\w{8}$/
                    }
                }
            }

            Row {
                id: row1
                spacing: 10
                Text {
                    id: label1
                    text: textName2
                    anchors.verticalCenter: password.verticalCenter
                }

                TextField {
                    id: password
                    width: 170
                    transformOrigin: Item.Center
                    placeholderText: myPlaceholder2
                    echoMode: TextField.Password
                    passwordCharacter: "*"
                    background: Rectangle {
                        width: parent.width
                        radius: 4
                    }
                }
            }

            Row {
                width: 120
                anchors.right: parent.horizontalCenter
                anchors.rightMargin: -83
                layoutDirection: Qt.LeftToRight
                Button {
                    id: loginBtn
                    x: 32
                    text: qsTr("登录")
                    background: Rectangle {
                        radius: 3
                    }
                    onClicked: {
                        root.loginClicked()
                    }
                }
                spacing: 30
                Button {
                    id: cancelBtn
                    text: qsTr("取消")
                    background: Rectangle {
                        radius: 3
                    }
                    onClicked: {
                        root.cancelClicked()
                    }
                }
            }
        }

        Rectangle {
            id: rectangle
            visible: showIcon
            x: 148
            y: 19
            width: 50
            height: 50
            color: "#edf6f9"
            radius: 25
            anchors.horizontalCenterOffset: 10
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: column.top
            anchors.bottomMargin: 21
            border.color: "#e5f634"
            border.width: 1
            Image {
                id: icon
                anchors.rightMargin: 0
                anchors.bottomMargin: 1
                anchors.leftMargin: 0
                anchors.topMargin: -1
                anchors.fill: parent
                source: iconPath
            }
        }
    }
}

 在其他模块中的使用：

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.platform 1.1
import "qrc:/component/"
import io.zhenma.userlogin 1.0

Window {
    visible: true
    width: 640
    height: 480
    color: "#9cd97f"
    title: qsTr("xxx system")
    flags: Qt.FramelessWindowHint

    LoginComponent {
        id: login
        anchors.centerIn: parent
        showIcon: true
        // 头像（有默认的，也可以自行修改）
        // iconPath: "file:///c:/Users/mazhen/Pictures/Camera Roll/weixin.jpg"
        textName1: "账户:"
        myPlaceholder1: "请输入用户名"
        textName2: "密码:"
        myPlaceholder2: "请输入密码"

        // 第一种方式
        onLoginClicked: {
            //            userlogin.setUrl("http://127.0.0.1:3000?username=" + login._account
            //                             + "&password=" + login._password)
            userlogin.url = "http://127.0.0.1:3000?username=" + login._account
                    + "&password=" + login._password
            console.log("login event")
            console.log("account: " + login._account + " password: " + login._password)
            var result = userlogin.login(login._account, login._password)
            console.log(result)
        }
        onCancelClicked: {
            console.log("取消事件")
        }
    }

    // 第二种连接方式
    //    Connections {
    //        target: login
    //        onLoginClicked: {
    //            console.log("yellow light is on")
    //        }
    //    }
    }
}

上面使用时只列举了部分属性，也可以对模块的信号进行响应，使用槽函数的方式：

例如：signal loginClicked             响应：onLoginClicked：{}

2、总结

本文实践了qml搭建简单页面的方法以及怎么使用模块的方法。本次先到这里，一点一滴慢慢来，争取做到井井有条。