Qt Style Sheet Practice (a): Buttons and associated menu (24K Pure Open source, total four articles)

Guide

Just as the CSS (Cascade style sheet) in Web front-end development, QT development can also use the modified version of QSS to isolate the logical business and the user interface. In this way, art designers and logical implementations can perform their duties without interference. More importantly, due to the separation of interface and logic processing, low coupling makes the workload of code refactoring to be minimized. The syntax of QSS and CSS is almost identical, except for some of the properties that Qt itself adds, the rest of the properties can be found in CSS2 or CSS3. Therefore, if there has been experience in the use of CSS, then the use of QSS will be easy. With regard to the use of QSS, we intend to write a series of blogs to document some of the techniques and methods used in the process. This article is the first series, mainly discusses the effect of Qpushbutton and Qmenu under the action of QSS.

QSS Introduction

QSS (Qt style sheet) draws on the good ideas of CSS and realizes the separation of interface and logic. The box model concept is introduced inQSS, which is one of the core concepts in style sheet technology. The specific explanation on the net said quite a lot of, QT itself comes with the documentation also has a more detailed description. Before designing with a box model, we need to understand which components in QT can be laid out in a box model:

component classes that can apply box models in QT

Qcheckbox	Qcheckbox tick symbols can be customized using:: Indicator sub-components. By default, the checkmark is located in the upper-left corner of the component rectangle. The Spacing property of Qcheckbox can be used to specify the spacing between tick marks and text content.
Qcombobox	For Qcombobox, the support box model is actually the bounding box (frame) of the parcel Qcombobox, and the Qcombobox drop-down button is customized by::d the Rop-down subassembly, by default the drop-down button is located in the upper-right corner of the padding rectangle in the box model. The arrow numbers in the drop-down buttons are customized by::d Own-arrow subcomponents, which are positioned by default in the center of the subassembly.
Qgroupbox	Qgroupbox title with:: Title sub-component for customization, the location of the title according to Qgroupbox::textalignment specific values. For optional Qgroupbox, a checkmark is also included in the title, and the checkmark is marked with: indicator to customize, spacing is still used to set the spacing between the tick mark and the text.
Qspinbox (Qdateedit,qdatetimeedit)	, by default the right part of the Spinbox is divided into top and bottom two buttons. Take the upward arrow as an example: Up-button and:: Up-arrow are used to customize the button and the arrow number in the button respectively. The arrow number is in the middle of the button by default, similar to the down button, just using::d Own-button and::d Own-arrow sub-component.
Qtoolbox	Qtoolbox is a component with the QQ folding function, so the standalone page uses:: Tab sub-component customization. :: Tab component supports some pseudo states:: Only-one,: First,: Middle,:p revious-selected,: next-selected,: selected, thus achieving the purpose of customizing a specific page.
Qmenubar	The Spacing property of the menu bar component specifies the spacing between menu items, and individual menu items can also be customized by:: Item subcomponent. It is important to note, however, that the style sheet loses its effect because the menu bar is integrated into the System menu bar under Mac.
Qprogressbar	The progress bar component uses:: Chunks to customize the progress bar style, the Text-align property is used to set the alignment direction of the text in the progress bar: left, center, right
Qscrollbar	The composition of the scroll bar is actually very complex, depending on the vertical and horizontal direction of the difference, by:: Handle,:: Add-line,:: Sub-line,:: Add-page,:: sub-page,:: Right-arrow,:: Left-arrow,:: Down-arrow,:: Up-arrow and other sub-components. Pseudo state: Horizontal: Vertical is used to determine the direction of the scrollbar, Width (min-width), and Height (min-height) to determine the different lengths and widths of the scrollbar.
Qtoolbar	Pseudo State of toolbar: Top,: Left,: Right, the use of bottom depends on the location of the toolbar, and: First,: Last,: Middle,: Only-one is used to refer to the specific location in the toolbar. The divider for the toolbar:: Separator Sub-component refers to,:: Handle refers to the handle of the Mobile toolbar.
Qmenu	Standalone items in the menu use:: Item sub-component customization, in addition to common pseudo-states:: Item also supports: selected,:d Efault,: Exclusive, and: non-exclusive pseudo-state. With these pseudo states, you can customize different appearances for menu items of different states. For the menu items that can be ticked, use:: Indicator to customize the tick marks,:: Separator To customize the delimiter between menu items, and for menu items with submenus, the arrows can be used:: Right-arrow,:: Left-arrow for Customization, and:: Scroller and:: Tearoff two sub-components, temporarily do not understand the specific role.
Qlabel	Qlabel not supported: hover pseudo-state, starting from Qt4.3, setting the style sheet for Qlabel also implicitly specifies the Qframe::framestyle attribute.
Qlineedit	For Qlineeidt,selection-color, the Selection-background-color property specifies the text and background color of the selected text, respectively, The Lineedit-password-character property describes the character that the password entry displays. will be explained in the following practice.
Qpushbutton	Support: Default,: Flat,: checked pseudo-state, for the button with the associated menu, you can use:: Menu-indicator to customize the drop-down menu tag. Instead: The open and: closed pseudo states are used to customize the appearance of the button when the menu is turned on and off.
Qradiobutton	Ibid.:: Indicator used to customize the options box in front of the text, spacing specify the spacing between the text and the option box.
Qslider	The horizontal qslider,min-width and Height properties must be provided at the same time, and for vertical Qslider, both the Min-height and Width properties must be provided. Qslider consists of:: Groove and:: Handle two parts. :: Groove subassembly is a slot for:: Handle slide on top.
Qsplitter	The main parts of the form splitter are:: Handle. Through:: Handle can dynamically change the size of different sub-windows in the splitter.
Qtextedit	Use Selection-color, Selection-background-color property customization, other custom way see Qabstractscrollarea.
Qtoolbutton	If Qtoolbutton has a menu associated with it, then the Qpushbutton is treated the same way. If it is set to Qtoolbutton::menubuttonpopup mode, then:: Menu-button is used to draw the menu button, while:: Menu-arrow is used to draw the arrow number in the button. Note: If you set the background color of the Qtoolbutton, you must also set the width of the border to work. This is because the default drawn border of Qtoolbutton completely obscures the background color set by the user.
Qabstractscrollarea	All subclasses derived from the Qabstractscrollarea class, including Qtextedit, Qabstractitemview, can implement a scrollable background by setting the Background-attachment property. By setting the fixed and scroll for background-attachment, the background will be fixed or followed by scrolling.
Qheaderview	Qheaderview is part of the Model/view framework, the most important subcomponents are:: section,::section support: Middle,: First,: Last,: Only-one,: next-selected,: previous-selected,: Selected,: Checked and other pseudo-states. :: Up-arrow and::d own-arrow the sort mark used to customize the header.
Qlistview (Qlistwidget)	The Show-decoration-selected property controls whether the whole item is selected or just the text of the item, and the other is the same as Qtableview.
Qtableview (Qtablewidget)	When view supports zebra bars, the Alternate-background-color property specifies alternate colors to implement the Zebra ribbon, and the Selection-color and Selection-background-color properties specify the text color and background color of the selected item. Note: The background color and border width values are guaranteed to be set at the same time.
Qtreeview (Qtreewidget)	The Show-decoration-selected property controls whether the whole item is selected or just the text of the item, subcomponents:: Branch and:: Item for fine-grained control.

