模仿QQ登录界面窗口~PYQT6,实现登录、天气预报查询

已于 2024-08-05 09:25:12 修改
阅读量1.6k 收藏 33
点赞数 42
文章标签： python pyqt
于 2024-08-05 09:24:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czlong19881022/article/details/140917027
版权

我新手小白，一直想学习做一款程序，今天终于让我实现了一部分

  1. 登录窗口实现，
    1. 模仿QQ登录界面
      1. 背景动态渐变效果，每次打开都不一样，是动态的会不断变化
      2. 用户输入框和密码输入框在默认状态显示灰色，当选中时：图标变色、底部边框变色
      3. 关于动态渐变色思路：一开始想的时动态图片，后来怎么都觉得不好看，于是就想到动态背景，弄了半天效果都不好，突然灵光一现，在窗口增加了很多颜色粒子，让他们在窗体移动，然后在该一层的模糊滤镜
      4. 添加运动粒子添加滤镜效果设置70模糊度效果就有了，因为时随机生成颜色，就要限制下颜色范围，不要低饱和度的，
      5. 鼠标可以拖动窗体，添加阴影
    2. UI界面代码 
      # Form implementation generated from reading ui file 'LoginUi.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt6 import QtCore, QtGui, QtWidgets


class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(496, 409)
        Form.setStyleSheet("QPushButton {\n"
                           "background-color: rgba(255, 255, 255, 0); /* 背景颜色 */\n"
                           "border:0px; /* 边框样式 */\n"
                           "border-radius: 3px;         /* 圆角 */\n"
                           "padding: 2px 4px;           /* 内边距 */\n"
                           "color: white;               /* 文字颜色 */\n"
                           "\n"
                           "    }\n"
                           "    QPushButton:hover {\n"
                           "        background-color:rgba(0, 0, 0, 50);  /* 鼠标悬停时的背景颜色 */\n"
                           "    }\n"
                           "    QPushButton:pressed {\n"
                           "        background-color: rgba(0, 0, 0, 150);  /* 按下时的背景颜色 */\n"
                           "    }\n"
                           "\n"
                           "\n"
                           "QLineEdit {\n"
                           "        border-bottom-width: 0px;      /* 默认底部边框隐藏 */\n"
                           "        border-style: solid;\n"
                           "        padding: 30px;\n"
                           "        background-color: #FFFFFF;\n"
                           "        color: #000000;\n"
                           "        border-bottom-width: 2px;      /* 获取焦点时底部边框宽度 */\n"
                           "        border-bottom-color: rgb(172, 172, 172);     /* 获取焦点时底部边框颜色 */\n"
                           "    }\n"
                           "    QLineEdit:focus {\n"
                           "        border-bottom-width: 2px;      /* 获取焦点时底部边框宽度 */\n"
                           "        border-bottom-color: rgb(0, 170, 255);     /* 获取焦点时底部边框颜色 */\n"
                           "        border-bottom-style: solid;    /* 获取焦点时底部边框样式 */\n"
                           "    }\n"
                           "\n"
                           "\n"
                           "")
        self.LoginMain = QtWidgets.QFrame(parent=Form)
        self.LoginMain.setGeometry(QtCore.QRect(30, 30, 430, 330))
        self.LoginMain.setMinimumSize(QtCore.QSize(430, 330))
        self.LoginMain.setMaximumSize(QtCore.QSize(430, 430))
        self.LoginMain.setStyleSheet("QFrame {\n"
                                     "border-radius: 5px;\n"
                                     "background-color: qlineargradient(spread:pad, x1:1, y1:0.023, x2:0, y2:0.994, stop:0 rgba(105, 183, 206, 255), stop:1 rgba(63, 111, 118, 255));\n"
                                     "border: 1px solid rgb(100, 169, 139);\n"
                                     "   }")
        self.LoginMain.setFrameShape(QtWidgets.QFrame.Shape.StyledPanel)
        self.LoginMain.setFrameShadow(QtWidgets.QFrame.Shadow.Raised)
        self.LoginMain.setObjectName("LoginMain")
        self.UserName = QtWidgets.QLineEdit(parent=self.LoginMain)
        self.UserName.setGeometry(QtCore.QRect(95, 170, 240, 30))
        self.UserName.setMinimumSize(QtCore.QSize(240, 30))
        self.UserName.setMaximumSize(QtCore.QSize(240, 30))
        self.UserName.setStyleSheet("QLineEdit {\n"
                                    "    border-top-left-radius: 10px;  /* 左上角圆角 */\n"
                                    "    border-top-right-radius: 10px; /* 右上角圆角 */\n"
                                    "    background-image: url(res/Weather/loginicon/icon_Hui/yonghuming.png); /* 图标1 */\n"
                                    "    background-repeat: no-repeat;\n"
                                    "    background-position: left center;\n"
                                    "    padding-left: 35px; /* 调整这个值以确保文本与图标之间有足够的间距 */\n"
                                    "    background-size: 20px 20px; /* 明确设置图标大小 */\n"
                                    "}\n"
                                    "\n"
                                    "QLineEdit::focus {\n"
                                    "    background-image: url(res/Weather/loginicon/icon_Lan/yonghuming.png); /* 图标2 */\n"
                                    "    background-repeat: no-repeat;\n"
                                    "    background-position: left center;\n"
                                    "    padding-left: 35px; /* 调整这个值以确保文本与图标之间有足够的间距 */\n"
                                    "    background-size: 20px 20px; /* 明确设置图标大小 */\n"
                                    "}\n"
                                    "")
        self.UserName.setObjectName("UserName")
        self.FPbutton = QtWidgets.QPushButton(parent=self.LoginMain)
        self.FPbutton.setGeometry(QtCore.QRect(175, 230, 80, 30))
        self.FPbutton.setMinimumSize(QtCore.QSize(0, 30))
        self.FPbutton.setMaximumSize(QtCore.QSize(16777215, 30))
        font = QtGui.QFont()
        font.setPointSize(9)
        self.FPbutton.setFont(font)
        self.FPbutton.setStyleSheet("QPushButton\n"
                                    "{background-color: rgba(255, 255, 255, 0);\n"
                                    "}\n"
                                    "QPushButton:hover {\n"
                                    "color:rgba(0, 0, 0, 50);  /* 鼠标悬停时的背景颜色 */\n"
                                    " }\n"
                                    " QPushButton:pressed {\n"
                                    "color: rgba(0, 0, 0, 150);  /* 按下时的背景颜色 */\n"
                                    " }")
        self.FPbutton.setObjectName("FPbutton")
        self.RPbutton = QtWidgets.QCheckBox(parent=self.LoginMain)
        self.RPbutton.setGeometry(QtCore.QRect(95, 231, 79, 30))
        self.RPbutton.setMinimumSize(QtCore.QSize(0, 30))
        self.RPbutton.setMaximumSize(QtCore.QSize(16777215, 30))
        self.RPbutton.setStyleSheet("QCheckBox\n"
                                    "{\n"
                                    "background-color: rgba(255, 255, 255, 0);\n"
                                    "    color: rgb(255, 255, 255);\n"
                                    "}\n"
                                    "QCheckBox:hover {\n"
                                    "color:rgba(0, 0, 0, 50);  /* 鼠标悬停时的背景颜色 */\n"
                                    " }\n"
                                    " QCheckBox:pressed {\n"
                                    "color: rgba(0, 0, 0, 150);  /* 按下时的背景颜色 */\n"
                                    " }")
        self.RPbutton.setObjectName("RPbutton")
        self.PassWord = QtWidgets.QLineEdit(parent=self.LoginMain)
        self.PassWord.setGeometry(QtCore.QRect(95, 200, 240, 30))
        self.PassWord.setMinimumSize(QtCore.QSize(240, 3))
        self.PassWord.setMaximumSize(QtCore.QSize(240, 30))
        self.PassWord.setContextMenuPolicy(QtCore.Qt.ContextMenuPolicy.PreventContextMenu)
        self.PassWord.setStyleSheet("QLineEdit {\n"
                                    "        border-bottom-left-radius: 10px;  /* 左上角圆角 */\n"
                                    "        border-bottom-right-radius: 10px; /* 右上角圆角 */\n"
                                    "         background-image: url(res/Weather/loginicon/icon_Hui/tianchongxing-_1.png); /* 图标1 */\n"
                                    "            background-repeat: no-repeat;\n"
                                    "            background-position: left center;\n"
                                    "    padding-left: 35px; /* 调整这个值以确保文本与图标之间有足够的间距 */\n"
                                    "        }\n"
                                    "QLineEdit::focus {\n"
                                    "            background-image:url(res/Weather/loginicon/icon_Lan/tianchongxing-.png); /* 图标2 */\n"
                                    "            background-repeat: no-repeat;\n"
                                    "            background-position: left center;\n"
                                    "    padding-left: 35px; /* 调整这个值以确保文本与图标之间有足够的间距 */\n"
                                    "        }")
        self.PassWord.setEchoMode(QtWidgets.QLineEdit.EchoMode.Password)
        self.PassWord.setObjectName("PassWord")
        self.LoginButton = QtWidgets.QPushButton(parent=self.LoginMain)
        self.LoginButton.setGeometry(QtCore.QRect(95, 265, 240, 35))
        self.LoginButton.setMinimumSize(QtCore.QSize(240, 35))
        self.LoginButton.setMaximumSize(QtCore.QSize(240, 35))
        self.LoginButton.setStyleSheet("QPushButton {\n"
                                       "background-color: rgb(0, 170, 255); /* 背景颜色 */\n"
                                       "border:0px; /* 边框样式 */\n"
                                       "border-radius: 8px;         /* 圆角 */\n"
                                       "font-size: 16px;            /* 字体大小 */\n"
                                       "    }\n"
                                       "    QPushButton:hover {\n"
                                       "        background-color:rgb(0, 145, 218);  /* 鼠标悬停时的背景颜色 */\n"
                                       "    }\n"
                                       "    QPushButton:pressed {\n"
                                       "        background-color: rgb(0, 113, 170);  /* 按下时的背景颜色 */\n"
                                       "    }")
        self.LoginButton.setObjectName("LoginButton")
        self.RAbutton = QtWidgets.QPushButton(parent=self.LoginMain)
        self.RAbutton.setGeometry(QtCore.QRect(255, 231, 79, 30))
        self.RAbutton.setMinimumSize(QtCore.QSize(0, 30))
        self.RAbutton.setMaximumSize(QtCore.QSize(16777215, 30))
        self.RAbutton.setStyleSheet("QPushButton\n"
                                    "{background-color: rgba(255, 255, 255, 0);\n"
                                    "}\n"
                                    "QPushButton:hover {\n"
                                    "color:rgba(0, 0, 0, 50);  /* 鼠标悬停时的背景颜色 */\n"
                                    " }\n"
                                    " QPushButton:pressed {\n"
                                    "color: rgba(0, 0, 0, 150);  /* 按下时的背景颜色 */\n"
                                    " }")
        self.RAbutton.setObjectName("RAbutton")
        self.CloseButton = QtWidgets.QPushButton(parent=self.LoginMain)
        self.CloseButton.setGeometry(QtCore.QRect(400, 0, 30, 30))
        self.CloseButton.setMinimumSize(QtCore.QSize(30, 30))
        self.CloseButton.setMaximumSize(QtCore.QSize(30, 30))
        self.CloseButton.setStyleSheet("QPushButton:hover {\n"
                                       "background-color: rgba(170, 0, 0, 150);  /* 鼠标悬停时的背景颜色 */\n"
                                       "}\n"
                                       "QPushButton:pressed {\n"
                                       "background-color: rgba(170, 0, 0, 250);  /* 按下时的背景颜色 */\n"
                                       "}")
