VS2008 compiling QT Open Source project--The Sun god Three Kingdoms Kill the source Code analysis (three) skin

The Sun god Three Kingdoms Kill the interface is very gorgeous, the interface button's icon, the mouse moves in the move out when the icon changes, the log and the chat widget border and the translucent and so on the effect, can be controlled by the code, also may use the skin file QSs to control. Let's analyze the QSS files that the three countries killed.

The following key codes can be seen in main.cpp:

Qdir::setcurrent (Qapp->applicationdirpath ());//Set the directory where the current directory is the executable file for the program

Set Skin
QFile file ("Sanguosha.qss");
if (File.Open (qiodevice::readonly)) {
Qtextstream Stream (&file);
Qapp->setstylesheet (Stream.readall ());
}

Set the application's skin by first setting the current path, loading the Sanguosha.qss file under the current path, and reading all its contents as parameters of the Qapp->setstylesheet.

To learn to use QSS, you first need to understand the selector syntax in QSS, commonly used in the following categories:

1 Control class name # Control name Specifies the control class, and the control name is followed by the effect description

2 Control class Name: state Specifies the control class, the state of the control is followed by the effect description, such as the mouse hover state of the button, and so on

3 Control class Name:: Child control class name specifies control class, child control class name followed by effect description such as button in group box

4 control class name directly specifying the control class followed by the effect description will affect the display of all of the controls in the program

5 Control Name [Property name = property value] Specifies the control class, and the property value of the control instance is followed by the effect description only affects the control display effect in the control instance where the property value matches the condition

Let's take a look at the contents of the Sanguosha.qss file and explain it individually.

qprogressbar{
Color:solid Gray;
border:2px solid Gray;
border-radius:5px;
Background:transparent;
padding:0px;
Text-align:center;
}
qprogressbar::chunk{//Set the background color of the progress block
Background: #B22222;
}

qtextedit{
border:10px;
Border-image:url (image/system/border.png) 10 10 10 10;//Set border to display the picture
Set background color, note using RGBA, transparent effect
}

Qtextedit[description= "true"]{//the Qtextedit control, and its Description property must be set to true for instance to take effect
border:10px;
Border-image:none;
Background-color:rgba (255,255,255,255);
}

Qtextedit qscrollbar:vertical {//This is a child control selector that sets the effect of the Qtextedit child control when the status is vertical qscrollbar--

margin:22px 0 22px 0;
}

Qscrollbar:add-page effect when//qscrollbar status is Add-page
{

}

Qscrollbar:sub-page effect when//qscrollbar status is sub-page
{
Background-color:rgba (0,0,0,200);
}

qscrollbar::add-line:vertical {//:: Represents a child control: represents the state in which it is located

height:15px;
Subcontrol-position:bottom;
Subcontrol-origin:margin;
}

qscrollbar::sub-line:vertical {//:: Represents a child control: represents the state in which it is located

height:15px;
Subcontrol-position:top;
Subcontrol-origin:margin;
}

qscrollbar::handle:vertical {//:: Represents a child control: represents the state in which it is located
border:2px solid Gray;
border-radius:6px;
Background-color:solid Gray;
min-height:12px;
}

Qscrollbar::up-arrow:vertical//:: Represents a child control: represents the state in which it is located
{
Border-image:url (image/system/button/scroll-up-arrow.png);
}

Qscrollbar::d own-arrow:vertical//:: = Child control: Indicates the state in which it is located
{
Border-image:url (image/system/button/scroll-down-arrow.png);
}

qlineedit#chat_edit{//Control class name # control name indicates only valid for Qlineedit called Chat_edit

Color:white;
border:10px Transparent;
height:20px;
Border-image:url (image/system/border.png) 10 10 10 10;
}

Qstatusbar::item {
border:0px solid Grey;
}

qstatusbar{
Background-image:url (image/system/skill-dock.png);
Color:white;
}

Qmenu[private_pile= "true"]{//Brackets Specify the property value, only the property value is satisfied, the effect is effective

border-radius:5px;
Color:white;
}

