QSS Study Subcontrol (very detailed)

Ordinary QSS and CSS no difference, difficult, but in addition, want to use good QSS, still have to master good Subcontrol, this in CSS is not, is Qt unique.

What is Subcontrol. A complex widget consists of multiple parts, which can be either a widget or a logical part, such as Qcheckbox, which consists of the icon and text two parts that define the style of the text and the icon-related style, and the icon section Is Qcheckbox's Subcontrol:: indicator.

In the Qt help document there are all Subcontrol instructions, but believe that many people read or do not understand what each subcontrol specific, this section will use a visual way to mark the Subcontrol, the use of QSS custom has Subcontrol common WI Dget, where the center of gravity is how to go QSS subcontrol instead of style effects, complex beautiful interface requires a lot of pictures and more QSS, here is not introduced, so as not to fall into the details, cover up this section of the topic. As long as you know the principle, combined with the QSS already mastered, find art to provide a set of interface cut, it is easy to achieve a professional effect.

Subcontrol's QSS is similar to most widgets and supports box models, customizable color, background, background-color, background-image, Border, padding, MA Rgin, width, height, etc., also support pseudo-states.

The drawing position of Subcontrol is specified by Subcontrol-origin, subcontrol-position, top and left, starting with these properties. Subcontrol-origin

Subcontrol-origin defines a reference rectangle to draw Subcontrol in the parent widget, which is drawn by default in the padding rectangle.

The origin rectangle of the Subcontrol within the parent element. If The property is not a specified, the default is padding. Subcontrol-origin has 4 values available: margin border padding content

The following illustration shows that the values of subcontrol-origin are not the same, and are drawn subcontrol in different locations of the parent widget:
subcontrol-position

It is known that Subcontrol is to be drawn in a rectangular area of the parent widget, such as padding rectangle, which is so large that the rectangle is drawn in which position. Use Subcontrol-position to specify that different subcontrol have different subcontrol-position defaults, such as handle's default value of Qslider is the U of Center Center,qspinbox The default value for P-button is right top.

The alignment of the Subcontrol within the origin rectangle specified by Subcontrol-origin. If The property was not specified, it defaults to a value of depends on the subcontrol. Subcontrol-position The horizontal direction has 3 values to choose: Left center right subcontrol-position vertical direction has 3 values to choose: Top Center Bottom fine-tune the position of the Subcontrol with Top and left

Top and left the main role is: hover,:p ressed, and so on, with top and left offset a little subcontrol, so you see Subcontrol mouse action, offset is relative to subcontrol-orign and SUBC Ontrol-position determines the location, the default value for top and left is 0. use the following QSS to summarize Subcontrol-origin, subcontrol-position, top, left: Qspinbox's Up-button is placed in the left vertical play of Qspinbox when the mouse is placed on the Up-button, the lower-right corner is offset by 1px when the mouse leaves Up-button, Up-button moves back to its original position

Qspinbox::up-button {
    subcontrol-origin:margin;
    Subcontrol-position:left Center;
}

qspinbox::up-button:hover {
    top:1px;
    left:1px;
}

The next step is to specify what Subcontrol each Widget has and how to QSS it. Qcheckbox

Qcheckbox's Subcontrol are: indicator, more interesting is that the text is always displayed on the right side of the indicator, so if the indicator on the right side, the text will probably not be visible.

Qradiobutton QSS and Qcheckbox are the same, so they are not repeated.

The following QSS effect as shown:

Qcheckbox {
    color:lightgray;    
    Background:rgb (a);
    border:10px Solid RGB (----);
    spacing:10px; /* Indicator and text interval */
    padding:10px;
}

qcheckbox::indicator {
    subcontrol-origin:border;
    Subcontrol-position:left Center;
    Background:white;
    BORDER:2PX solid RGB (in.);
}

qcheckbox::indicator:checked {
    background:rgb);
}

Modify Subcontrol-origin and subcontrol-position for different values to see what the effect is. Qcombobox

Qcombobox's Subcontrol have drop-down.

The following QSS effect as shown:

Qcombobox {
    color:lightgray;
    Background:rgb (a);
    border:10px Solid RGB (----);
    spacing:10px; /* Indicator and text interval */
    padding:10px;
}

Qcombobox::d rop-down {
    width:15px;
    height:10px;
    Subcontrol-origin:border;
    Subcontrol-position:right Center;
    Background:white;
    BORDER:2PX solid RGB (in A;
    border-radius:3px;
}

Qcombobox::d rop-down:hover {
    background:rgb);
}

Qcombobox::d rop-down:on {
    background:black;
    top:1px;
    left:1px;
}

Qspinbox, Qdateedit, Qtimeedit, Qdatetimeedit

