**
qt制作登录窗口界面及布局的细节
**
虽然做一个登录窗口还是很简单，但是为了美观还是要花很多心思的。话不多说，我们直接进入正题。
1.页面显示
首先我们先拖动label完成两个静态文本框账号和密码，再用lineEdit完成两个单行输入框，最后用PushButton完成登录和退出按钮，得到如下图所示界面



这是个用于用户登录的界面，但是对于用户视觉来说，是非常差的。不仅如此，当用户拖动文本框更改大小时，更会造成不好是视觉效果。



为了美观，我们需要对这个界面进行布局。
2.界面布局
首先我们对账号的label和所对应的文本框进行水平布局

有两种方法。

（1）Vertical Layout(垂直)框和Horizontal Layout(水平)框

我们可以直接把Horizontal Layout框拖出来，然后将账号的静态文本框和单行输入框拖入，即可完成水平布局。但是这种布局方式对后续的布局及调整是非常不方便的。所以我更推荐另一种方式。



（2）Widget框

我们将Widget框拖到界面上，然后将账号和密码所对应的静态文本框和单行输入框拖入。然后选中Widget框点击上方栅格布局。即得下面如图效果。



我们再将登陆和退出按钮做水平布局。



最后我们对整个界面进行垂直布局，布局工作即可完成。



但是我们可以看到，效果显然很差。为什么布局后的效果还是这么差甚至不如布局之前的美观？我们现在就需要对布局进行细节修改。
3.布局细节修改
首先我们发现主要问题还是Widget框太大，导致了界面上各种标签异常宽大及标签垂直距离过大，我们可以分两个步骤解决。

（1）选择Weiget框将sizePolicy属性垂直策略设置为Fixed，可以减小垂直间距。



（2）我们发现虽然上下距离压紧了，但是还是宽大，所以我们可以使用弹簧Horizontal Spacer和Vertical Spacer，然后经过调整弹簧距离是否固定长度、调整界面大小等，得到如下成型界面。



这样一个登陆界面的布局就做好了。


4.其它操作
1.如果我们想给登陆框设置一个标题，可以先选中登陆框，然后找到右下角属性WindowsTitle即可设置
2.一般来说，我们做的登陆窗口大小基本上是合理的，不需要用户自己调整大小，为了防止用户调整大小，造成不好的视觉体验，我们可以将属性里面高度宽度、最大宽度、最小宽度设置为一样的大小，就可以使登录框不可修改。

PS 制作登录界面

新建：名称（登录页面），宽度800，高度600，分辨72
制作标题：logo抠图，图层样式调整颜色，投影等效果输入标题，复制图层样式到标题。
拾色器（双白色），导入校徽，图层右键选择背景图层
魔法棒工具，取消勾选连续，选择白色删除。，扣出图徽。
拖到登录页面，ctrl+t调整大小。
添加图层样式，f（x）：颜色叠加和投影，
输入相应文字，调整颜色，大小，位置（注意将前景色改为要求色）
按住alt，将logo所在的图层拖到标题图层
图层一重命名为logo
除背景外，将其他图层多选，ctrl+g建组，组名标题
新建图层，层命名：登录背景
选中登录背景图层，使用矩形选框工具选择下部分，稍微改变颜色，油漆桶涂抹。
选中登陆背景，f（x）-渐变叠加（文字不好描述自己做做）
点击文件，置入嵌入对象日出，调整素材图层大小，混合模式，不透明度等（右边“正常”改为“正片叠底”）同理导入太阳，小鸟，调整同上。
创建新组，将新建图层全部选中拖到新组，组名登录背景。
选择椭圆工具，按住shift画正圆，调整填充和描边。
圆里文字：账号登录上下两排。
选择圆角矩形工具，调整圆角半径（八像素），制作登录框，调整颜色及描边。（描边4）
图层名称改为登录框，添加图层样式-投影，调整图层填充及不透明度
输入相应文字，及对话框，调整颜色大小
打上记住密码忘记密码啥的太麻烦了我觉着你们应该都会
再次新建组，操作同上，拖入改名为登录框。
制作倒影，勾选自动选择，显示变换控件，图层改名为阴影，alt选择复制登录框拖到阴影下面，
选择登录框-阴影图层（后面很难写 关于蒙版的建议看看）–反转登录框，添加图层蒙版，蒙版线性渐变。