Qpushbutton[private_pile= "true"]{//Brackets Specify the property value, only the property value is satisfied, the effect is effective
Background-color:rgba (43,63,53,100);
border-radius:5px;
Color:white;
}

Qpushbutton[game_control= "true"]{//Brackets Specify the property value, only the property value is satisfied, the effect is effective
border:0px solid Gray;
font:12px;
border-radius:5px;
padding:6px 12px 6px 12px;
}

qpushbutton#free-discard{//Specify a background image on a button
Background-image:url (image/system/button/free-discard.png);
}

qpushbutton#free-discard:disabled{//Specify a button in the disabled state of the background image
Background-image:url (image/system/button/free-discard-disabled.png);
}

qpushbutton#reverse-select{//Specify a background image on a button
Background-image:url (image/system/button/reverse-select.png);
}

qpushbutton#reverse-select:disabled{//Specify a button in the disabled state of the background image
Background-image:url (image/system/button/reverse-select-disabled.png);
}

qpushbutton#pause{
Background-image:url (image/system/button/pause.png);
}

qpushbutton#play{
Background-image:url (image/system/button/play.png);
}

qpushbutton#slow-down{
Background-image:url (image/system/button/slow-down.png);
}

qpushbutton#speed-up{
Background-image:url (image/system/button/speed-up.png);
}

qpushbutton#uniform{
Background-image:url (image/system/button/uniform.png);
}

Because Skill_bar_container is the name of the status bar and the status bar is automatically generated, you need to deliberately set the name of the status bar once in your code so that you can set the style in QSs.

Main_window->statusbar ()->setobjectname ("Skill_bar_container");

#skill_bar_container qpushbutton{//#空间名称 child control Specifies the effect of all Qpushbutton classes contained under the Skill_bar_container control
Background-image:url (image/system/button/back.png);
border:1px solid Gray;
border-radius:4px;
Color:yellow;
font:12px;
padding:6px 12px 6px 12px;
}
#skill_bar_container qpushbutton:disabled{//Specifies the effect of all Qpushbutton classes contained under the Skill_bar_container control when disabled
Background-image:url (image/system/button/back_shade.png);
border-radius:4px;
Color:white;
font:12px;
}
#skill_bar_container qcheckbox{
border:1px solid Gray;
border-radius:4px;
Color:yellow;
font:12px;
padding:1px 12px 1px 8px;
}
#skill_bar_container qcheckbox::indicator{
height:0px;
width:0px;
}
#skill_bar_container qcheckbox:unchecked{
Background-image:url (image/system/button/frequent_checkbox/unchecked.png);
}
#skill_bar_container qcheckbox:unchecked:hover{
Background-image:url (image/system/button/frequent_checkbox/unchecked_hover.png);
}
#skill_bar_container qcheckbox:unchecked:pressed{
Background-image:url (image/system/button/frequent_checkbox/unchecked_press.png);
}
#skill_bar_container qcheckbox:checked{
Background-image:url (image/system/button/frequent_checkbox/checked.png);
}
#skill_bar_container qcheckbox:checked:hover{
Background-image:url (image/system/button/frequent_checkbox/checked_hover.png);
}
#skill_bar_container qcheckbox:checked:pressed{
Background-image:url (image/system/button/frequent_checkbox/checked_press.png);
}
#skill_bar_container qcombobox{
Background-image:url (image/system/button/back2.png);
border:1px solid Gray;
border-radius:3px;
Color:white;
padding:1px 18px 1px 3px;
}
#skill_bar_container qcombobox:on{
padding-left:4px;
padding-top:3px;
}
#skill_bar_container Qcombobox::d rop-down{
border-bottom-right-radius:3px;
Border-left-color:darkgray;
Border-left-style:solid;
border-left-width:1px;
border-top-right-radius:3px;
subcontrol-origin:padding;
Subcontrol-position:top right;
width:15px;
}
#skill_bar_container Qcombobox::d own-arrow:on{
left:1px;
top:1px;
}

http://blog.csdn.net/henreash/article/details/7868137

VS2008 compiling QT Open Source project--The Sun god Three Kingdoms Kill the source Code analysis (three) skin