Customize the program appearance with Qt stylesheet (more easily understandable)

1. What is a QT style sheet []http://blog.hehehehehe.cn/a/10270.htm, a net of drinking wine
2. Style Sheet Syntax Basics
3. Square Box Model
4. Foreground and background
5. Create a scalable style
6. Control size
7. Handling Pseudo-state
8. Defining microscopic styles with subassemblies

8.1. Relative positioning
8.2. Absolute positioning

Summary

Due to the introduction of QT style sheets, it is easy to customize the appearance of Qt widgets. Whether you want to just modify the look of an existing part, or want to design a new set of interface styles from scratch, there is now a new way to inherit and implement a Qstyle subclass.

1. What is a QT style sheet

The idea of a QT stylesheet is largely derived from the HTML cascading style sheet (CSS), which, by calling Qwidget::setstylesheet () or Qapplication::setstylesheet (), can be a separate subassembly, an entire window , or even an entire application that specifies a style sheet.

Style sheets are implemented by a special subclass called Qstylesheetstyle, which is qstyle. This particular subclass is actually a wrapper class for other system-specific style classes that will apply the custom look style specified by the style sheet to the underlying system-specific style.

Qt 4.2 contains an example called Stylesheet to help you learn the style sheet, which comes with two styles: coffee and pagefold.

The coffee style above customizes the push button, frames, and tooltip, but uses the lower-level style (for example, this is the Windows XP style) to draw the Checkbox,combobox and radio buttons.

The Pagefold style completely redefined the appearance of all the controls used in the dialog box, enabling a unique, platform-independent look.

2. Style sheet Syntax Basics

The QT style sheet is almost identical to the CSS syntax, and if you already know the CSS, you can skip this section altogether.

A style sheet is composed of a series of style rules. Each style rule has the following form:

selector {Attribute:value}

The selector (selector) section is typically a class name (for example, Qcombobox), and there are other syntactic forms as well.

The property (attribute) section is the name of a style sheet property, and the value part is the value assigned to the property.

For ease of use, we can also use a simplified form:

Selector1, Selector2, ..., selectorm {
attribute1:value1;
Attribute2:value2;
...
Attributen:valuen;
}

This simplified form can be used to set n properties for a part that matches the M selector at the same time. For example:

Qcheckbox, Qcombobox, Qspinbox {
color:red;

Font:bold;
}

This rule sets the foreground color, background color, and font for all Qcheckbox, Qcombobox, and Qspinbox.

The online documentation lists all the properties that are supported for each of these parts. In this article, we only use several common properties that are most commonly used.

3. Square Box Model

In a style sheet, each part is considered to be a box of four concentric-like rectangles: blank (margin), border (border), padding (padding), and content. For a planar part-for example, a blank, a border, and a part with a padding of 0 pixels-the four rectangles are completely coincident.

The blank area is outside the bounding box and is always transparent. The border provides a four-week frame for the part, and its Border-style property can be set to some built-in frame styles such as inset, outset, solid, and ridge. Padding provides a blank space between the border and the content area.

4. Foreground and background

The foreground color of the part is used to draw the above text, which can be specified by the Color property. The background color is used to draw the fill rectangle for the part, which can be specified by the Background-color property.

The background picture is defined using the Background-image property, which is used to draw the rectangular area (blank, border, fill, or content) specified by Background-origin. The aligned tiled of the background image in the rectangular area can be specified by the Background-position and Background-repeat properties.

If the specified background picture has an alpha channel (that is, a translucent effect), the color specified by Background-color will pass through the transparent area. This feature allows background images to be reused in a variety of environments.

The style sheet used in this example is as follows:

Qframe {
margin:10px;
BORDER:2PX solid Green;
padding:20px;


Background-image:url (qt.png);
Background-position:top right;
Background-origin:content;
Background-repeat:none;
}

In this example, the blanks, borders, and padding values around Qframe are the same. In fact, the margin property can specify the different values we need in the top and bottom four directions, for example:

Qframe {
margin:14px 18px 20px 18px;
}

At the same time, we can also specify Margin-top, Margin-right, Margin-bottom, Margin-left four properties respectively.

Qframe {
margin-top:14px;
margin-right:18px;
margin-bottom:20px;
margin-left:18px;
}

Although we are only using qframe as an example, we can also apply these attributes to any of the QT parts that support the box model, such as Qcheckbox, Qlabel, Qlineedit, Qlistview, Qmenu, Qpushbutton, Qtextedit, and Qtooltip.

5. Create a scalable style

By default, the background picture specified by background-image automatically repeats the tile to overwrite the entire fill rectangle of the part (that is, the area inside the border). If we want to create a background that automatically scales with the size of the part instead of tiling, we need to set up something called a "border picture".

Border picture can be specified with the Border-image property, which provides both the background and border of the part. A "border picture" is divided into nine parts (nine Gongge), a bit to the Tic-Tac-Toe game's chessboard.

