The Book of QT 4 Translation: 3.1.1 use the QT designer to generate a layout

The Book of QT 4 Translation: 3.1.1 use the QT designer to generate a layout

The Book of qt4 Translation

Qt programming Art

---------------------------------------------------------------------------------

Original Name: The Book of QT 4: The art of building QT applications

The Book of QT 4 Chinese version: QT programming Art

Zhang Xiaoke mcxiaoke@gmail.com

---------------------------------------------------------------------------------

Chapter 3 use the QT designer for Interface Design

 

Although there won't be too many problems in manually writing a simple graphic user interface like the converter in Chapter 2, we still need a graphic interface design tool, especially when you design a dialog box where many GUI elements are to be placed. Qt provides the QT designer tool.

 

3.1 click the create dialog box

 

Next we will use the QT designer to create the byteconverter dialog box in Chapter 2.

When the designer starts, many different windows will be opened, which makes some Windows users not familiar. If you want to use the dock window mode (the default mode of Visual Studio), you can switch between Edit> User Interface Mode> dock window.
(Note: In QT 4.6.2 of windows, the default window is the dock window. The switching mode is set-properties-user interface mode. Select the anchor window or multiple top-level windows)

One window is the new form dialog box, which requires you to select a template. Generally, available Templates include the main window, dialog box, and window parts. QT 4 changes the confirmation and cancellation buttons at the right corner of the bottom edge of the dialog box and places them in the right corner. Select one of them as the template of the byteconverter dialog box. Figure 3.1 shows a dialog with buttons bottom template.

Figure 3.1: dialog box template with standard buttons

You do not need to specify a button. We use the left mouse button to draw a selection box around the button and the delimiter. Press the Del key to delete unnecessary parts for our example.

The next step is to add the row editor and labels to the dialog box framework. They can be found in the widget box, which is usually on the left of the screen. To create a new label, find the label in the display widgets group (located at the bottom of the widget box) and drag it into the dialog box.

 

Figure 3.2: dialog box containing the first group of Parts

 

Now let's add the row editor component. As an input element, this user interface component is located in the input widgets category. You can also drag and drop the component to a specified position. In addition to the three tags and row editors, we also need a button (in buttons → push button), a horizontal interval and a vertical interval. The actions of these Placeholders are similar to scaling bars. When the size of the window containing them changes, they adjust the distance between parts.

You can drag the left mouse button to place the GUI elements. Figure 3.2 shows the composition of the byteconverter dialog box after all required parts are placed.

Users of qt4.2 or updated versions may not be able to find the QT designer template described above, because qiqu has slightly changed the default dialog box template. This is to overcome the order of buttons on different platforms: the current style defines the order of buttons. On Mac OS X and gnome, negative actions (such as cancellation) are on the left, and positive actions (such as confirmation) are on the right hand side. On Windows and KDE, the order is the opposite.

 

Qbuttonbox introduces a new class in qt4.2, which automatically provides a set of default buttons and separators that must be manually set before. By using qbuttonbox, the program automatically selects the correct order of the selected style. Figure 3.3 shows the default cleanlooks (gnome) and plastique (KDE) styles.

 

Figure 3.3 qbuttonbox adjust the button order according to the Environment style instructions

If the QT designer can use qbuttonbox, the best way is to use it, instead of removing it and adding a new button as recommended above. As an alternative, we modify the standardbuttons attribute in the property editor of the designer to only use the close button. Use the drop-down box of the standardbuttons attribute to cancel all activation options, and then select qdialogbuttonbox: close.

Users who are not familiar with the Attribute Editor, such as those who are transferred from other graphic creation tools, should first read section 5 for a brief introduction.

 

3.1.1 use the QT designer to generate a layout

 

These components are not yet neatly arranged. To avoid having to explicitly specify the location precise to the pixel for the interface elements, the QT designer provides some standard la S. To group many parts together, you can first use the left mouse button to draw a rectangle around them to highlight them, then select the desired layout in the context menu (if you click the mouse in the selected range, it will pop up) or in the toolbar. The latter is recommended, especially for Mac users who use a single-key mouse.

For the row editor and labels in this example, the best choice is grid layout. You can select Layout-grid layout in the context menu. Then the layout will be displayed with red outlines, and objects will be displayed as they are grouped in the final program.

When a layout is applied, the QT designer will try to allow developers to deploy components to make any pixel inaccurate. If the selected layout cannot arrange parts according to your intent, or the number of elements in the layout is incorrect, you can cancel the layout by breaking the layout of the context menu.

 

If qbuttonbox is not selected, select a horizontal layout for the timer and button, because qbuttonbox already includes a horizontal layout (layout-horizontal layout) with blank content ).

Figure 3.4: group parts by Layout

Finally, we will arrange the two la s together with the vertical spacers that have not been grouped so far into a single vertical layout. The global layout does not need to be explicitly selected: the QT designer will not highlight it with a separate box. If you right-click the blank area of the dialog box, the context menu will be opened. It affects all previously formed la S and elements (such as vertical spacers) that have not been grouped so far ).

The result is similar to the interface we want, as shown in Figure 3.4. However, labels are not suitable. This can be changed through the context menu item "Change text" or the Attribute Editor on the right of the screen. To better understand the subsequent sections, it is worthwhile to first understand the attributes and principles of QT.

 

Author: Zhang Xiaoke
Source: http://mcxiaoke.cnblogs.com/
Reprint: Original translation. You are welcome to reprint it. It cannot be used for commercial purposes. You must keep the signature of this article, Zhang Xiaoke (including links ).

Tag tags: translation, original, C ++, qt4, Gui, The Book of QT 4