Application examples

Here's how to use QSS to customize the appearance of buttons and their associated menus. We first initialize the button and its associated menu with the following code, and look at its effect under the Windows 7 default theme:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

ui.serviceType->setFixedWidth(95);m_mainMenu = newQMenu(this);m_osSubMenu = newQMenu(this);m_appSubMenu = newQMenu(this);m_details = newQAction(QStringLiteral("Details"),this);m_details->setCheckable(true);m_details->setChecked(true);m_settings = new QAction(QStringLiteral("Settings"), this);m_settings->setIcon(QIcon(":/misc/preference"));m_settings->setShortcut(QKeySequence::Print);m_os = newQAction(QStringLiteral("OS"), this);m_app = newQAction(QStringLiteral("Applications"), this);m_github = newQAction(QStringLiteral("Github"), this);m_github->setIcon(QIcon(":/app/github"));m_github->setShortcut(QKeySequence("Ctrl+G"));m_amazon = newQAction(QStringLiteral("Amazon"), this);m_amazon->setIcon(QIcon(":/app/amazon"));m_photoshop = new QAction(QStringLiteral("Photoshop"), this);m_photoshop->setIcon(QIcon(":/app/photoshop"));m_facebook = newQAction(QStringLiteral("Facebook"), this);m_facebook->setIcon(QIcon(":/app/facebook"));m_apple = newQAction(QStringLiteral("Apple"), this);m_apple->setShortcut(QKeySequence("Ctrl+A"));m_apple->setIcon(QIcon(":/os/apple"));m_windows = newQAction(QStringLiteral("Windows"), this);m_windows->setIcon(QIcon(":/os/windows"));m_windows->setShortcut(QKeySequence("Ctrl+W"));m_fedora = newQAction(QStringLiteral("Fedora"), this);m_fedora->setIcon(QIcon(":/os/fedora"));m_fedora->setDisabled(true);m_osSubMenu->addAction(m_apple);m_osSubMenu->addAction(m_windows);m_osSubMenu->addAction(m_fedora);m_os->setMenu(m_osSubMenu);m_appSubMenu->addAction(m_amazon);m_appSubMenu->addAction(m_github);m_appSubMenu->addAction(m_facebook);m_appSubMenu->addSeparator();m_appSubMenu->addAction(m_photoshop);m_app->setMenu(m_appSubMenu);m_mainMenu->addAction(m_details);m_mainMenu->addSeparator();m_mainMenu->addAction(m_os);m_mainMenu->addAction(m_app);m_mainMenu->addAction(m_settings);ui.serviceType->setMenu(m_mainMenu);

