Join the group to receive Qt development learning materials and technical exchanges below ↓↓↓↓↓↓↓↓

Preface

Once upon a time, we all spent time under the black frame. We were fed up with the fear of being dominated by the black frame. We wanted to jump out and see the outside. We were fed up with hearing that the interface is just a skin, and the code behind it is king. Words, when you feel that the black frame can no longer satisfy you, I think it’s time for you to make some changes. If you are learning C++, I think Qt can be an option for you to enter the interface. In this article, we will not talk about functions or classes. In short, we will not talk about code. In addition to code, let’s talk about How to layout, how to use qt to make a beautiful interface❤️. I saw this comment under a blog post about layout: Why do you have to lay it out? Wouldn’t it be better to just lay it out yourself? I believe that many students who are new to layout have this idea. Of course, I had the same idea as you at the beginning, but now, I dare not have this idea anymore . The reason why he said this was that he was either new to the interface or clicked in casually. Aba Aba made a comment after reading it. When I first came into contact with the interface, the layout was really not that important. Our software (can’t even be called software, just an empty shell) only had a few components in total, two buttons? Three text boxes? When you first came into contact with it, have you considered the problem of random changes in the size of the software? Have you considered adding components later? As our software becomes larger and larger, it is particularly important to allow components to automatically allocate space.

Divided into two major sections: layout and Qt version of CSS, the basics are first, and the advanced ones are later. The first part talks about layout components and css syntax, etc., and then we practice it and solve the problems encountered. I can’t finish it. Please give me some suggestions. Save it first and check it out later if needed. The Qt5.10.0 version is used. For more detailed usage methods, please click on the official document below to view ❤️Creation is not easy, your likes are the motivation for my creation.

1. Introduction to layout related components

Related to the layout are the three items marked by the red squares in the picture above, which are explained in turn below.

1.Layouts (layout)

The word Layouts must be familiar to you. The meaning of layout is that there are 4 layout types in the first red box, namely Vertical Layouts (vertical layout) , Horizontal Layouts (horizontal layout) , Grid Layouts (network layout) , Form Layouts .

Vertical Layouts

Using vertical layout, components are automatically distributed vertically.

Horizontal Layouts

Using horizontal layout, components are automatically distributed horizontally.

Grid Layouts

Using a horizontal layout, components are automatically distributed in the grid direction.

Form Layouts

Similar to grid layout, but only the rightmost column of the grid changes size.

2.Spacers (space spacers/springs)

There are two types of spacers, one is horizontal and the other is vertical.

Spacer has four properties:

spacerName（名字）

orientation（决定spacer是水平间隔或垂直间隔）

sizeType（单独说）

sizeHint(该值是组件作为在布局管理器中部件的缺省大小，既建议值，也是缺省值，其他组件该值不可修改，但Spacer组件可修改，组件实际大小受部件的大小策略、sizeHint以及布局中其他部件的影响)

Among the four attributes, sizeType should be discussed:

sizeType attribute description	value	illustrate
Fixed	0	Fixed value strategy: The default size corresponding to Qwidget.sizeHint() is the fixed size of the component, so the component cannot be enlarged or reduced.
Minimum	GrowFlag	Specify the minimum value strategy: The default size corresponding to Qwidget.sizeHint() is the minimum value. The widget cannot be resized to a size smaller than the default size, and the value should be sufficient to satisfy the display of the widget. Widgets allow expansion, but Qt does not recommend expansion (for example: horizontal buttons).
Maximum	ShrinkFlag	Specify the maximum value strategy: The default size corresponding to Qwidget.sizeHint() is the maximum value. If other components require space and will not destroy the component, then the component is allowed to be reduced (for example: a dividing line).
Perferred	GrowFlag\|ShrinkFlag	Preference strategy: The default size corresponding to Qwidget sizeHint() is the best effect. The widget is allowed to be enlarged or reduced, but it is not recommended to expand larger than sizeHint(). This strategy is the default strategy.
Expanding	GrowFlag\|ShrinkFlag\|ExpandFlag	Scaling strategy: The default size corresponding to Qwidget.sizeHint() is a reasonable size, but the widget is allowed to shrink and is available. The widget can take advantage of the extra space, so it will get as much space as possible (e.g. a slider in the horizontal direction).
MinimumExpanding	GrowFlag\|ExpandFlag	Minimum scalability strategy: The default size corresponding to Qwidget.sizeHint() is the minimum value and the size is sufficient. The widget is allowed to use extra space, so it will get as much space as possible (for example: a slider in the horizontal direction).
Ignored	ShrinkFlag\|GrowFlag\|IgnoreFlag	The default size corresponding to Qwidget.sizeHint() will be ignored, and the widget will obtain as much space as possible.

If nothing else, newcomers may not understand this explanation. In plain English, it looks like this:

Fixed: The control cannot be enlarged or reduced. The size of the control is its sizeHint.

Minimum: The sizeHint of the control is the minimum size of the control. The control cannot be smaller than this sizeHint, but it can be enlarged.

Maximum: The sizeHint of the control is the maximum size of the control. The control cannot be enlarged, but it can be reduced to its smallest allowed size.

Preferred: The sizeHint of the control is its sizeHint, but it can be enlarged or reduced.

Expandint: The control can increase or decrease by itself.

