[PYQT5]如何做出精美界面,让你的软件高n个档次,QSS实例教程--不定时更新--part1[QLineEdit]

本人只是把平时做界面的一些小例子列举出来,没什么特别高端的操作,希望使你的界面更加美观
CSS大佬的不要喷,我只是个刚学点QSS的萌新 QAQ
在这里插入图片描述
Qt Style Sheets简称QSS,是QT中专门面向控件外观的编程,其语法和CSS基本一样(还没CSS多)

使用

第一种方式在代码里面导入QSS文件(文件里就是你已经写好的QSS代码)

with open(‘.QSS’, 'r') as f:
	qss1 = f.read()
    win.setStyleSheet(qss1)

而QSS会运行在被加上控件的本级以及子集控件进行更改(一般都放在主窗口)

第二种方法(简单粗暴法)
打开QT DESIGNER
选择主窗口
在这里插入图片描述
找到styleSheet
在这里插入图片描述
打开,编写QSS代码
在这里插入图片描述

推荐一个编写QSS非常好用的软件QSS EIDTOR,可以事实看到自己QSS代码对控件的影响,并且可以保存打开QSS文件

在这里插入图片描述

进入正题 QLineEdit实例

在这里插入图片描述
本来想做一个很轻量的登陆界面,可是怎么调试,都给人一种辣鸡界面的感觉,这时候一个好的QLineEdit的QSS就成了关键

首先,化框为线

代码
QLineEdit{
    border:0px;    #去除边框
    margin:10px; 	#设置10像素的外框距
	margin-left:50px;    #设置左边外框距50px
	margin-right:50px;		#设置右边外框距50px,这样垂直分布可以居中
    border-bottom: 2px solid #B3B3B3; 	#显示下框线,且为2px像素宽度颜色为#B3B3B3
    font-family:'Microsoft YaHei'; 	#设置字体
    font-size:20px; 	#字体大小
    font-weight:bold;		#粗体
    }

在这里插入图片描述
这样我们就获得了一个看起来不错的界面
接下来为QLineEdit增加动态反馈效果

具有触感的反馈

没有什么比线条变粗,颜色改变更好的触感了

#当鼠标移动到QLineEdit上时的反馈
QLineEdit:hover{
    border-bottom: 3px solid #66A3FF;	#下框线变为3px像素宽度,颜色为#66A3FF
    }
#当选中QLineEdit时的反馈
QLineEdit:focus{
    border-bottom: 3px solid #E680BD;	#下框线变为3px像素宽度,颜色为#E680BD
    }

在这里插入图片描述

在这里插入图片描述

代码

QLineEdit{
    border:0px;    
    margin:10px;
	margin-left:50px; 
	margin-right:50px;
    border-bottom: 2px solid #B3B3B3;
    font-family:'Microsoft YaHei';
    font-size:20px;
    font-weight:bold;
    }

QLineEdit:hover{
    border-bottom: 3px solid #66A3FF;
    }

QLineEdit:focus{
    border-bottom: 3px solid #E680BD;
    }

完整代码请见:https://gitee.com/ddder1919/a-login-interface.git

  • 57
    点赞
  • 400
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值