您当前的位置: 首页 >  qt

令狐掌门

暂无认证

  • 0浏览

    0关注

    513博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

qss美化Qt界面

令狐掌门 发布时间:2020-03-05 18:07:33 ,浏览量:0

        Qt提供了类似前端css的样式表qss(Qt样式表)来进行界面优化,可以实现代码界面分离,像MFC这种需要进行控件重载才能实现。qss的使用方法如下:

      (1)在Qt设计器中对控件右键----改变样式表,可以填写qss语法来修改样式 ,这样是对单独的控件进行设置。

      (2)在界面空白处改变样式表,是全局设置。

        例如下面的界面:

经过qss修改,可以改成如下样式:

        

  颜色搭配可以在qss里自己调节达到更好的视觉感受。

  qss格式如下:

类名
{
     属性1:。。。。;
     属性2:。。。。;
     。。。。。。。。
}

例如对QLabel样式的设置
QLabel
{
	 background-color: rgb(78,123,255);  /*背景颜色*/
     font:14px;  /*字体大小*/ 
     color: white;  /*字体颜色*/
}

    注意:每个属性以英文分号结尾,没有分号该属性无效。        

  qss的属性很多,先介绍几个常用

(1)背景颜色 background-color: rgb(78,123,255);

(2)字体  font

  (3)  边框圆角 border-radius

 例如上述例子的qss代码:

QMainWindow
{
     background-color: rgb(78,123,255);
     border-top:2px;
     border-bottom:2px;
     border-left:2px;
     border-right:2px;
}

QLineEdit 
{
     background-color: rgb(240,241,242); 
     border: 1px solid black;
     border-radius:5;
     font:14px;
}

QLabel
{
     background-color: rgb(78,123,255); 
     font:14px;
     color: white;
}

QPushButton
{
    color:green;    
    font:18px, "微软雅黑";
    background-color:rgb(0,223,223);
    border-radius:10px;
}

        qss的用法很灵活,暂时记录这么多了,以后逐渐更新。

        更多qss使用方法,请参考这篇【qss代码大全】

关注
打赏
1652240117
查看更多评论
立即登录/注册

微信扫码登录

0.0716s