QT之样式styleSheet

QT之样式styleSheet

开场白

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

样式效果

就以我们Demo举例。

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

上样式代码

//因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!
如果你觉得所写的对你有帮助,默默点个赞哈,你的赞就是我最大的支持,嘿嘿~不要说我骗赞哦,(^__^)