MinimumExpanding: The control's sizeHint is its sizeHint, but additional space can be used, that is, it will get as much space as possible.

?Ignored: The control's sizeHint has no effect, it will try to get as much space as possible.

So when you see this, don’t say again that your Spacer cannot set the size.

3.UI Designer Toolbar

The first four have little to do with our article and will not be introduced. Let’s look at the rest later.

Lay Out Horizontally: Lay out the selected components on the form horizontally? Lay Out Vertically: Lay out the selected components on the form vertically? Lay Out Horizontally in splitter: Use a split bar to split the selected components on the form horizontally? Lay Out Vertically in splitter: Use a split bar to vertically split the selected components on the form? Lay Out in a Form Layout: Lay out the selected components on the form? Lay Out in a Grid: Lay out the selected components on the form Grid layout of selected components? Break Layout: Release the layout of the selected components on the form, that is, break the layout. ?Adjust Size: Automatically adjust the size of the selected component.

At this time, you may want to ask whether the layout here is the same as the layout just now. It is the same. But here, you can layout the components more quickly, such as the following:

Split layout

As for the split layouter, it is not available by default. To use it, first select the control to be placed in QSplitter. At this time, the split layout icon becomes brighter, and then select the horizontal or vertical layouter.

Use the handleWidth property to adjust the spacing between components. By default, opaqueResize in the property is checked (checked). When you use the mouse to drag the boundary between divided sub-windows, the sub-window will dynamically change its size. However, if you want to change the size when you release the mouse, you can set the following parameters and uncheck it. The effect is as follows (tick on the left):

That’s it for writing about layout-related components or tools. Here are some examples I made.

2. Qt style sheet QSS

Qt comes with a purely natural skin function QSS, which is the Qt version of CSS. Even if you don’t have an artist, you can easily create a cool interface. For the complete official documentation, you can view the blue link at the beginning of the text. Here, only the commonly used syntax is introduced.

1. Style sheet syntax

Selector type

I wonder if you have ever set a background image on an interface, but the background of components on the interface, such as buttons, will also be set to the background image, as shown in the figure below. This is a problem caused by the selector.

The frame in the figure is called a selector, which means that the settings of the style sheet are only valid for this selector. The frame in the picture above is the object name of a form. If the selector is a specific class instance object name, it should be represented by # in front. You can also change #frame in the picture to QFrame (type name). The difference is that the former It only has an effect on a specific form, and the latter has an effect on all QFrame classes and their subclasses. In addition to this, there are the following selectors:

?QPushButton[flat="false"]: Matches non-flat QPushButton instances.

?.QPushButton: Matches instances of QPushButton, but does not match its subclasses. Note the previous point.

?QPushButton#okButton: Matches all QPushButton instances whose object name is okButton.

?QDialog QPushButton: Matches all QPushButton instances that are descendants (children, etc.) of QDialog.

?QDialog > QPushButton: Matches all QPushButton instances that are direct descendants of QDialog.

statement

QPushButton{color:rgb(255, 0, 0);} 
/*括号里面的color:rgb(255, 0, 0);被称为声明。*/
/*该语句的意思是将QPshButton类的按钮中的字体设置为红色。*/
QPushButton{background-color: rgb(0, 170, 255);}
/*该语句的意思是将QPshButton类的按钮的背景色设置为蓝色。*/

If you do as above, the font color of the button can be seen before compilation, but the button background may not be displayed. It must be compiled before it can be displayed. In this case, you can add border-radius:0px;, so that the button The background color will be displayed, the specific reason is not very clear. And border-radius:0px; means the border radius. As the value gets larger and larger, the button becomes more and more rounded~~, as shown below.

?Sub control

As shown above, the QTabWidget component has its prototype as shown below. For window components with complex styles (which are composed of several small components), you must access the sub-controls of the widget, use the style sheet separately, and directly right-click on it. QTabWidget using style sheets is not available.

For example, the red one is the widget tab, QTabBar or QToolBox, and the blue one is pane, the pane (frame) of QTabWidget. If you want to achieve the effect in the picture, you need to set the style sheet separately.

pseudo state

What is the purpose of the pseudo state? It is used for dynamic effects on the interface. It is used to detect a series of actions, such as hovering the mouse over a button and pressing the mouse. The dynamic effects produced by such a series of actions.

The effect may be too big, but for the sake of demonstration, it doesn't matter.

? Hover:hover ? No hover:!hover ? Hover and checked:hover:checked ?Hover and press:hover:!pressed

If you want to modify the border color of the input box in the picture, you can use

border-style:solid;
border-color: rgb(170, 170, 255);

The premise is to define the border style as the following type (the default type is none, no border, which will not be displayed even if the border color is used):

?none defines no borders. ?hidden Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts. ?dotted defines a dotted border. Renders as a solid line in most browsers. ?dashed defines a dashed line. Renders as a solid line in most browsers. ?solid defines a solid line. ?double defines double lines. The width of the double line is equal to the value of border-width. ?groove defines the 3D groove border. The effect depends on the value of border-color. ?ridge defines a 3D ridge border. The effect depends on the value of border-color. ?inset defines the 3D inset border. The effect depends on the value of border-color. ?outset defines the 3D outset border. The effect depends on the value of border-color.