【Qt Quick聊天软件练习】二、登录界面搭建

1 主界面

大概长成这样

2 创建登录面板qml文件

新建一个qml文件命名为LoginPanel.qml,首先先把右上角两个圆圈搓出来，一个是缩小，一个是关闭。

main.qml中，定义一下id并调用LoginPanel，主窗口的颜色设置为透明，我想在LoginPanel设置背景颜色以及窗口形状

Window {
    id:main_Window
    visible: true
    width: 400
    height: 460
    title: qsTr("Chat")
    color: "transparent"
    flags: Qt.Window | Qt.FramelessWindowHint

    LoginPanel{}
}

禁用原生态的窗口

flags: Qt.Window | Qt.FramelessWindowHint

接下来是LoginPanel.qml中登录界面的操作：
某些属性为了方便快捷设置，我在顶部进行了声明

    property var fontSize: 20//字体大小
    property var iconSize: 20//图标大小
    property var logoSize: 30//logo大小
    property var funcBtnSize: 15//功能按钮大小
    property var photoImageSize: 90//头像大小
    property var inputL_and_RSpacing: 30//输入左右间隔距离

先来设置背景，同样创建个矩形框，这里我设置了边框以及边角的弧度，由于白色有点过于晃眼睛，所以这里我设置成了浅灰色

    //背景
    Rectangle{
        id:rect_bg
        anchors.fill: parent
        color: "#d7dcdc"
        border.color: "black"
        border.width: 1
        radius: 10
    }

去除边框后，需要设置鼠标按下拖动整个窗口，原理就是记录鼠标按下后的坐标，然后拖动的时候，用窗口的坐标（左上角为原点）+鼠标移动后的坐标-鼠标按下时的坐标

    //鼠标按下拖拽窗口移动
    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton//只检测鼠标左键
        property var _X: 0
        property var _Y: 0
        onPressed: {
            _X = mouseX
            _Y = mouseY
        }
        onPositionChanged: {
            main_Window.x += mouseX - _X
            main_Window.y += mouseY - _Y
        }
    }

左上角的logo，记得要设置下图片的大小，否则看起来锯齿会比较明显sourceSize

    //左上角图标
    Image{
        id:image_Icon
        width: root.logoSize
        height: root.logoSize
        anchors{
            left: parent.left
            leftMargin: 10
            top: parent.top
            topMargin: 10
        }
        source: "Images/FX.png"
        sourceSize: Qt.size(width,height)
    }

右上角的两个圆点，第一个是缩小按钮，第二个是关闭按钮

    //右上角功能按钮
    Row{
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        spacing: 10
        Rectangle{//缩小
            width: root.funcBtnSize
            height: root.funcBtnSize
            radius: width / 2
            color: "#f5b57f"
            MouseArea{
                anchors.fill: parent
                onClicked: main_Window.showMinimized()
            }
        }
        Rectangle{//关闭
            width: root.funcBtnSize
            height: root.funcBtnSize
            radius: width / 2
            color: "#ee8a8a"
            MouseArea{
                anchors.fill: parent
                onClicked: Qt.quit()
            }
        }
    }

头像我暂时没去找好看的图片，这里直接用虚线框代替

    Rectangle{
        id:photoImage
        width: root.photoImageSize
        height: root.photoImageSize
        radius: width / 2
        color: "black"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 50
        Image {
            source: "Images/头像.png"
            anchors.fill: parent
            sourceSize: Qt.size(width,height)
        }
    }

账号、密码的输入区域，这里的账号我限制了长度一个int的大小，密码设置为输入时用黑心圆圈代替，文本输入我还加上了焦点以及Tab切换

