designer-manual-2.html

QT 下载资料仅供参考

</p>
<blockquote><p align="center"><em>Adding Widgets to the Form</em></p></blockquote>
<blockquote>
<p align="center"><b> Value Editors</b></p>
<!-- index Value Editors --><!-- index Value Editors!Dialogs --><!-- index Dialogs!Value Editors --><p>Whilst the Property Editor is used to customize the generic properties of widgets, value editors are used to edit values held within instances of particular widgets. For example a <b>QLineEdit</b> can only contain a single line of text, but a <b>QListBox</b> can contain any number of items each of which may be a line of text, a pixmap, or both. To invoke a widget's value editor double click the widget. (Alternatively right click the widget and a popup menu will appear; if the first menu item is 'Edit', you can click this to access the widget's value editor dialog.) Different widgets have different value editors. See the Value Editors chapter for more details.</p>
</blockquote>
<h3><a name="5"></a>Laying Out Widgets and Previewing</h3>
<h4><a name="5-1"></a>Introduction to Layouts</h4>
<!-- index Layouts --><!-- index Layouts!Vertical --><!-- index Layouts!Horizontal --><!-- index Layouts!Grid --><p>Layouts work by grouping together widgets and groups of widgets, horizontally, vertically or in a grid. Widgets that are laid out together horizontally or vertically can be grouped either with a Layout or with a Splitter; the only difference is that a user can manipulate a Splitter themselves.</p>
<p>If we want to lay out some widgets side by side we would select them and then click the <b>Lay Out Horizontally</b> toolbar button. If we want our widgets to be lined up one above the other we would use the <b>Lay Out Vertically</b> toolbar button. Once we've grouped some widgets together we can then lay out the groups in relation to each other, again using vertical, horizontal or grid layouts. Once we have a collection of laid out groups we then click on the form itself and lay out the groups within the form using one of the layout buttons.</p>
<!-- index Layouts!Space filling --><!-- index Widgets!Push Button --><!-- index Widgets!Line Edit --><p>Some widgets will grow to fill the available space, vertically or horizontally or both ways. Buttons and line edits will fill horizontal space for example, whereas a <em>ListView</em> will fill space in both directions. The easiest way to achieve the layout you want is to use <em>Qt Designer</em>'s layout tools. When you apply a layout to some widgets in some situations the widgets may not lay out the way you want. If a widget does not fill up enough space try changing its <em>sizePolicy</em> to Expanding. If a widget takes up too much space one approach is to change its <em>sizePolicy</em>, and another approach is to use a <em>Spacer</em> to consume excess space.</p>
<p>Spacers have no visual appearance on the running form and are used purely to insert space between widgets or groups of widgets. Suppose you have a widget that takes up too much space. You could break the layout and resize the widget to make room for a spacer. Then you would insert the spacer and layout the spacer with the widgets and the spacer will consume the excess space. If the spacer doesn't take up the right amount of space you can change its sizePolicy for finer control.</p>
<!-- index Undo and Redo!Layouts --><!-- index Layouts!Undo and Redo!Undo and Redo --><!-- index Layouts!Spacers --><p>The best way to learn about layouts and spacers is to try them out. Experimenting with layouts is easy. If you make any changes that you aren't happy with you can easily undo them by clicking <b>Edit|Undo</b> or by pressing <b>Ctrl+Z</b>. In the next section we'll lay out our multiclip example step-by-step.</p>
<h4><a name="5-2"></a>Laying Out Widgets</h4>
<!-- index Layouts --><!-- index Scaling widgets and application windows --><!-- index Automatically scaling widgets and application windows --><!-- index Absolute positioning --><p>Layouts provide a means of grouping widgets and groups of widgets together in horizontal and vertical pairs and in grids. If you use layouts your forms and the widgets they contain will scale automatically when the user resizes the window. This is better than using absolute sizes and positions since you don't have to write any code to achieve the scaling and your users can make the most of their screen size whether they have a laptop or a very large screen desktop machine. Layouts use standard sizes for margins and widget spacing which helps give your applications a consistent and proportional look without requiring any effort on your part. Layouts are also easier and faster to use than absolute positioning; you can just place your widgets on the form in approximate positions and leave the layout tools to size and scale the widgets correctly.</p>
<blockquote>
<p align="center"><b> Selecting Widgets and Inserting Widgets</b></p>
<!-- index Object Explorer --><!-- index Selecting Widgets --><!-- index Rubber band, Selecting --><!-- index Selecting!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p>To select an individual widget, either click the widget itself or click its Name in the Object Explorer window. To select a group either click a fraction outside its red outline or click its Name in the Object Explorer window. To select multiple widgets or groups, click the form to deselect any selected widgets, then <b>Ctrl+Click</b> one widget or group then drag the rubber band so that it touches the other widgets or groups that you want to select. This technique is particularly useful for selecting widgets that are <em>inside</em> another widget. For example to select the radio buttons in a button group but not the button group itself you would click the form then <b>Ctrl+Click</b> one of the radio buttons and drag the rubber band to touch the other radio buttons.</p>
<!-- index Layouts!Break layout --><!-- index Break layout --><p>If we want to insert a widget into a gap between widgets which are in a layout we can click the toolbar button for the new widget and then click in the gap. <em>Qt Designer</em> will ask us if we want to break the layout and if we click <b>Break Layout</b> the layout will be broken and our widget inserted. We can then select the widgets and groups we want to lay out and lay them out again. The same effect can be achieved by clicking the group and either clicking the <b>Break Layout</b> toolbar button or pressing <b>Ctrl+B</b>.</p>
</blockquote>
<p>The layout we want to achieve is to have the current clipping label and currentLineEdit side by side at the top of the form. We want the previous clippings label and the clippingsListBox to occupy the left hand side of the form with the remaining widgets in a column on the right. We want to divide left and right with a splitter and make the left hand side larger by default. We'll leave the sizing of the widgets to <em>Qt Designer</em>. The layout controls are in the <b>Layout</b> toolbar. (By default this is the fourth toolbar counting left to right.) We'll now lay out the widgets we've placed on the form.</p>
<ol type=1><li><p>Click the current clipping label and <b>Shift+Click</b> the currentLineEdit <em>Line Edit</em>. (<b>Shift+Click</b> means hold down the shift key whilst clicking; this will ensure that <em>Qt Designer</em> performs multiple selections.) Most of the layout toolbar buttons will now be available. Click the <b>Lay Out Horizontally</b> toolbar button. (If you hover the mouse over a toolbar button a tooltip giving the button's name will appear.) The two widgets will be moved together with a thin red line surrounding them. It doesn't matter that the widgets aren't the right size or in exactly the right place; as we progress with the layout <em>Qt Designer</em> will size and place them correctly.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-stepone-after.png" width="598" height="504">
</p>
<blockquote><p align="center"><em>Layout Current Clipping Label and currentLineEdit</em></p></blockquote>
<li><p>Click the Previous Clippings label and <b>Shift+Click</b> the clippingsListBox. Click the <b>Lay Out Vertically</b> toolbar button.</p>
<li><!-- index Selecting Widgets --><!-- index Rubber band, Selecting --><!-- index Selecting!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p>We want the remaining widgets to be grouped together vertically. We could <b>Shift+Click</b> each one but instead click the form above the Length label, then drag until the Length label, the LCD Number, the check box and all the buttons are all touching the rubber band (a black outline rectangle) that appears when you drag. Release the mouse, and all the remaining widgets should be selected. If you missed any <b>Shift+Click</b> them. Now click the <b>Lay Out Vertically</b> toolbar button.</p>
<p align="center"><img align="middle" src="qd-layout3-rubberband.png" width="598" height="504">
</p>
<blockquote><p align="center"><em>Selecting a Group of Widgets</em></p></blockquote>
</ol><p>We now have three groups of widgets which must be laid out in relation to each other and then laid out in relation to the form itself.</p>
<p align="center"><img align="middle" src="qd-layout3-groupedwidgets.png" width="598" height="505">
</p>
<blockquote><p align="center"><em>Groups of Layed Out Widgets</em></p></blockquote>
<ol type=1><li><!-- index Layouts!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p><b>Shift+Click</b>ing is used to select individual widgets. To select a group we must click the form to deselect any selected widgets, then <b>Ctrl+Click</b> the group and drag so that the rubber band touches the groups we want to lay out and then release. With the buttons and other widgets already laid out and selected, <b>Ctrl+Click</b> the list box and drag the rubber band over the one of the buttons, then release. Both groups should now be selected. Click the <b>Lay Out Horizontally (in Splitter)</b> toolbar button.</p>
<p align="center"><img align="middle" src="qd-layout2.1-twogroups.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Layout Groups of Widgets</em></p></blockquote>
<li><p>We now have two groups, the top one with the Current Clipping label and the line edit and the group we've just created with the list box, buttons and other widgets. We now want to lay these out in relation to the form. Click the form and click the <b>Lay Out Vertically</b> toolbar button. The widgets will be resized to fill the entire form.</p>
<p align="center"><img align="middle" src="qd-layout2.2-layoutform.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Lay out Widgets in Relation to the Form</em></p></blockquote>
</ol><!-- index Layouts!Spacers --><p>Unfortunately the Length label and the LCD Number take up far too much space, so we will have to revise the layout. With experience you will find that you do not need to rework layouts very often. We will insert a spacer which will use the extra space.</p>
<ol type=1><li><p>First we must make some room for the spacer. Click the LCD Number to select it. Now click the <b>Break Layout</b> toolbar button. Move the LCD Number up a little bit, there's no need to be exact we just want to create some space below it.</p>
<li><!-- index Layouts!Spacers --><p>Now we'll add the spacer. Click the <b>Spacer</b> toolbar button, then click the form in the space you've created between the LCD Number and the check box. A popup menu with two options, Horizontal and Vertical, will appear; click Vertical. We choose vertical because we want the spacer to consume excess vertical space.</p>
<p align="center"><img align="middle" src="qd-layout3.2-addspacer.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Adding a Vertical Spacer</em></p></blockquote>
<li><!-- index Layouts!Spacers --><p>We need to regroup the buttons and other widgets in a vertical group. Drag the mouse from near the bottom right of the form so that the rubber band includes or touches the buttons, the check box, the spacer, the LCD Number and the Length label; then release. If you selected any other widgets by mistake, click the form and try the drag again. Click the <b>Lay Out Vertically</b> toolbar button.</p>
<li><!-- index Layouts!Splitters --><!-- index Layouts!Horizontal --><!-- index Layouts!Spacers --><p>We now have three groups as we had before, only this time with the small addition of the spacer. Select the list box and the buttons by clicking the form, dragging and releasing once the rubber band covers or touches both groups. Click <b>Lay Out Horizontally (in Splitter)</b> to regroup them with the splitter.</p>
<li><p>The last step is to lay out the form itself. Click the form and click <b>Lay Out Vertically</b>. The form should now be laid out correctly.</p>
<p align="center"><img align="middle" src="qd-layout3.5-layoutform.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Lay Out the Form</em></p></blockquote>
</ol><p>There are two small deficiencies in the layout that we have achieved. Firstly the list box and buttons take up an equal width whereas we'd rather have the list box take up about three quarters of the width. Secondly the Length label, the check box and the buttons extend right up to the splitter. They would look more attractive if there was a little bit of space separating them from the splitter.</p>
<p>Expanding the list box half of the splitter would require us to add an <tt>init()</tt> function with the following code:<!-- index init() --></p>
<pre>
    void MulticlipForm::init()
    {
	QValueList&lt; int &gt; sizes;
	sizes &lt;&lt; 250 &lt;&lt; 40;
	Splitter-&gt;setSizes( sizes );
    }
</pre>
<p>We won't add this code now since we'll deal with the code when we come to implement the application's functionality later in the chapter.</p>
<!-- index Layouts!Spacing --><!-- index Object Explorer --><!-- index Selecting Widgets --><p>We will create some space around the splitter by changing the margins of the layout groups that it joins together. To click a layout either click a fraction above the layout's top red line or click the layout's name in the Object Explorer (the Widgets and Source window). (See <a href="designer-manual-14.html#3">Object Explorer Window</a> sidebar for an explanation of the Object Explorer window.) Click the layout that contains the list box, and change the <em>layoutMargin</em> property to 6, then press <b>Enter</b>. Click the layout that contains the buttons and other widgets, and change its <em>layoutMargin</em> to the same value in the same way.</p>
<blockquote>
<p align="center"><b> The Object Explorer</b></p>
<!-- index Object Explorer --><p>View the Object Explorer (Widgets and Source) window by clicking <b>Window|Views|Object Explorer</b>. The Object Explorer has two tabs, the Widgets tab which shows the object hierarchy, and the Source tab which shows the source code you have added to the form. Clicking the name of a widget in the Widget tab will select the widget and show its properties in the Property Editor. It is easy to see and select widgets in the Object Explorer which is especially useful for forms that have many widgets or which use layouts.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-objectexplorer.png" width="314" height="519">
</p>
<blockquote><p align="center"><em>Object Explorer</em></p></blockquote>
<!-- index Code Editing --><!-- index Subclassing --><!-- index Forward declarations --><!-- index Includes --><!-- index Adding!Code --><!-- index Adding!Forward declarations --><!-- index Adding!Includes --><!-- index Adding!Class variables --><!-- index Class variables --><!-- index Deleting!Forward declarations --><!-- index Deleting!Includes --><!-- index Deleting!Class variables --><!-- index Forms!Forward declarations --><!-- index Forms!Class variables --><!-- index Forms!Code editing --><!-- index Forms!destructor --><!-- index Forms!constructor --><p>In the original version of <em>Qt Designer</em> if you wanted to provide code for a form you had to subclass the form and put your code in the subclass. This version fully supports the subclassing approach, but now provides an alternative: placing your code directly into forms. Writing code in <em>Qt Designer</em> is not quite the same as subclassing, for example you cannot get direct access to the form's constructor or destructor. If you need code to be executed by the constructor create a slot called<!-- index init() --> <tt>void init()</tt>; if it exists it will be called from the constructor. Similarly, if you need to be executed before destruction create a slot called<!-- index destroy() --> <tt>void destroy()</tt>. You can also add your own class variables which will be put in the generated constructor's code, and you can add forward declarations and any includes you require. To add a variable or declaration right click the appropriate item, e.g. Class Variables, then click New then enter your text, e.g. <tt>QString fileName</tt>. If one or more items exist right clicking will popup a two item menu with New and Delete as options. To edit code just click the name of a function to invoke the code editor. Code editing and creating slots are covered later.</p>
<!-- index Subclassing --><p>If you subclass the form you create your own<!-- index .cpp --> <tt>.cpp</tt> files which can contain your own constructor, destructor, functions, slots, declarations and variables as your requirements dictate. (See <a href="designer-manual-5.html#1">Subclassing</a> for more information.)</p>
</blockquote>
<!-- index Absolute positioning --><p>In the example we used <em>Qt Designer</em>'s layout tools to lay out our widgets. We will use the layout tools again in the examples presented in later chapters. If you want to use absolute positioning, i.e. to place and size your widgets with exact pixel sizes you can easily do so. To place a widget click it and drag it to the desired position. To resize it, click it, and drag one of the sizing handles (these are small blue squares) until the size is right. To stop the widget from resizing when the window is resized change the <em>hSizeType</em> and <em>vSizeType</em> (these are properties within the <em>sizePolicy</em> property), to Fixed.</p>
<h4><a name="5-3"></a>Previewing</h4>
<!-- index Previewing --><!-- index Preview Mode!Previewing --><!-- index Cross-platform previewing --><p>Although <em>Qt Designer</em> presents an accurate view of our forms we often want to see what a form looks like when it is run. It is also useful to be able to test out some aspects of the form, for example how the form scales when resized or how the splitters work in practice. If we're building multiplatform applications it is also useful to see how the form will look in different environments.</p>
<p>To see a preview either click <b>Preview|Preview Form</b> or press <b>Ctrl+T</b>. To leave preview mode close the window in the standard way for your environment. To view previews which show how the application will look on other platforms click the <b>Preview</b> menu and click one of the menu items that drop down.</p>
<p>Preview the multiclip form and try out the splitter and try resizing the form. In all probability you moved the splitter to the right to reduce the size of the buttons to make the form more attractive. The splitter seemed like a good idea but in practice we want the buttons and the other widgets on the right hand side to take up a fixed amount of space. <em>Qt Designer</em> makes changing layouts very easy, so we'll fix this straight away.</p>
<p align="center"><img align="middle" src="qd-chapdialog-previewing2.png" width="216" height="202">