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

小丑西瓜6662024-11-13 4:07

登录界面

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

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;
}

最终效果：