QT之样式styleSheet

QT之样式styleSheet

开场白

俗话说,人要衣装,佛要金装。我们做界面设计也同样如此,不仅仅代码得写好了,界面效果也要杠杠的!是不是很有道理,今天呢,我们来看看QT是给界面做出漂亮的样式出来的。其思想来源还是我们网页中的CSS差不多,只要你懂点CSS,其实关于这篇还是很容易理解的。

样式效果

就以我们Demo举例。

主界面

这里写图片描述

动态效果

在前面几节中,大家其实也看到了,接下来,让我们看代码样式是如何实现的

上样式代码

ObjectName

//因CSS效果有很多,大家感兴趣,可以查看CSS相关文档,这里我们就交流下我们Demo中所使用到的样式。
QPushButton#sysMin//不用我多说,大家一看也能明白,#后面就是我们控件ObjectName可看上图。
{
    border-image: url(:/Demo/Resources/sysBtn/sysbtn_min_normal.png);//这是我需要加载的图
    border-top-right-radius:2;//最小化按钮左上角呈2像素的弧度
}
QPushButton#sysMin:hover//最小化按钮鼠标滑过效果
{
    border-image: url(:/Demo/Resources/sysBtn/sysbtn_min_hover.png);
    border-top-right-radius:2;
}
QPushButton#sysMin:pressed//最小化按钮鼠标按下效果
{
    border-image: url(:/Demo/Resources/sysBtn/sysbtn_min_down.png);
    border-top-right-radius:2;
}

/*关闭按钮*/
QPushButton#sysClose 
{
   border-image: url(:/Demo/Resources/sysBtn/sysbtn_close_normal.png); 
}
QPushButton#sysClose:hover 
{
   border-image: url(:/Demo/Resources/sysBtn/sysbtn_close_hover.png);
}
QPushButton#sysClose:pressed
 {
   border-image: url(:/Demo/Resources/sysBtn/sysbtn_close_down.png); 
}
//菜单
QMenu 
{
    border-width:2;
    border-image:url(:/Demo/Resources/common_menuborder.png);
}
QMenu::item //菜单节点
{
    padding: 6px 24px 6px 28px;
}

QMenu::icon //设置菜单中图标位置调整
{
    padding: 0px 0px 0px 9px;
}

QMenu::separator //添加分割线
{
    margin-left:24;
    margin-right:4;
    border-image: url(:/Demo/Resources/menu_separate.png);
}
QMenu::item:selected//菜单节点选中效果
 {
    border-image:url(:/Demo/Resources/menu_hover.png);
    padding: 6px 24px 6px 28px;
}
QMenu::item:hover //菜单节点滑过效果
{
    border-image:url(:/Demo/Resources/menu_hover.png);
    padding: 6px 24px 6px 28px;
}

闲扯两句

QT为我们提供了setStyleSheet设置外观样式,当我们写好了样式表后,调用QT提供的setStyleSheet,注意:在同一个对象中调用setStyleSheet两次以上会覆盖掉之前已存在的样式。

//一般情况下,我们应该把样式放在我们基类中,用文件方式读取加载。
void BasicWidget::loadStyleSheet(const QString& sheet)
{
    QFile file(":/Demo/" + sheet + ".css");
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        QString qsStyleSheet = this->styleSheet();//这里是为了保存已有的样式效果,不然原来的效果会不再的哦!
        qsStyleSheet += QLatin1String(file.readAll());
        this->setStyleSheet(qsStyleSheet);
    }
    file.close();   
}

可参考此篇中谈到了类的封装一些想法QT之独立标题栏

下代码

惊心动魄的日子到了,这期Demo算讲解完了,终于可以下载代码了!Demo下载!!!不要你积分,免费下吧!骚年!!!

结尾

只为记录,只为分享! 愿所写能对你有所帮助。Good Good Study, Day Day Up!
如果你觉得所写的对你有帮助,默默点个赞哈,你的赞就是我最大的支持,嘿嘿~不要说我骗赞哦,(^__^)

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨田哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值