Button image settings.

Set the setstylesheet function in the button Image

UI-> btn_dial-> setstylesheet ("qpushbutton {background-image: URL (:/images/call_up.bmp );}"

"Qpushbutton: hover {background-image: URL (:/images/call_hov.bmp );}"
"Qpushbutton: pressed {background-image: URL (:/images/call_down.bmp );}");

Use QT style sheethttp: // hi.baidu.com/buptyoyo/blog/item/1ef4fd00d6e026054bfb5104.html

Use QT style sheet (1)

Inspired by CSS, QT also supports qt's own CSS, qss for short. Similar to CSS, the main function and purpose of qss are to separate the display of the interface from the elements of the interface, that is, the separation of quality and shape, just as a person can wear different clothes at different times, the introduction of CSS mechanism makes it possible to design a software that separates skin from interface controls, applications can also change their appearance as they do on the Web interface.

1. 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.

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:

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. 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.

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 "#" specifies the object name, the highest priority is set. For specific rules, see 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 is in conflict 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.

Reference:

Http://pepper.troll.no/s60prereleases/doc/stylesheet

Powered by zoundry Raven