最低0.47元/天 解锁文章
PyQt5图形和特效之设置窗口背景
BugHunterX的博客
09-08 535
在上述代码中，我们首先通过设置窗口的样式表和属性，使窗口具有透明背景和无边框的外观。接下来，在paintEvent方法中，我们使用QPainter绘制一个半透明的白色矩形作为背景，并将其设置为窗口的中心部件。在paintEvent方法中，我们使用QPainter绘制背景，并通过QLinearGradient创建了一个从红色到蓝色的线性渐变，并使用fillRect方法将渐变填充到整个窗口区域。通过使用PyQt5提供的图形和特效功能，我们可以创建各种各样的背景效果，例如颜色渐变、图片背景、模糊效果等。
PyQt5教程(八)——实现QQ登录界面（二、加载资源文件）
ifeng12358的博客
11-12 3094
实现QQ登录界面——加载资源文件 一、创建资源文件： 上篇文章创建了QQ登录界面，本篇介绍创建并加载资源文件。 1、创建资源文件夹： 我们在项目文件夹下，把所需的图片资源等拷贝过来，并放入新建的images文件夹下： 图片资源下载地址：登录界面图片资源 2、在“项目浏览器”中，页面选择“资源”界面： ...
QT6 C++ 高仿QQ -- 4. 注册新用户，验证码防刷，自定义QLineEdit，自定义流式编辑框，包裹字体图标，提示信息，功能按钮
qq_30812427的博客
08-29 374
左侧字体图标；编辑提示文本移动到字体图标右侧；编辑输入内容也要在字体图标右侧；最后有功能按钮；
Qt框架下QQ登录界面实现指南
最新发布
weixin_42181686的博客
03-14 622
Qt是一个跨平台的C++应用程序框架，广泛应用于开发GUI程序和非GUI程序。它的主要特点包括丰富的API、模块化设计、跨平台兼容性和开源性，使其成为开发者构建桌面、嵌入式和移动应用的首选工具。Qt框架基于Model-View-Controller（MVC）设计模式，提供了一套灵活的UI组件，可以轻松实现复杂的用户界面。在这一小节中，我们介绍了QWidget作为Qt基础组件的重要性，以及它的一些关键特性。同时，我们也探讨了QLayout布局管理器的使用方法，包括创建布局和嵌套布局的示例。
模拟登录界面
weixin_57219176的博客
04-21 842
实现思路 按照包名划分: 实体层:com.cn.entity/domain/pojo User类 1)该类是一个具体类 2)提供私有字段 3)提供公共访问方法setXXX()/getXXX() 4)实现接口:serializable 序列化接口(目前不用) 业务接口...
UI小练习,模仿登陆界面
w527638232的专栏
12-11 777
做这个登陆页面只是为了练习一下,个人觉得做完这个页面可以让你对一个程序的层级关系,tag值的使用,self的认知,还有类目,组合控件都有一定的熟练
Android-------模拟用户登录界面（4）
hacker_crazy的专栏
04-17 821
Register功能的实现 //获取控件 Button register=(Button)findViewById(R.id.btn_Regster); //监听事件 //button register.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { //
PyQt5教程(七)——实现QQ登录界面（一、Qt Designer创建界面，Eric6创建项目）
ifeng12358的博客
11-12 6095
实现QQ登录界面——创建界面 1、使用Qt Designer创建QQ登录界面（QQLogin.ui文件），如下图所示： 界面文件下载地址：QQlogin.ui文件下载 2、把.ui文件转换为.py文件 通过PyQt5提供的命令行工具pyuic5可以把把.ui文件转换为.py文件： pyuic5 -o...
python制作qq登录界面_electron 仿制QQ登录界面
weixin_39831001的博客
01-29 1133
首先来看看qq的登录界面:准备开发制作一个窗口先主进程代码:import {BrowserWindow, webContents, app, ipcMain} from 'electron'LoginWindow(); //暂时调用ipcMain.on('quitApp', () => {app.quit();});function LoginWindow() {const login...
python制作qq登录界面_Python制作一个仿QQ办公版的图形登录界面
weixin_35523135的博客
03-02 1253
最近，QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式，看起来更加的清爽、简洁和高效了。这种界面州的先生还是比较喜欢的，没有QQ那么花里胡哨，也比微信那些残缺的功能更加丰富。并且这次的登录界面还新增了微信登录的选项，看来 TIM 还打算从微信那边争取一部分用户过来。闲话少说，进入正题。州的先生看到这个出自大厂的图形界面程序，不由得想用 Python 的图形界面模块来实现...
python+PYQT5 实现我的软件管理助手
11-18
在本项目中，“python+PYQT5 实现我的软件管理助手”是一个利用Python编程语言结合PYQT5库创建的应用程序，旨在提供一个便捷的软件管理平台。PYQT5是Python中的一个图形用户界面（GUI）工具包，它允许开发者创建功能...
Python Qt窗口实现类似QQ界面的屏幕边缘隐藏功能
qq_40774629的博客
12-12 1611
直接上代码，copy过去就能用 思路： 后台300ms检测一次窗口的位置 窗口x坐标移到屏幕上界限附近，且鼠标移出窗口时。将窗口移出屏幕 反过来检测窗口的位置和鼠标的位置，再将窗口移回即可。 同时获取屏幕长宽以此来将移出左右两侧的窗口拉回 #!/bin/env python # -*- coding:utf-8 -*- ''' Class: my_hide_or_show.py Programmer: tangzhiying Date: 2
pyqt5 qss常用美化资源包
08-03
下载之后直接导入项目根目录中，配合我的一片qss美化文章，可以完美使用，也可以自己的定义一些qss内容，然后达到自己想要的效果
Python + PyQt5 + MySQL模拟QQ的聊天与娱乐软件
01-09
该软件基于python语言编写，使用MySQL存储数据，pyqt5编写图形化界面，实现功能包括聊天，文件上传与下载，飞机大战，项目信息以及引用了图灵机器人。
pyside6项目，创建一个简易的账号密码输入交互界面
pandas_math的博客
01-22 2039
创建一个简易的账号密码输入交互界面
PyQt5 自定义渐变窗口
qq_36500197的博客
08-19 941
color_section: Union[Color, int, QColor, list[list[QColor]]] = False 渐变色段。autoexit_enable: Union[bool] = False 自动关闭，某些特性场景会用到，鼠标离开就定时关闭窗口，默认不自动关闭。以中间为准，分成上色段和下色段，为了衔接好上色段最后一个颜色和下色段第一个颜色是一样的，效果还可以，当然，色段支持无限累加。那么水平渐变呢，改下参数就行了。对应三个位置，再加一个色段。
【PyQt实例6】渐变效果
cxm19830125的专栏
03-26 3881
#-*- coding:utf-8 -*- import sys from PyQt4.QtCore import * from PyQt4.QtGui import * QTextCodec.setCodecForTr(QTextCodec.codecForName("utf-8")) class StockDialog(QWidget): def __init__(self, p
python仿QQ
m0_37876057的博客
09-11 2156
针对之前很多同学问我这个可不可不支持数据库及增加注册功能，我增加了这些功能，本软件基于python gui图形库pyqt5编写的仿qq，采用mysql数据库存储，socket通信（tcp协议）实现，支持多账号登录，注册，单人私聊，群聊，添加好友分组等功能。 源码下载：基于Tcpsocket通信的Pyqt5仿QQ-Python文档类资源-CSDN下载基于Tcpsocket通信的Pyqt5仿QQ，增加支持数据库，qq，登录，注册，群聊功能更多下载资源。
入门 PyQt6 看过来（基础）01 ~ pyqt6初体验
weixin_41065336的博客
08-02 5134
本文路老师准备去玩玩pyqt6的功能，我会用大概二十天的时间玩转pyqt6，并制作出来好玩又实用的项目。1 介绍PyQt6是由Riverbank Computing公司开发的基于Python的一系列多平台的工具包，可以在UNIX、Windows和mac等主流操作系统上运行。本文着重来尝试使用pyqt6，以及未来利用pyq...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值