Original address: http://blog.csdn.net/lastsoup/article/details/7043124
QT Skin design, can also be said to the QT application of the interface beautification, QT used a kind of CSS style rules QSS.
One, the application of Style sheet
1. Set the style directly in the program code, using 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 Qpushbutton object font color in the widget is red and yellow when the mouse hovers
2. Using the QSs file
Steps:
Create a QSS document, for example: STYLESHEET.QSS
Write the custom content according to the QSS syntax (see QSS syntax)
Introduce the QSs file to make the interface effect effective
QFile file ("Skin/clean.qss");//The path starts at the directory where the application is located
File.Open (qfile::readonly);
Qtextstream Filetext (&file);
QString stylesheet= Filetext.readall ();
This->setstylesheet (stylesheet);
Second, QSS Grammar
QSS and CSS are made up of two parts, selectors and statement declarations (selector and declaration)
Selectors are divided into general selectors, child control selectors (auxiliary controllers) and pseudo selectors (pseudo states) (reproduced below, source http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html)
1. General Selector (selector)
QT supports all CSS2-defined selectors, and its fine content can be found on the Web site of http://www.w3.org/TR/CSS2/selector.html, where more commonly used selector types are:
- Universal Type selector: * will have effect on all controls.
- Type selector: Qpushbutton matches instances of all Qpushbutton and their subclasses.
- Property selector: qpushbutton[flat= "false" matches all instances where the Qpushbutton property flat is False, the property is divided into two types, static and dynamic, and static properties can be specified by Q_property (). Dynamic properties can be specified using SetProperty, such as:
Qlineedit *nameedit = new Qlineedit (this);
Nameedit->setproperty ("Mandatoryfield", true);
If the QT attribute changes after setting the QSS, you need to reset the QSS to take effect, you can use the unset first and then Setqss.
- Class selector:. Qpushbutton matches all instances of Qpushbutton, but does not include its subclasses, which is equivalent to: *[class~= "Qpushbutton"] ~= means testing whether a property of a qstringlist type contains a given qstring
- ID selector: Qpushbutton#okbutton corresponds to the object name setting in Qt, before using this CSS to set the corresponding control's object name to OKButton, such as: Ok->setobjectname (TR ( "OKButton"));
- Descendant selector: Qdialog Qpushbutton matches all instances of Qdialog descendants (including sons, recursion with son's son) for Qpushbutton
- Sub-selectors: Qdialog > Qpushbutton matches all instances of the Qdialog direct subclass Qpushbutton, and does not contain the recursion of the son's son.
2. Child control Selector
- for complex controls, you might include other child controls, such as a Drop-down button in a qcomboxbox. Now if you want to set the Qcomboxbox drop-down button, you can access this:
Qcombobox::d rop-down {image:url (dropdown.png)} whose flag is (::)
- A child control selector is a reference to a location that represents an element, which can be a single control or another composite control that contains child controls. Use the Subcontrol-origin property to change the default placement location for child controls, such as
Qcombobox {
margin-right:20px;
}
Qcombobox::d rop-down {
subcontrol-origin:margin;
}
The above statement can be used to change the margin of Drop-down. The
- relative position property can be used to change the offset of the child control relative to the initial position, such as when a Qcombox drop-down button is pressed, we can use a small internal offset to indicate the effect being pressed, as follows:
Qcombobox:: Down-arrow {
Image:url (down_arrow.png);
}
Qcombobox::d own-arrow:pressed {
position:relative;
top:1px; left:1px; The
}
- Absolute Position property allows the child control to change its position and size without being referenced by the element's control. Once the position is set, the child controls can be treated as a generic widget, and the model can be used. You can refer to the following for the model of Hopewell.
If you want to see which child control selectors are supported by QT, you can 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 a pseudo-selector in CSS, which is based on some basic state of the control to qualify the rules of the program, such as the hover rule, which indicates the state of the mouse over the control, while the press represents the state when the button is pressed. Such as:
Qpushbutton:hover {
}
Indicates that the Qpushbutton background turns red when the mouse passes over.
- Pseudo also supports negative symbols (!), such as:
Qradiobutton:!hover {color:red}
Indicates that the color he displays is red when no mouse is moved over Qradiobutton.
- Pseudo can be chained together, for example:
qpushbutton:hover:!pressed {color:blue;}
Indicates that the blue Word is displayed when Qpushbutton is not clicked, but the blue color is not displayed when clicked.
- It can also be used in conjunction with the previously mentioned child control selectors, such as:
Qspinbox::d own-button:hover {image:url (btn-combobox-press.bmp)}
- As previously mentioned, Pseudo selectors, child control selectors, and so on, can be separated by commas (,) to represent the same set of consecutive settings, such as:
Qpushbutton:hover,qspinbox::d Own-button, qcheckbox:checked {color:white; Image:url (btn-combobox-press.bmp);} is indicated as follows
- For more information, please refer to: http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states
Common statement declarations
Basic usage
Qpushbutton {color:red}
Multiple shared properties (,)
Qpushbutton, Qlineedit, Qcombobox {color:red}
Set multiple properties (; ）
Qpushbutton {color:red; Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:12px; line-height:21.6px; " >
Common Properties
color:red//Font color is red
Background:yellow//Background color is yellow
RGBA (255,0,0,50%) is finally transparent #ffffff颜色RGB值
Background-image:url (images/top.jpg);//background does not scale with Windows
border:1px solid Gray//bezel 1px and Fill heart gray (Groove groove)
Border-top Boder-botom ...
Boder-color
border-radius:10px//Bezel fillet radius 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 inner border property on padding 2px, right padding is 4px, bottom is 0, left 0 is not writable (upper right Bottom left)
# #设置背景颜色渐变
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 */
List of Properties for more reference http://doc.qt.nokia.com/latest/stylesheet-reference.html
All of the online help manuals for QT can be viewed http://doc.qt.nokia.com/latest/stylesheet.html
Http://www.cnblogs.com/lanye/p/3533735.html
QT Skin Design (Style Sheet)
