Chapter 6 Qt Layout manager Layout and qtlayout

Chapter 6 Qt Layout manager Layout and qtlayout

Chapter 6 Qt Layout manager Layout

Have you ever found a problem? Let's place a component. The original positioning of the component is to give the coordinates and high values of the widget so that Qt can know the position of the component. When the user changes the size of the window, the component remains quietly in the original position, which is obviously not very difficult. Therefore, Qt provides a mechanism-layout to solve this problem. You just need to put the component into a certain layout. When you need to adjust the size or position, Qt knows how to adjust it.

The following is a simple example:

 1 #include <QApplication> 2 #include <QWidget> 3 #include <QSpinBox> 4 #include <QSlider> 5 #include <QHBoxLayout> 6  7 int main(int argc, char *argv[]) 8 { 9     QApplication a(argc, argv);10     QWidget w = new QWidget;11     w.setWindowTitle("Enter your age");12 13     QSpinBox *spinBox = new QSpinBox;14     QSlider *slider = new QSlider(Qt::Horizontal);15     spinBox->setRange(0, 130);16     slider->setRange(0, 130);17 18     QObject::connect(slider, SIGNAL(valueChanged(int)), spinBox, SLOT(setValue(int)));19     QObject::connect(spinBox, SIGNAL(valueChanged(int)), slider, SLOT(setValue(int)));20 21     spinBox->setValue(35);22 23     QHBoxLayout *layout = new QHBoxLayout;24     layout->addWidget(spinBox);25     layout->addWidget(slider);26     w.setLayout(layout);27 28     w.show();29     30     return a.exec();31 }

Compile the running result (directly change the form size to see the Component Changes ):

Qt has five main layout types:

Horizontal Layout

Vertical layout

Horizontal layout with Splitters

Vertical layout using the Splitter

Grid layout

The following uses the Qt Creator designer to illustrate the vertical layout. Other la s are used in a similar way.

1. Drag three PushButton and a Vertical Layout (Vertical Layout manager) to the center panel in the device bar on the left. For example.

2. Place the three buttons in the vertical layout manager. The effect is as follows. We can see that the buttons are arranged vertically, and the width can be changed, but the height is not changed.

3. Select the Layout manager and press the Break Layout button on the toolbar to cancel the Layout manager. (You can also remove the button first, and then press the Delete key to Delete the layout manager .)

4. Next we will use the Splitter component (QSplitter ).

Select the three buttons at the same time, and then press the Lay Out Vertically in Splitter (vertical Splitter) in the toolbar above ).

The result is as follows. You can see that the button size can be changed accordingly. This is the difference between the splitter and the layout manager.

5. In fact, the layout manager not only controls the layout of the device, but also makes the size of the device change with the size of the window.

Drag a Text editor Text Edit in the center of the main window.

Run the program directly. The effect is as follows. We can see that its size and position will not change with the window.

Next, select the main window component, right-click in the blank space, and choose Layout-> Lay Out in a Grid to make the central area of the main window in the Grid Layout manager.

 

As you can see, the text editor occupies the central area of the entire main window.

 

Run the program and you can see that the size of the text editing box changes no matter how the window is stretched.