When the bounding rectangle of a part is filled, the squares of the four corners usually do not change, while the remaining five squares may be stretched or tiled to fill the available space.

When specifying a "border picture", in addition to the picture itself, we must also specify the four split lines used to split the nine Gongge. We must also specify whether the non-corner grid should be tiled or stretched, and the width of the border (to determine the size of the corner lattice to prevent the corners from being scaled).

For example, the following style sheet defines a button in:

Qpushbutton {
border-width:4px;
Border-image:url (Button.png) 4 4 4 4 stretch stretch;
}

In addition, the "border picture" should also contain an alpha channel so that the background can be exposed at the corner.

6. Control size

Min-width and Min-height Two properties can be used to specify the minimum size of a part's content area. These two values affect the Minimumsizehint () of the part and are considered at layout time.

For example:

Qpushbutton {
min-width:68px;
min-height:28px;
}

If the property is not specified, the minimum size is inherited from the part's content area and current style.

7. Handling Pseudo-State

The appearance of a part can be defined separately according to the state of the user interface element, which is called a pseudo state in the style sheet. For example, if we want to have a sunken appearance when a push button is pressed, we can specify a pseudo state called:p ressed.

Qpushbutton {
border:2px outset Green;
Background:gray;
}

qpushbutton:pressed {
Border-style:inset;
}

The following is a list of available pseudo-states:

Table 1. Pseudo-State list
Pseudo-State description
: Checked button part is selected
:D isabled parts are disabled
: Enabled part is turned on
: Focus Parts Get focused
: Hover Mouse on part
: Indeterminate checkbox or RadioButton is partially selected
: Off part can be switched, and in off state
: On part can be switched, and in on state
:p ressed parts are pressed by the mouse
: Unchecked button part is not selected

8. Defining microscopic styles with subassemblies

Many parts contain child elements, which can be called "child parts." The top and bottom arrows of the Spin box are the best examples of sub-components.

Child parts can be specified by::, for example, Qdatetimeedit::up-button. The styles that define subassemblies are very similar to defining parts, and they follow the box model mentioned earlier (that is, they can have their own borders, backgrounds, and so on) and can also be used in conjunction with pseudo states (for example, Qspinbox::up-button:hover).

The following table lists the available child part types:

Table 2. Child Parts List
Child Part Description
::d own-arrow combo box or spin box drop-down arrow
::d Own-button spin box's down button
::d rop-down combo box drop-down arrow
:: Indicator checkbox, radio button or an indicator that selects group box
:: Item menu, menu bar, or status bar sub-item
:: Menu-indicator Menu indicator for push button
:: Title of the title Group box
:: Up-arrow spin box's Up Arrow
:: Up-button spin Box's Up button

By specifying the Subcontrol-position and Subcontrol-origin properties, the subassembly can be placed anywhere within the Assembly box. Also, the position of the subassembly can be further adjusted using a relative or absolute way. The specific choice of adjustment depends on whether the subassembly has a fixed size or changes with the parent part.

8.1. Relative positioning

Relative positioning is appropriate for cases where the subassembly has a fixed size (specifying the child part size by width and height). In this way, the subassembly can be moved with the original position defined relative to the Subcontrol-position and Subcontrol-origin properties. Use the Left property to move the part to the right, and the top property to move the part to the other.

For example:

Qpushbutton::menu-indicator {
Image:url (menu_indicator.png);
width:13px;
height:13px;

subcontrol-origin:padding;
Subcontrol-position:bottom right;
}

When the button is pressed, we can move the menu indicator from the original position to the right and down a few of the state that the analog button has pressed.

qpushbutton::menu-indicator:pressed {
position:relative;
top:2px;
left:2px;
}

8.2. Absolute positioning

Absolute positioning is suitable for situations where the position of a subassembly changes with the parent part. As in the previous example, Subcontrol-origin defines the reference rectangle for the parent part box. The rectangular area of the subassembly can then be defined by an offset relative to the four edges of the reference rectangle.

Qpushbutton::menu-indicator {
BORDER:2PX solid red;

subcontrol-origin:padding;
Position:absolute;
top:2px;
right:2px;
bottom:2px;
left:40px;
}

For a subassembly with a width or height fixed, subcontrol-position is used to describe how it is subcontrol-origin within the specified rectangle:

Qpushbutton::menu-indicator {
Image:url (menu_indicator.png);
width:13px;

subcontrol-origin:padding;
Subcontrol-position:bottom right;
Position:absolute;
top:2px;
bottom:2px;
right:2px;
}
The original: http://hi.baidu.com/qinpanke/blog/item/e8998e112c29f808203f2e6f.html[drink small wine net pick]http://blog.hehehehehe.cn/a/10270.htm

Customize the program appearance with Qt stylesheet (more easily understandable)