Qt stylesheet (2)

Http://www.developer.nokia.com/Community/Wiki/%E4%BD%BF%E7%94%A8Qt_Style_Sheets%E5%88%B6%E4%BD%9CUI%E7%89%B9%E6%95%88 In addition to the subclass style class, using the QT style table (qstylesheet) is another way to quickly change the UI style of the QT program, to a large extent, it draws on and references the syntax and ideas of HTML Cascading Style Sheets. The effect is superimposed on the style. According to the official documentation, currently, QT style sheets can only work with built-in styles. Cooperation with subclass styles is under development. Use of stylesheet The default Suffix of the stylesheet file is qss. You can use the command line parameter-stylesheet filename. you can use qapplication: setstylesheet or qwidget: setstylesheet to set the style sheet to be used by an application or a specific control. : The parameter of the setstylesheet function is a string (not the name of the qss file, but the content of the style sheet). Therefore, it is not convenient to set a large number of rules at a time if you use it directly, however, you can use a resource file to embed a qss style table into a program and use it through qapplication: setstylesheet. For example: Qfile file (":/qss/mystylesheet. qss "); File. Open (qfile: readonly ); App. setstylesheet (file. readall ()); Style Sheet syntax Here is not intended to explain in detail, just for example, the specific syntax rules, please refer to the http://qt.nokia.com/doc/4.6/stylesheet-syntax.html The description rules of a style sheet may be similar to the following: Qcombobox # mycombobox: Down-Arrow: pressed { Position: relative; Top: 1px; left: 1px; } A style sheet rule consists of selector and declaration. Qcombobox # mycombobox: Down-Arrow: pressed This part is a selector used to specify the Application Object of the style sheet rule, which is subdivided: Qcombobox # mycombobox is called type selector. qcombobox specifies the object class name. # name specifies the Instance name of the object (not required). For other selector syntax, see the official documentation. Down-arrow subcontrol Descriptor (subcontrol), which is separated from the previous field by:, which indicates the drop-down button of the combo box. The pseudo-States descriptor of pressed, which is separated from the preceding field by:, which indicates the pressed state. The preceding fields are not required, but are further restricted to the applicability of rules. View plaincopy to clipboardprint? { Position: relative; Top: 1px; left: 1px; } { Position: relative; Top: 1px; left: 1px; } This part is the property definition, which consists of pair attribute names: attribute values, separated. Qss syntax Like CSS, it also consists of a selector and a declaration. selector specifies the control to which the effect is generated, and Declaration is the statement that actually works. For example: Qpushbutton {color: Red} Qpushbutton specifies that it affects all qpushbutton or its subclass controls (such as user-defined mypushbutton), and color: red indicates that the foreground color of all affected controls is red. Except for the "Class Name", "Object Name", and "QT attribute name", these three items are case-sensitive. Others are case-insensitive, for example, color and color indicate the same attribute. If several selectors specify the same declaration, you can use commas (,) to separate each selector, for example: Qpushbutton, qlineedit, qcombobox {color: Red} It is equivalent: Qpushbutton {color: Red} Qlineedit {color: Red} Qcombobox {color: Red} The declaration part is a series of (attribute: Value) pairs. Use semicolons (;) to separate different attribute value pairs and use braces ({}) to include all the declaration. Selector) Qt supports all css2-defined selectors whose fine content can be found on W3C websites for http://www.w3.org/TR/CSS2/selector.html, The commonly used selector types include: I. general type selector :* It will have an effect on all controls. Ii. Type selector: qpushbutton Matches all qpushbutton instances and Their subclass instances. Iii. Attribute selector: qpushbutton [Flat = "false"] Matches all instances whose qpushbutton attribute flat is false. There are two types of attributes: Static and Dynamic. Static attributes can be specified through q_property (). dynamic attributes can be specified using setproperty, for example: Qlineedit * nameedit = new qlineedit (this ); Nameedit-> setproperty ("mandatoryfield", true ); If the QT attribute changes after the qss is set, you need to reset the qss to make it take effect. You can use unset before setting the qss. Iv. class selector:. qpushbutton Matches all qpushbutton instances, but does not include its subclass. This is equivalent: * [Class ~ = "Qpushbutton"] ~ = Indicates whether a property of the qstringlist type contains a given qstring. V. ID selector: qpushbutton # okbutton Corresponds to the object name settings in QT. before using this CSS, you must set the Object Name of the corresponding control to okbutton, for example: OK-> setobjectname (TR ("okbutton ")); Vi. Descendant selector: qdialog qpushbutton Match all instances with the qdialog descendant (including the son and recursion of the Son) as qpushbutton VII. Sub-selector: qdialog> qpushbutton Matches all instances of qdialog's direct subclass qpushbutton, excluding the recursion of the son. 2. Child control Selector I. For complex controls, other sub-controls may be included. For example, a qcomboxbox has a drop-down button. Now, if you want to set the qcomboxbox drop-down button, you can access it as follows: Qcombobox: drop-down {image: url(dropdown.png )} The flag is (::) II. The child control selector represents an element by referencing the position. This element can be a single control or a composite control containing the child control. Use the subcontrol-origin attribute to change the default placement location of the Child control, for example: Qcombobox { Margin-Right: 20px; } Qcombobox: drop-down { Subcontrol-origin: margin; } The preceding statement can be used to change the drop-down margin. III. the relative position attribute can be used to change the offset of the Child control relative to the original position. For example, when the drop-down button of A qcombox is pressed, we can use an internal small offset to indicate the effect of being pressed, as shown below: Qcombobox: Down-arrow { Image: url(down_arrow.png ); } Qcombobox: Down-Arrow: pressed { Position: relative; Top: 1px; left: 1px; } IV. The absolute position attribute allows the child control to change its position and size without referencing elements. Once the location is set, these child controls can be treated as common widgets and can use a combination model. For more information about the model combination, see the following. If you want to check which child control selectors are supported by QT, refer: Http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls -Syntax.html 3. pseudo selector (pseudo-States) I. the pseudo selector is represented by a colon (:). Similar to the pseudo selector in CSS, it is a rule that limits the program based on some basic states of the control. For example, the hover rule indicates the State when the mouse passes through the control, press indicates the status when the button is pressed. For example: Qpushbutton: hover { Background-color: red; } Indicates that the qpushbutton background turns red when the mouse goes through. Ii. pseudo also supports negative symbols (!), For example: Qradiobutton :! Hover {color: Red} It indicates that the color displayed when qradiobutton is not moved with the mouse is red. Iii. pseudo can be connected together, for example: Qpushbutton: hover :! Pressed {color: Blue ;} It indicates that qpushbutton displays the blue color when you move the mouse but do not click it, but it does not display the blue color when you click it. IV. It can also be used together with the previously mentioned child control selector, for example: Qspinbox: Down-button: hover {image: url(btn-combox-press.bmp )} V. As mentioned above, the pseudo selector and sub-control selector can be separated by commas (,) to indicate consecutive identical settings, for example: Qpushbutton: hover, qspinbox: Down-button, qcheckbox: checked {color: White; Image: url(btn-combox-press.bmp);} indicates the following VI. For more information, see: Http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states Use QT style sheet (2) 2. Conflict Resolution A) use Object Name I. Set the control in the program first, for example: Btnone = new qpushbutton (centralwidget ); Btnone-> setobjectname (qstring: fromutf8 ("btnonech ")); Ii. In this way, we have a qpushbutton with the object name btnonech. experiment with the method of specifying the object name, for example: Qpushbutton # btnonech {color: Red} Qpushbutton {color: White} We can see that the color of btnoncch is changed to red. B) Use a pseudo selector, such as hover, press, and enabled, for example: I. The "1" is disable, Qpushbutton :! Enabled {color: White} C) All type selectors share a common feature, that is, if two attributes conflict, the last one will prevail, for example: Qpushbutton {color: Red} Qiniactbutton {color: Gray} Since qpushbutton is a subclass of qiniactbutton, if only qiniactbutton is set, it can be imagined that all qpushbutton is gray. If only qpushbutton is set to red, when both of them can be set to take effect, the last appearance in the text prevails, so the result is grey D) Of course, if there is # specify the object name, the priority set by him is the largest, specific rules can refer to: http://www.w3.org/TR/CSS2/cascade.html#specificity, or Http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution Qpushbutton # btnonech {color: Red} Qpushbutton {color: Blue} Qiniactbutton {color: Gray} Although qiniactbutton is at the end, # btnonech previously specified that the color of qpushbutton "1" is red, so "1" is red at the end. 3. Cascade Effect A) subclass can inherit the stylesheet of the parent class. However, if stylesheet is set in the subclass to conflict with the settings in the parent class, the subclass's own stylesheet will be given priority, if it is set in qapp, but it is also set in a specific control, if there is a conflict, it is also the control of priority, for example, I set in the program: Btnoneen-> setstylesheet ("qpushbutton {color: Red }"); When I set qapp again, if I set the color of qpushbutton to gray, the result is that the color of qpushbutton btnoneen is still red. This is why btnoneen is set to gray but red. B) if we set stylesheet: Qpushbutton * mypushbutton; Mypushbutton-> setstylesheet ("* {color: Blue }"); In fact, he and the settings are as follows: Mypushbutton-> setstylesheet ("color: Blue "); The results are the same, but the last setting does not affect the subclass of qpushbutton, but the first one does. 4. Inheritance A) Unlike CSS, In the CSS box model, if an element is in another element, the elements in the element will automatically inherit the attributes of the external element, but not in qss, such: If a qpushbutton is placed in a qgroupbox, if: Qapp-> setstylesheet ("qgroupbox {color: red ;}"); It does not mean that qpushbutton in qgroupbox will also have the color: Red attribute. If you want to have it, it should be shown as follows: Qapp-> setstylesheet ("qgroupbox, qgroupbox * {color: red ;}"); You can also use qwidget: setfont in the application to set the attributes of the Child control. 5. namespace conflict A) The type selector can use a specific type, such: Class mypushbutton: Public qpushbutton { //... } Qapp-> setstylesheet ("mypushbutton {Background: yellow ;}"); Because qss uses qobject: classname to determine the control type to be granted with style sheet, if a user-defined control type is in a namespace, qobject: classname will return <namespace>:: <classname> name, which conflicts with the sub-control selector syntax. To solve this problem, use "--" instead of ":", for example: Namespace NS { Class mypushbutton: Public qpushbutton { //... } } Qapp-> setsytlesheet ("ns -- mypushbutton {Background: yellow ;}"); 6. Set object attributes. A) if you use the property set by q_property in the program, you can use qproperty-<property name> In qss to access and set the value. For example: Mylabel {qproperty-pixmap: url(pixmap.png );} Mygroupbox {qproperty-titlecolor: RGB (100,200,100 );} Qpushbutton {qproperty-iconsize: 20px 20px ;} If an attribute references an Enum affirmed by q_enums, the attribute name must be defined instead of a number.     Relationship between the range and priority of a style sheet rule Because the hierarchical relationship of style sheet rules is complex and there are many ways to set them, sometimes multiple rules are related to a specific control, in this way, a rule is required to define which style sheet rule is finally applied to the UI performance of the control. In general, the following situations are involved: Rule conflict Multiple rules have different content. There may be many situations, such Qpushbutton: hover {color: White} Qpushbutton {color: Red} In this case, it is not a conflict. More specific type descriptor rules have a higher priority. Therefore, the text color of a button with a mouse hover is white, otherwise it is red. Qpushbutton: hover {color: White} Qpushbutton: enabled {color: Red} Rule conflicts may occur here. When an enable button has a mouse hover, what is the definition of color? Qstylesheet determines that the priority of the subsequent rules is higher than that of the previous rules, so the color is red. Qpushbutton {color: Red} Qiniactbutton {color: Gray} It is relatively difficult to find that a base class and its subclass define rules for text color. Which Rule does the subclass apply? You may think that the Child class uses its own rules, but unfortunately it is not. The sample table does not consider the hierarchy priority of the class, so the latter rule has a higher priority than the previous rule. If you really want to set the rules for subclass separately, you need to switch the order of rules. Cascading Because style sheets can be applied to qapplication or controls separately, they are finally applied to a style sheet of a specific control, it is obtained by combining all the parent controls and even the style sheet settings of the application. In this case, rule conflicts may also occur, for example: View plaincopy to clipboardprint? Qapp-> setstylesheet ("qpushbutton {color: White }"); Mypushbutton-> setstylesheet ("* {color: Blue }"); Qapp-> setstylesheet ("qpushbutton {color: White }"); Mypushbutton-> setstylesheet ("* {color: Blue }"); In this case, the control's own style sheet has a higher priority than the style sheet of the parent control or application. Style Sheet inherit from inheritance In the standard CSS style sheet, if the font and color attributes of a control are not explicitly set, the control automatically inherits from the parent control. In the QT style sheet, the control does not automatically inherit. For example: Qapp-> setstylesheet ("qgroupbox {color: red ;}"); In this case, the color attribute of the Child control added to groupbox is not automatically set. To set the attributes of the Child control, you must specify the following: Qapp-> setstylesheet ("qgroupbox, qgroupbox * {color: red ;}"); Note: The Inheritance here is different from the above cascade. Cascade refers to setting the same object for different style sheets, and inherit refers to the effect of selector on the control hierarchy in style sheet rules. How stylesheet is attached to the style When stylesheet is set, a qstylesheetstyle is generated and set as the actual style of the application, and the current style is reparent as the sub-object of qstylesheetstyle, when an application or control calls a style drawing, it actually calls the qstylesheetstyle object. Inside the qstylesheetstyle class, it first calls the function to draw the UI according to the rules defined by stylesheet, if there are no relevant rules, call the drawing function of the current style object to draw the UI. Therefore, qstylesheet acts as a proxy style to process the UI first.