qt ui设计案例--登录界面

登录界面

要实现这个界面就非常简单了,准备一张图片就行。

lable样式:

css 复制代码
QLabel{
	border-image: url(":/nxd.jpg");
	background-position:center;
	min-width: 100px;
    min-height: 100px;
    border-radius: 50px;
	
}

搞一个圆背景贴一张图片就行

在登录与头像之间随便贴点文字,再修改一下样式就行

登录按钮采用三元渐变色,qt有自带设计颜色的功能

最后修改一下qpushbutton的交互样式就行了

css 复制代码
QPushButton {              
	border-radius:20;  
	background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0.204545 rgba(150, 214, 205, 255), stop:1 rgba(239, 193, 246, 255));
	color: #F0F0F0;
}
QPushButton:hover {            
	border-radius:20;  
	background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0.204545 rgba(211, 214, 205, 255), stop:1 rgba(239, 193, 246, 255));
	color: #F0F0F0;
}
QPushButton:pressed {        
	border-radius:20;  
	background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0.204545 rgba(150, 214, 205, 255), stop:1 rgba(239, 193, 246, 255));
	color: #F0F0F0;
	padding-left:2px;
	padding-top:3px;
}

最终效果:

相关推荐
哈市雪花4 小时前
相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
qt·相机·opengl·cad·缩放·工业软件·渲染效果
Tony小周7 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
UI罐头8 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
UI前端开发工作室11 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
雨落倾城夏未凉13 小时前
8.Qt文件操作
c++·后端·qt
前端开发与ui设计的老司机17 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
TechNomad18 小时前
Qt开发:QtConcurrent介绍和使用
qt
前端开发与ui设计的老司机18 小时前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机1 天前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
十秒耿直拆包选手1 天前
Qt:主窗体(QMainwindow)初始化注意事项
c++·qt