【Qt Quick聊天软件练习】二、登录界面搭建
目录
- 1 主界面
- 2 创建登录面板qml文件
- 3 补充
- ?结语?
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: {
}
}
}
界面展示：
结语
由于界面没有太复杂的连带逻辑，所以只算是完成了可视化界面的搭建，注册界面、账号密码的存储等功能就下期再说吧，(●ˇˇ●)