Do not add any qss effect, the effect is as follows:

A gray feeling, not lit. For practical software products, this step is enough. What if the customer asks for a more personal look? At this moment, we can try to use the QSS to transform. We put all the style statements into one *. qss file, and then load it in the main function. It is important to note that we should add the. qss file to the. Compiled in the qrc file. You should recompile the. qrc file after you modify the. qss file every time. Otherwise, no changes will be seen on the interface. The code is as follows:

1234	QFile file(":/ThemeRoller/style");file.open(QFile::ReadOnly);qApp->setStyleSheet(file.readAll());file.close();

Consider Qpushbutton as the practiced hand object and write the following QSS code:

12345678910

QPushButton {    background: white;    border: 1pxsolidrgb(41, 57, 85);    border-radius: 3px;  # 设置边框具备3个像素的圆角    font-weight: bold;    # 字体设置为加粗}QPushButton:hover {    background: lightgray;}

The results are compared as follows:

The effect seems to be good, but we find that the arrow on the right has shifted to the lower right corner, not very harmonious. We tried to make adjustments using the subcontrol-position and subcontrol-origin two properties (position and origin are very easy to confuse in CSS, Specific meanings need to be carefully differentiated):

qpushbutton::menu-indicator{    Subcontrol-position:right Center;    subcontrol-origin:padding;}

Obviously, the system's default arrow number is not very harmonious, so we try to replace the arrow number, and when the menu is opened to the downward arrow, the menu is set to the right of the horizontal arrow number:

1234567891011

QPushButton::menu-indicator:open {    image: url(:/misc/down_arrow_2);    subcontrol-position: rightcenter;    subcontrol-origin: padding;}QPushButton::menu-indicator:closed {    image: url(:/misc/right_arrow_2);    subcontrol-position: rightcenter;    subcontrol-origin: padding;}

The results are as follows:

Well, at this point our buttons seem to look much better. Take a look at how the qss of the entire context menu is written. First, it is necessary to adjust the background color to white, as follows:

12345678

QMenu {    background-color: white;    padding: 1px;  # 缩小菜单项四个方向的padding}QMenu::item{    background-color: transparent;}

　　

We can find a serious flaw, when the mouse across the corresponding menu item, the text content is not visible, obviously because of the background color, so we have to modify AH:

1234	QMenu::item:selected{    background-color: rgb(234, 243, 253);    color: black;}

Use pseudo state: Selected to set the text color to black when the mouse is over, that is, it remains the same. But at this point we do not see the effect of the mouse across, so give the currently selected menu item a background color bar (RGB (234, 243, 253)). What is the effect of that?

Depending on the needs, the custom-made appearance is also very different. The main thing is to understand the role of various properties in QSS, the rest of the work is to do a good job layout design and image design. Beautiful and generous interface design can not be separated from the delicate icon design and reasonable layout management.

Reference

1. Qt Style Sheet Reference

Http://www.cnblogs.com/csuftzzk/p/qss_button_menu.html

Qt Style Sheet Practice (a): Buttons and associated menu (24K Pure Open source, total four articles)