QT之使用QSS做出一个漂亮的登录界面（手把手教学）

        首先要进入QT Creator的设计，接着搭建一个简单的框架，在画布上点击右键，选择样式表

        然后安顿好各个插件之后，右键点击画步，选择“编辑样式表”，就可以开始编辑了

        首先我们设置背景，字体和字号

*{background:rgb(255, 255, 255);font-size:15px;font-family:Century Gothic,sans-serif;
}

        接下来设置我们的容器颜色，以下代码就可以将容器设置为蓝色

QFrame{
background: blue;
}

         是极其的难看，所以我们想可不可以添加一个背景图呢？是可以的，但在此之前一定要先把背景图添加到资源文件里！详见QT的QSS添加资源文件_八两x的博客-CSDN博客

        接着我们在代码里这么写

QFrame{border:sold 10px rgba(0,0,0);background-image: url(:/NPU.jpeg);
}

        就可以得到有背景图的框了

 这样就好看多了，但是输入框和按钮这些都太突兀了，我们在修改一下

输入代码

QLineEdit{color: #8d98a1;background-color:#405361;
}

 这段代码是对于“行”进行编辑，第一个color是给行内的预置文本设定颜色，第二个是给行背景设置颜色，在调整一下大小，感觉很好

但是输入框方方正正还有边框不好看，所以我们去掉边框，再把角变圆

QLineEdit{color: #8d98a1;background-color:#405361;font-size:18px;border-style:outset;border-radius:10px;
}

其中的border-style是设置有无边框的，border-radius是设置圆滑程度的

 设置后立马有了高级感，接下来对按钮进行设置，基本设置语句和行设置差不多

QPushButton{background:#ced1d8;border-style:outset;border-radius:10px;}
QPushButton:pressed{background-color:#405361;border-style:inset;
}

其中多出来的QPushButton:pressed是指按钮按下的状态，此时按钮变颜色，边框样式也改变

最后就是check box和textLabel了，我们一起来看一下吧：

QCheckBox{background:rgba(85,170,225,0);color:white;
}
QLabel{background:rgba(85,170,225,0);color:white;font-style: italic bold;font size:14px;
}

 通过设置，设置背景为透明，字体颜色白色，对于QLabel还可以设置字体等等

 最后一个漂亮的界面就做好了

总结

        首先先要添加资源，然后：①设置主背景②设置Frame的背景③设置输入文本框的背景和字体④设置按钮⑤设置CheckBox和QLabel。完整代码如下：

*{background:rgb(255, 255, 255);font-size:15px;font-family:Century Gothic,sans-serif;
}
QFrame{border:sold 10px rgba(0,0,0);background-image: url(:/NPU.jpeg);
}
QLineEdit{color: #8d98a1;background-color:#405361;font-size:18px;border-style:outset;border-radius:10px;
}
QPushButton{background:#ced1d8;border-style:outset;border-radius:10px;}
QPushButton:pressed{background-color:#405361;border-style:inset;
}
QCheckBox{background:rgba(85,170,225,0);color:white;
}
QLabel{background:rgba(85,170,225,0);color:white;font-style: italic bold;font size:14px;
}

教程参考：【科普】Qt Designer设计登录界面_哔哩哔哩_bilibili

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！