Style Sheet)

Qt skin design can also be said to beautify the interface of the QT application. QT uses a type of CSS style rules qss.

I. Application of style sheet

1. Set the style directly in the program code and use the setstylesheet () method

Widget-> setstylesheet ("color: Red"); // The font color in the widget is red.

Widget-> setstylesheet (qpushbutton {color: Red} qpushbutton: hove {color: yellow });

// The font color of the qpushbutton object in the widget is red and yellow when the mouse is suspended

2. Use the qss File

Steps:

Create a qss document, for example, stylesheet. qss.

Write custom content according to the qss syntax (For details, refer to the qss syntax)

Introduce the qss file to make the interface effect effective

Qfile file ("skin/clean. qss"); // The path starts from the directory where the application is located.

File. Open (qfile: readonly );

Qtextstream filetext (& file );

Qstring stylesheet = filetext. readall ();

This-> setstylesheet (stylesheet );

Ii. qss syntax

Qss and CSS are composed of two parts: Selector and declaration)

Selector is divided into general selector, sub-control selector (Auxiliary Controller) and pseudo selector (pseudo State) (below for reprint, source http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html)

1. Selector)

Qt supports all css2-defined selectors whose fine content can be found on W3C websites, among which the commonly used selector types are:

• General type selector: * It will be effective for all controls.
• Type selector: qpushbutton matches all qpushbutton instances and Their subclass instances.
• Attribute selector: qpushbutton [Flat = "false"] matches all instances whose qpushbutton attribute flat is false. There are two types of attributes: Static and Dynamic. The static attributes can be passed through q_property () you can use setproperty to specify dynamic attributes, 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 setqss.
• Class selector:. qpushbutton matches all qpushbutton instances, but does not include its subclass. This is equivalent to: * [class ~ = "Qpushbutton"]
  ~ = Indicates to test whether a qstringlist attribute contains a given qstring.
• Id selector: qpushbutton # okbutton corresponds to the object name setting in QT. before using this CSS, set the Object Name of the corresponding control to okbutton, for example: OK-> setobjectname (TR ("okbutton "));
• Descendant selector: qdialog qpushbutton matches all instances of qdialog descendant (including son, recursion with son) as qpushbutton.
• Sub-selector: qdialog> qpushbutton matches all instances of qdialog's direct subclass qpushbutton, excluding the recursion of the son.

2. Child control Selector

• For complex controls, other child 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)} its flag is (::)
• 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. You can 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.

• 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;
  }
• 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 see which child control selectors QT supports, refer to: http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3. pseudo selector (pseudo-States)

• 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.
• 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.
• 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.
• 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 )}
• 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
• For more information, see: http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

Common statement Declaration

Basic usage

QPushButton { color: red }

Multiple shared attributes (,)

 QPushButton, QLineEdit, QComboBox { color: red }

Set multiple attributes (;)

QPushButton { color: red; background-color: white }

Common attributes

Color: Red // The font color is red.

Background: yellow // the background color is yellow.

Background-color: yellow // use RGB (, 0, 0) rgba (,) to final the transparency # ffffff color RGB Value

Background-image: URL (images/top.jpg); // The background is not scaled with the window

Border: 1px solid gray // The border is 1px and filled with solid gray (groove)

Border-top boder-botom ......

Boder-color

Border-radius: 10px // the radius of the border rounded corner is 10px

Border-top-left-radius

Border-top-Rightt-radius

......

Border-image: URL (images/top.jpg); // The background image changes with the window

Padding: 2px 4px // set the top margin of the inner border attribute to 2px, the right margin to 4px, the bottom is 0, and the left is 0. Do not write (top right, bottom left)

# Set background color gradient

Background: qlineargradient (X1: 0, Y1: 0, X2: 0, Y2: 1,
Stop: 0 # e1e1e1, stop: 0.4 # dddddd,
Stop: 0.5 # d8d8d8, stop: 1.0 # c7f8fa);/* Background Color: color gradient (x1 right, Y1, X2 left, Y2, stop gradient point (0-1): color), Y2: 1 color gradient from top to bottom */
For details, refer to the list of properties in http://doc.qt.nokia.com/latest/stylesheet-reference.html.

All of the above online help manual http://doc.qt.nokia.com/latest/stylesheet.html for viewing QT