Qspinbox's Subcontrol are:: Up-button,::d Own-button,:: Up-arrow,::d own-arrow. Up-button shown in Qspinbox, its subcontrol-origin is relative to Qcombobox Down-button shown in Qspinbox, its subcontrol-origin is relative to QCombo Box's up-arrow is shown in Up-button, its subcontrol-origin is relative to the down-arrwo of Up-button in Down-button, and its subcontrol-origin is relative In the Down-button

Qdateedit, Qtimeedit, Qdatetimeedit Subcontrol and Qspinbox are the same, just want QSS qspinbox in Qdateedit,qtimeedit or QDateTime Click Edit.

The following QSS effect as shown, Down-button vertically centered on the left, Up-button vertically centered on the right:

Qspinbox {
    color:lightgray;
    Background:rgb (a);
    border:10px Solid RGB (----);
    padding:5px;
}

Qspinbox::d Own-button, Qspinbox::up-button {
    subcontrol-origin:border;
    width:16px;
    height:10px;
    Background:white;
    BORDER:2PX solid RGB (in.);
}

Qspinbox::d Own-button {
    subcontrol-position:center left;
}

Qspinbox::up-button {
    subcontrol-position:center right;
}

Qspinbox::up-arrow,  qspinbox::d own-arrow {
    subcontrol-origin:content;
    Subcontrol-position:center Center;
    width:6px;
    height:6px;
    Background:rgb (the ",");
}

Qslider

Qslider's Subcontrol are:: Groove (Groove),:: Handle,::add-page and:: sub-page. Groove is shown in Qslider, its subcontrol-origin is relative to Qslider's handle shown in Groove, and its subcontrol-origin is relative to Groove's sub-page display Shown in Groove, its subcontrol-origin is relative to the groove of add-page shown in Groove, its subcontrol-origin is relative to groove handle, sub-page, Add-page are all shown in groove, but they can be extended to groove outside

The following QSS effect as shown:

Qslider {
    Background:rgb;
    padding:2px;
    height:40px;
}

qslider::groove:horizontal {
    subcontrol-origin:content;
    Background:rgb (-----);
    
    /* The groove expands to the size of the slider by default. 
    By giving it a height, it had a fixed size */
    height:20px;
}

qslider::handle:horizontal {
    Background-color:rgb (a);
    width:40px;
    border-radius:20px;
    
    /* Handle is placed by default on the contents rect of the groove. 
    Expand outside the groove *
    /margin: -10px 0;
}

qslider::sub-page:horizontal {
    background: #999;
    margin:5px;
    border-radius:5px;
}

qslider::add-page:horizontal {
    background: #666;
    margin:5px;
    border-radius:5px;
}

The default height of groove is the same as the height of the Qslider content rectangle, giving it a height value that allows him to have a fixed height, removing the height of the groove and trying it out.

The default height of the Handle is the same as for Groove content rectangle, in order for the display to exceed groove, you need to set margin to a negative value, and if the negative value is too small, the portion of the display beyond Qslider will not be visible. The subcontrol-position of Handle does not work because Handle is not fixed in one place, but is dynamically calculated based on the value of the Qslider. Qprogressbar

Qprogressbar's Subcontrol are: Chunk.

For Qprogressbar QSS, most of them want to define chunk as a rounded rectangle, but when its value is less than the hour, the rounded corners of the chunk become right-angled, even if the picture is not working, the effect is not ideal, so if you want to modify the Qprogressbar Appearance, it is recommended to inherit Qprogressbar to draw or use Qstyle. Qgroupbox

Qgroupbox's Subcontrol are:: Title and:: Indicator. Title Subcontrol-origin and Subcontrol-position custom Invalid relative to Qgroupbox indicator

The following QSS effect as shown:

Qgroupbox {
    background-color:qlineargradient (x1:0, y1:0, x2:0, y2:1,
                      stop:0 #E0E0E0, stop:1 #EEEEEE);
    border:2px solid gray;
    border-radius:5px;
    margin-top:10px; /* Leave space at the top for the title */
}

qgroupbox::title {
    subcontrol-origin:margin;
    Subcontrol-position:top Center; /* Position at the top center */
    padding:2px 3px;
    Color:white;
    margin-top:2px;
    Background-color:gray;
    border-radius:3px;
    spacing:5px;
}

qgroupbox::indicator {
    width:13px;
    height:13px;
    border:1px solid black;
    Background:white;
}

qgroupbox::indicator:checked {
    background:yellow;
}

Qtableview

Qtableview related Subcontrol have Qtableview:: Item,qheaderview:: section and upper left corner of Qtablecornerbutton:: section.

Qtableview's QSS is also in force for Qtablewidget.

The following QSS effect as shown:

Qtableview, Qheaderview, Qtableview::item {
    background:white;
}

qtableview::item:alternate {
    Background:rgb (209, 231, 254);
}

qtableview::item<