Qml創建視頻通話項目（一）：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搭建簡單頁面的方法以及怎麼使用模塊的方法。本次先到這裏，一點一滴慢慢來，爭取做到井井有條。