用Python制作登录界面
PyQt5是一种高级的语言，下面只有几行代码就能显示一个小窗口。底层已经实现了窗口的基本功能。
登录界面：
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWidgets import*
from PyQt5.QtCore import*
from Dialog.HttpLogin import HttpPost

class Ui_dialog(QWidget):

    def __init__(self):
        super().__init__()
        self.setupUi() #界面绘制交给InitUi方法

    def setupUi(self):
        self.setObjectName("学生登录界面")
        self.resize(535, 344)
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(14)

        #注意变量定义的先后顺序
        self.lineEdit = QtWidgets.QLineEdit(self)
        self.lineEdit.setGeometry(QtCore.QRect(190, 100, 231, 31))
        self.lineEdit.setObjectName("lineEdit")
        #将其设为密码输入框
        self.lineEdit_2 = QtWidgets.QLineEdit(self)
        self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)
        self.lineEdit_2.setGeometry(QtCore.QRect(190, 150, 231, 31))
        self.lineEdit_2.setObjectName("lineEdit_2")

        #禁止窗口变化（最上方的设置）
        self.setWindowFlags(QtCore.Qt.WindowCloseButtonHint)
        self.setFont(font)
        self.pushButton = QtWidgets.QPushButton(self)
        self.pushButton.setGeometry(QtCore.QRect(100, 280, 93, 28))
        self.pushButton.setObjectName("pushButton")
        #给取消按钮添加了响应事件
        self.pushButton.clicked.connect(QCoreApplication.instance().quit)

        #确认按钮
        self.pushButton_2 = QtWidgets.QPushButton(self)
        self.pushButton_2.setGeometry(QtCore.QRect(340, 280, 93, 28))
        self.pushButton_2.setObjectName("pushButton_2")
        self.pushButton_2.clicked.connect(self.forlogin)#带参数默认执行 不带参数点击执行

        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(QtCore.QRect(90, 100, 72, 21))

        self.label.setObjectName("label")
        self.label_2 = QtWidgets.QLabel(self)
        self.label_2.setGeometry(QtCore.QRect(90, 155, 72, 20))
        self.label_2.setObjectName("label_2")

        self.retranslateUi(self)
        QtCore.QMetaObject.connectSlotsByName(self)

    def retranslateUi(self, dialog):
        _translate = QtCore.QCoreApplication.translate
        dialog.setWindowTitle(_translate("dialog", "Dialog"))
        self.pushButton.setText(_translate("dialog", "取消"))
        self.pushButton_2.setText(_translate("dialog", "确认"))
        self.label.setText(_translate("dialog", "账号："))
        self.label_2.setText(_translate("dialog", "密码："))



    def forlogin(self):
       #获取账号输入框的类容和密码输入框的类容
        name = self.lineEdit.text()
        password = self.lineEdit_2.text()
        sign = HttpPost.login(name,password)
        if sign=="true":
            print("登录成功")
            self.QCoreApplication.instance().quit#关闭当前窗口
        else:
            print("登录失败")
            reply = QtWidgets.QMessageBox.question(self,"警告","密码错误请重新登录",QtWidgets.QMessageBox.Yes, QtWidgets.QMessageBox.No)
            if reply == QtWidgets.QMessageBox.Yes:
                self.lineEdit_2.setText("")
                self.lineEdit.setText("")
            else:
                self.QCoreApplication.instance().quit#关闭当前窗口



if __name__ == '__main__':
    app = QApplication(sys.argv)
    my=Ui_dialog()
    my.show()
    sys.exit(app.exec_())

通过url访问服务器 解析响应json
import json
import tkinter #用以显示文本和图像
import urllib
class HttpPost():
    def login(name,password):
        print("进行登录操作")
        url = "http://localhost:8080/login"
        try:
            data = bytes(urllib.parse.urlencode({'name': str(name),'password':str(password)}), encoding=
            'utf8')
            response = urllib.request.urlopen(url,data=data)
            jsonDatas = json.load(response)
            sign =jsonDatas["sign"]   #如果是以类形式传输则通过2层结构进行解析
            return sign
        except (SyntaxError) as err:
            print("SyntaxError"+err.args)
        finally:
            None;

运行效果为：

Qt制作登录界面Demo

界面登录风格仿照html样式制作，颜色搭配和效果还是不错的

效果图