//密码、账号
    Column{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: photoImage.bottom
        anchors.topMargin: 50
        spacing: 60
        //账号输入区域
        Rectangle{
            id:rect_ID_BG
            width: root.width * 0.6
            height: 35
            color: "transparent"
            Rectangle{
                width: root.width * 0.6
                height: 1
                color: "black"
                anchors{
                    bottom: parent.bottom
                }

                Image {
                    id:image_ID
                    width: root.iconSize
                    height: root.iconSize
                    sourceSize: Qt.size(root.iconSize,root.iconSize)
                    source: "Images/账号图标.png"
                    opacity: 0.5
                    anchors{
                        bottom: parent.bottom
                        bottomMargin: 5
                    }
                }
                //账号输入
                TextInput{
                    id:textIn_ID
                    anchors{
                        left: parent.left
                        leftMargin: root.inputL_and_RSpacing
                        right: parent.right
                        rightMargin: root.inputL_and_RSpacing
                        bottom: image_ID.bottom
                    }
                    font{
                        pixelSize: root.fontSize
                        bold: true
                    }
                    validator: IntValidator{bottom: 1;top: 2147483647}
                    clip: true
                    focus: true
                    KeyNavigation.tab: textIn_PassWord
                    selectByMouse: true
                }
            }
        }

        //密码输入区域
        Rectangle{
            id:rect_PassWord_BG
            width: root.width * 0.6
            height: 35
            color: "transparent"
            Rectangle{
                width: root.width * 0.6
                height: 1
                color: "black"
                anchors{
                    bottom: parent.bottom
                }
                Image {
                    id:image_PassWord
                    width: root.iconSize
                    height: root.iconSize
                    sourceSize: Qt.size(root.iconSize,root.iconSize)
                    source: "Images/密码图标.png"
                    opacity: 0.5
                    anchors{
                        bottom: parent.bottom
                        bottomMargin: 5
                    }
                }
                //密码输入
                TextInput{
                    id:textIn_PassWord
                    anchors{
                        left: parent.left
                        leftMargin: root.inputL_and_RSpacing
                        right: parent.right
                        rightMargin: root.inputL_and_RSpacing
                        bottom: image_PassWord.bottom
                    }
                    font{
                        pixelSize: root.fontSize
                        bold: true
                    }
                    echoMode:TextInput.Password
                    clip: true
                    focus: true
                    KeyNavigation.tab: textIn_ID
                    selectByMouse: true
                }
            }
        }
    }

最后是登录按钮

    //登录按钮
    Rectangle{
        id:rect_LoginBtn
        width: parent.width * 0.3
        height: parent.height * 0.1
        radius: 10
        border{
            width: 1
            color: "black"
        }

        anchors{
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 20
        }

        Text {
            id: text_Login
            text: qsTr("登 录")
            font{
                pixelSize: 18
                bold: true
            }
            anchors.centerIn: parent
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {

            }
        }
    }

整体下来就是长这样子，一个比较简单的界面搭建，没有太出众的美术天赋，只能说具备了基本的界面

3 补充

昨天搞忘了记住密码、忘记密码、注册账号这三个文本🐷，今天补上
记住密码

//记住密码
    Rectangle{
        id:rect_RTP
        width: 20
        height: 20
        radius: 5
        color: "transparent"
        border.color: "black"
        border.width: 1
        opacity: 0.5
        anchors{
            left: col_input.left
            top:col_input.bottom
            topMargin: 5
        }
        property bool bPitchOn: false

        Rectangle{
            id:rect_ok
            visible: rect_RTP.bPitchOn
            width: parent.width * 0.7
            height: parent.height * 0.7
            anchors.centerIn: parent
            radius: 5
            color: "green"
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                if(false === rect_RTP.bPitchOn){
                    rect_ok.visible = true
                    rect_RTP.bPitchOn = true
                }
                else{
                    rect_ok.visible = false
                    rect_RTP.bPitchOn = false
                }
            }
        }
    }
    Text {
        id: text_RTP
        text: qsTr("记住密码")
        opacity: 0.5
        font{
            bold:true
            pixelSize: root.fontSize - 4
        }
        anchors{
            left: rect_RTP.right
            leftMargin: 5
            verticalCenter: rect_RTP.verticalCenter
        }
    }

忘记密码

    //忘记密码
    Text {
        id: text_ForgetPassWord
        text: qsTr("忘记密码")
        opacity: 0.5
        font{
            bold:true
            pixelSize: root.fontSize - 4
        }
        anchors{
            right: col_input.right
            verticalCenter: rect_RTP.verticalCenter
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {

            }
        }
    }

注册账号

    //注册账号
    Text {
        id: text_RegisterAnAccount
        text: qsTr("注册账号")
        opacity: 0.5
        font{
            bold:true
            pixelSize: root.fontSize - 4
        }
        anchors{
            left: parent.left
            leftMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {

            }
        }
    }

界面展示：

✨结语✨

由于界面没有太复杂的连带逻辑，所以只算是完成了可视化界面的搭建，注册界面、账号密码的存储等功能就下期再说吧，(●ˇ∀ˇ●)