首页>
知识库>
详情

meego中css主题文件的使用方法

2020-07-24 来源:CloudBest 阅读量: 0
关键词:

    1. qtwidget里面有stylesheet(CSS)的概念,而原始的qtgraphicsview里面,并没有stylesheet概念,到了mtf里面,又引入了stylesheet,但是没有专门的文档进行介绍,我只能参照qtwidget里面关于stylesheet的介绍,在猜测验证的基础上,做出一些总结。也许会有不准确的地方,以后会随时修改。因此,建议先看一下qtwidget中的stylesheet的相关介绍文档。
    2. qt中stylesheet使用的CSS标记语言,灵感是来自于html中的css,但是,仅仅是灵感,细节上还是有一些差别,建议学习一下html中css的概念和基本用法。后面所有的介绍,将不会讨论这些基础知识。
    3.基本语法(可以参考源码目录中的示例程序/code-example/layout/layout_inside_layout ,建议修改目录里面的css文件,看看效果)
    选择器{属性: 属性值;属性: 属性值;…}
    3.1 选择器语法。
    中括号内的属性-属性值,很好理解(需要介绍的是mtf中,都有哪些属性,这个在后面部分详细描述),重点在于选择器的一般语法(qt中选择器的语法,和html中选择器的语法是不一样的),下面给出一些例子:
    <1>
    MLabel {   font: "Nokia Sans Wide" 21px;   background-color: #eeeeee;   preferred-size: 85 85;   maximum-size: 80 30;   background-opacity: 0.5}选择器匹配的是所有 MLabel和其子类的对象实例。
    <2>
    MLabel#item {   font: "Nokia Sans Wide" 21px;   background-color: #eeeeee;   preferred-size: 85 85;   maximum-size: 80 30;   background-opacity: 0.5}
    选择器匹配的是所有 MLabel 的对象实例,并且该对象的object name是item(不确定是否包括MLabel的子类的对象实例,待补充)。
    <3>
    .MLabel {   font: "Nokia Sans Wide" 21px;   background-color: #eeeeee;   preferred-size: 85 85;   maximum-size: 80 30;   background-opacity: 0.5}
    选择器匹配的是所有 MLabel 的对象实例(不包括它的子类对象实例)。
    <4>
    #item {   font: "Nokia Sans Wide" 21px;   background-color: #eeeeee;   preferred-size: 85 85;   maximum-size: 80 30;   background-opacity: 0.5}
    选择器匹配的是所有 object name 为item的对象实例。
    <5>qtwidget里面,还有其他几种选择器语法,目前还没有验证,可以先只使用上面几种。
    3.2 属性-属性值介绍。
    在mtf里面,属性-属性值也是有继承关系的。一MLabel为例,它的style的继承关系是 MStyle-->MWidgetStyle-->MLabelStyle。
    <1>MStyle只是定义了共同的一些接口,没有实际的style,所以,从MWidgetStyle开始。
    <2>MWidgetStyle是所有MWidget共有的style,包括:
    代码
    int   marginLeftint   marginTopint   marginRightint   marginBottomint   paddingLeftint   paddingTopint   paddingRightint   paddingBottomint   reactiveMarginLeftint   reactiveMarginTopint   reactiveMarginRightint   reactiveMarginBottomint   backgroundBoxedPercentMBackgroundTiles   backgroundTilesQColor   backgroundColorqreal   backgroundOpacityQSize   preferredSizeQSize   minimumSizeQSize   maximumSizeMFeedback   pressFeedbackMFeedback   releaseFeedbackMFeedback   cancelFeedback
    <3>注意,前面列出了MWdiget中style的定义,但是,在css文件中,对应到属性-属性值中的时候,属性名字的写法,有小的差别,比如:
    上面<2>中的 backgroundColor,对应到css中,就应该写成background-color。(详细的对照,还没有找到,先照猫画虎用"小写"加"-"吧)
    <4>MLabelStyle,包括:
    QColor   colorQFont   fontQColor   highlightColorQColor   activeHighlightColor
    <5>还是看上面给出的一个例子:
    MLabel {   font: "Nokia Sans Wide" 21px;   background-color: #eeeeee;   preferred-size: 85 85;   maximum-size: 80 30;   background-opacity: 0.5}在这个例子里面,设置了5个属性,其中font是MLabelStyle,而另外4个,都是MWidgetStyle。
    <6>如果使用其他的widget,设置style的方法都类似,共有的属性就是MWidgetStyle,然后就是各自定义的style,查询对应的style文档即可。
    <7>补充说明一点,widget的大小,可以用css来控制,比如MWidgetStyle中的maximumSize,要体会style的含义。
    另外,MSceneWindowStyle有个style是int disappearTimeout,可见,style的灵活性。
    <8>mtf中的MVC模式,看似复杂,但是有它的灵活性和优势,尤其是style,也可以控制实际的显示效果。