Setup instance of layout manager login interface

          The so-called graphical user interface （GUI ）, It is essentially a stack of components . Create a window , Put the button on it , Put the icon on it , So it's an interface . therefore , The placement of components is particularly important , Specify where the component is placed , So that the window can be rendered in the desired way . This involves the mechanism of component localization .

          Qt Two component localization mechanisms are provided ： Absolute positioning and Layout orientation .

• Absolute positioning ： Give the coordinates and length and width values of the components . such Qt You can know the location of components and set the size of components . But there's a problem ： If user changes window size , For example, click the maximize button or drag the edge of the window with the mouse , Components with absolute positioning will not have any response . This is because I didn't tell Qt When the window changes , Whether the component wants to update itself and how .
• Layout orientation ： Put components into a layout , The layout is managed by a dedicated layout manager . When you need to adjust the size or position ,Qt Use the corresponding layout manager to adjust .

          Components with absolute positioning can prevent users from changing the window size to solve this problem , But this is also inappropriate . Layout positioning perfectly solves the defect caused by absolute positioning .

          Qt The three most commonly used layouts provided ：

• QHBoxLayout： Layout horizontally from left to right ;
• QVBoxLayout： Layout vertically from top to bottom ;
• QGridLayout： Lay out in a grid , Be similar to HTML Of table;

The layout control provided by the system

          The system provides 4 A layout control , But it's not very flexible to use , I won't go into details here .

 

utilize widget Layout

          The second layout is to use the widget To make the layout , stay Containers in

          Can be in widget The control can be horizontally 、 vertical 、 Grid layout and other operations . Flexible use of the characteristics of the spring can make the step more beautiful , Here's a login window , utilize widget You can build the following login interface ：

          The following is a demonstration of the steps to build the login interface in the above figure ：

• New project ——> open ui file ：

• Break the layout , Otherwise, the control layout cannot be customized ：

•   add to label and line Edit：

• modify label after , Create a new one widget, And as shown in the figure, the label and line Edit All dragged in widget in , Then click grid layout ：

• After clicking the grid layout , Will find widget Box size and labe The two controls do not match in size ,

          It needs to be selected widget box , Set... In the property bar sizePOlicy The vertical strategy is fixed. The effect is as follows ：

•   Add two buttons , Double click to change to login and exit , Also create a new one widget, And drag both buttons into widget in , Then click grid layout . And select widget box , Set... In the property bar sizePOlicy The vertical strategy is fixed.：

  

• Choose the big one widget box , Set it to vertical layout （ This is an important step , Otherwise, adding springs in the next step will not work ） ：

•    Add spring , And set the width of the spring between some controls ：

•   The final effect is as follows ： 

Add

          You can set the size of the login dialog to fixed in the dialog properties （ Just set the maximum and minimum to the same ）. You can also set the input password box to secret input , Just check the password input box , Return the schema in the property echoMode Set to Password that will do .