Detailed QT layout management interface illustrated

T LayoutManagement InterfaceIllustrated is the content of this article, first look at the content. Today to implement a temperature converter Interface。 The following figure:

The horizontal Layout Manager can arrange the parts that it manages in a horizontal order, such as "Centigrade" and "Fahrenheit" in the middle of the above image, which are arranged horizontally, and can be implemented by the horizontal layout manager at this time.

Like the vertical manager, it can arrange the parts it manages in a vertical order, such as the LCD numbers on the right and the dials on the ground in the image above, which are arranged vertically, and can be implemented by vertical managers.

The grid Layout Manager can arrange the parts that it manages as a grid, in the form of a matrix. For example, in the image above, all the parts together, in fact, is a form of matrix to arrange.

When doing the interface design under QT , it is simply to use the above three layout managers to classify and arrange the components.

Take the picture as an example, with a total of 7 parts (a pushbutton, three labels, a slider, a lcdnumber and a dial), you first need to determine the layout of the seven parts on the dialog (pictured above is how I want to arrange). Then there are two ways to use the program to achieve the desired arrangement:

First, take advantage of the horizontal, vertical layout manager: You can split the final layout into the following four parts:

The first part has only one pushbutton, regardless of it first.

The second part is two horizontally arranged labels, which can be put together using the horizontal layout manager;

The third part is a horizontally arranged label and Sider, or it can be put together with the horizontal layout manager;

Part IV is a vertically arranged lcdnumber and dial, which can be put together using the vertical layout manager;

OK, knowing the above points, you can take this action:

The third and fourth sections are combined using the layout manager, and at this point we can consider the third part as a part, and the fourth part as a "part";

Combine the second part using the horizontal layout manager, and at this point the second part can also be seen as a "part";

Then, the third and fourth parts of these two large "parts" can also be combined with the level manager, we call the second three parts, hehe. At this point, the layout of the entire form changes to the following form:

At this point, the entire layout becomes the first part, the second part and the third part of the three large "parts", and, now these three parts are exactly "vertical arrangement", so we can use the vertical layout manager to the three large "parts" again ~ ~

OK, the management of the entire application interface can be completed smoothly with the combination of horizontal and layout manager.

In this approach, we used 3 horizontal layout managers and 2 vertical layout managers.

This method is more intuitive, similar to the function of recursive calls, hehe ~ will be small parts combination in combination in the mix ~ ~ Disadvantage is the use of more layout manager to achieve the final effect ~ So, we have another way to implement this application layout: Using the Grid layout Manager ~ ~ Here is no longer introduced, Next post re-:-)

Then the last time, or to implement the interface of the temperature converter. The following figure:

The last time the interface was implemented using the horizontal layout manager and the vertical layout manager, it was implemented today using the Grid layout manager.

The Grid Layout Manager can arrange the parts it manages as a grid, in the form of grids. For example, in the image above, all the parts together, in fact, is a form of matrix to arrange.

The most typical use of the raster layout manager is to arrange the parts neatly, with one part in each cell in the grid, as shown in the following illustration:

Similar to the above diagram this layout is easy to implement, just need to fill in the individual parts into the specified cell, the sample code is as follows:

M_layout->addwidget (Label1, 0, 0); Fill in the Label1 (0,0) cell m_layout->addwidget (Label2, 0, 2); Fill in the Label2 (0,2) cell ...

And the interface that we're going to implement for this temperature converter is not a regular grid structure. Instead, the following structure:

The 6 parts of the above figure are not the same as the grid form. What to do then. It doesn't matter, the Grid Layout Manager provides a lot of flexibility. In particular, you can set whether a part needs to span n columns, or if it needs to be a longitudinal m line ~ ~. What do you mean? Let's look at a simple example

In the above layout, three parts, two of which are in two cells, but the third part spans two columns, in fact, we can look at this layout diagram:

This will be at a glance. The third component does span two columns (two cells in a horizontal direction).

When you manage three parts using the Raster layout manager, you can:

M_layout->addwidget (m_widget1, 0, 0); The first component is in (0,0) m_layout->addwidget (M_widget2, 0, 1); The second component is in the (0,1) m_layout->addwidget (m_widget3, 1, 0, and five); The third part starts at (1,0) and spans 1 rows, spanning 2 columns

Again, take a look at the following picture:

We can assume that the right side of the component has two lines (two cells in the vertical direction), the corresponding sample code:

M_layout->addwidget (m_widget1, 0, 0); The first component is in (0,0) M_layout->addwidget (M_widget2, 1, 0); The second component is in (1,0) m_layout->addwidget (m_widget3, 0, 1, 2, 1); The third part starts at (0,1) and spans 2 rows, spanning 1 columns

This is quite similar to the way HTML uses table to make a page layout. People who know a little bit about HTML will know that when the table layout, the cells will have rowspan and colspan parameters, the meaning of these two parameters is the so-called "vertical N Rows" and "Across m columns." Here, the layout manager of the grid layout is exactly the same as it is.

OK, look back at the interface we need to implement. Now that we have the concept of rowspan and colspan, we can transform that interface layout:

We extend all the intersecting lines, and we can see that the entire interface is split into 3x4 cells, at which point we will exclaim, haha, this is not a decent grid (although each cell is not the same size, but it doesn't matter, at least the rows and columns are the rules).

OK, let's start our interface layout. To make it easy to observe, I marked their number in each cell:

First look at the Quit button, which starts at (0,0), spans 3 cells, which is colspan=3, so:

M_layout->addwidget (M_quitbutton, 0, 0, 1, 3);

Then there is "Centigrade", the label starting at (1,0), spanning 2 cells, which is colspan=2, so:

M_layout->addwidget (M_cenlabel, 1, 0, 1, 2);

Then there's "Fahrenheit", which starts with a label that takes up 1 cells, so there's no rowspan and colspan (or rowspan and colspan are 1), so:

M_layout->addwidget (M_fahlabel, 1, 2);

And then the label "0", which starts at (2,0), 2 cells, rowspan=2, so:

M_layout->addwidget (M_label, 2, 0, 2, 1);

Then the slider, which starts at (2,1), is 2 cells, rowspan=2, so:

M_layout->addwidget (M_slider, 2, 1, 2, 1);

And then the Lcdnumber, which starts at (2,2), occupies a cell, so:

M_layout->addwidget (M_lcdnumber, 2, 2);

Finally, the dial dial, which starts at (3,2) occupies a cell, so:

M_layout->addwidget (M_lcdnumber, 3, 2);

OK, so far, our entire interface layout is complete, applause:-)

Instead of using the horizontal layout Manager and the vertical layout Manager, using the raster layout Manager only consumes one layout manager to complete the layout of the entire interface . However, one of the biggest drawbacks of this approach is the need to accurately design the position and size of each part in advance, with a large number of parts, only using the grid layout Manager is inadequate.

So, when you do the layout of the interface , you can use the grid layout Manager to do the overall frame design, and then fill in some horizontal or vertical layout managers, or their combinations, in order to achieve better results. This is like, in the Web page, you can use table in the method of table, to achieve some more complex page layout control.

Summary: About us QT layout Administration Interface illustrated content, I hope this article is helpful to you.