1 主界面

大概长成这样

2 创建登录面板qml文件

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

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

Window {id:main_Windowvisible: truewidth: 400height: 460title: qsTr("Chat")color: "transparent"flags: Qt.Window | Qt.FramelessWindowHintLoginPanel{}
}

禁用原生态的窗口

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_bganchors.fill: parentcolor: "#d7dcdc"border.color: "black"border.width: 1radius: 10}

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

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

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

    //左上角图标Image{id:image_Iconwidth: root.logoSizeheight: root.logoSizeanchors{left: parent.leftleftMargin: 10top: parent.toptopMargin: 10}source: "Images/FX.png"sourceSize: Qt.size(width,height)}

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

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

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

    Rectangle{id:photoImagewidth: root.photoImageSizeheight: root.photoImageSizeradius: width / 2color: "black"anchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 50Image {source: "Images/头像.png"anchors.fill: parentsourceSize: Qt.size(width,height)}}

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

//密码、账号Column{anchors.horizontalCenter: parent.horizontalCenteranchors.top: photoImage.bottomanchors.topMargin: 50spacing: 60//账号输入区域Rectangle{id:rect_ID_BGwidth: root.width * 0.6height: 35color: "transparent"Rectangle{width: root.width * 0.6height: 1color: "black"anchors{bottom: parent.bottom}Image {id:image_IDwidth: root.iconSizeheight: root.iconSizesourceSize: Qt.size(root.iconSize,root.iconSize)source: "Images/账号图标.png"opacity: 0.5anchors{bottom: parent.bottombottomMargin: 5}}//账号输入TextInput{id:textIn_IDanchors{left: parent.leftleftMargin: root.inputL_and_RSpacingright: parent.rightrightMargin: root.inputL_and_RSpacingbottom: image_ID.bottom}font{pixelSize: root.fontSizebold: true}validator: IntValidator{bottom: 1;top: 2147483647}clip: truefocus: trueKeyNavigation.tab: textIn_PassWordselectByMouse: true}}}//密码输入区域Rectangle{id:rect_PassWord_BGwidth: root.width * 0.6height: 35color: "transparent"Rectangle{width: root.width * 0.6height: 1color: "black"anchors{bottom: parent.bottom}Image {id:image_PassWordwidth: root.iconSizeheight: root.iconSizesourceSize: Qt.size(root.iconSize,root.iconSize)source: "Images/密码图标.png"opacity: 0.5anchors{bottom: parent.bottombottomMargin: 5}}//密码输入TextInput{id:textIn_PassWordanchors{left: parent.leftleftMargin: root.inputL_and_RSpacingright: parent.rightrightMargin: root.inputL_and_RSpacingbottom: image_PassWord.bottom}font{pixelSize: root.fontSizebold: true}echoMode:TextInput.Passwordclip: truefocus: trueKeyNavigation.tab: textIn_IDselectByMouse: true}}}}

最后是登录按钮

    //登录按钮Rectangle{id:rect_LoginBtnwidth: parent.width * 0.3height: parent.height * 0.1radius: 10border{width: 1color: "black"}anchors{horizontalCenter: parent.horizontalCenterbottom: parent.bottombottomMargin: 20}Text {id: text_Logintext: qsTr("登 录")font{pixelSize: 18bold: true}anchors.centerIn: parent}MouseArea{anchors.fill: parentonClicked: {}}}

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

3 补充

昨天搞忘了记住密码、忘记密码、注册账号这三个文本

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

Android初学者仿QQ聊天软件APP (一) 登录界面
今天新学的知识来这里总结一下,在做登录界面时做了两个单选框按钮,用来记住密码和自动登录. //存储数据也就是用户的账号和密码SharedPreferences sharedPreferences = ...
Java实现聊天软件（一）界面编写
文章目录 Java实现聊天软件(一)界面编写介绍 IM(Instant Messenger)工作原理登录界面界面设计代码实现导包继承建类定义组件构造函数成品展示好友栏界面例子展示 ...
ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）...
开始搭建登录界面登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...
1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）
开始搭建登录界面登录界面效果图: 相关的图片资源下载百度云备份链接: http://pan.baidu.com/s/1o71cvMU 密码: 2h7e 步骤开始: 设置辅助窗口的位置在下方快捷键o ...
qt登录界面跳转_每天10分钟，木辛老师带你实战慕课软件开发：登录界面开发第2课...
软件实战开始,快速提供编程能力:通过实战,分析产品需求,梳理设计需求,提升项目分析和架构的能力.快点跟着木辛老师一起学习吧! 请点击右上角"关注"按钮关注我们哟:跟着木辛老师学习P ...
基于Qt的聊天软件设计实现手把手教学——高仿QQUI设计（一）
文章目录前言一.使用工具 1. Qt Creator 二.项目介绍 1.客户端 1.1 Socket套接字 2.服务端 2.1 数据库 2.2 数据处理 3.效果图 4.总体系统架构图小结前言 ...
python 实战之模仿开发QQ聊天软件（二）MySQL数据库的连接和使用
上一篇说道QQ登录界面GUI的模仿设计在自己的电脑上安装mysql. ctrl +shift +T,依次输入 sudo su apt-get install MySQL-client-core-5. ...
9.QML Qt Quick Controls 2中常用的界面形式——并排式界面（SwipeView）
并排式界面的实现的核心组件就是SwipeView.SwipeView由一组页面填充.一次只能看到一页.用户可以横向滑动浏览页面. 请注意,SwipeView本身完全不可见.一般与PageIndicat ...
【UV打印机】PrintExp打印软件教程(二)-主界面介绍
00. 目录文章目录 00. 目录 01. PrintExp概述 02. PrintExp工具栏 03. PrintExpZ轴控制 04. PrintExp专色界面 05. PrintExp状态栏 ...

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

目录

1 主界面

2 创建登录面板qml文件

3 补充

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

最新文章

热门文章