📄 designer-manual-2.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- /home/reggie/tmp/qt-3.0-reggie-5401/qt-x11-commercial-3.0.5/tools/designer/book/chap-dialogs.leaf:3 --><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Creating a Qt Application</title><style type="text/css"><!--h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }a:link { color: #004faf; text-decoration: none }a:visited { color: #672967; text-decoration: none }body { background: #ffffff; color: black; }--></style></head><body><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr bgcolor="#E5E5E5"><td valign=center> <a href="index.html"><font color="#004faf">Home</font></a> | <a href="classes.html"><font color="#004faf">All Classes</font></a> | <a href="mainclasses.html"><font color="#004faf">Main Classes</font></a> | <a href="annotated.html"><font color="#004faf">Annotated</font></a> | <a href="groups.html"><font color="#004faf">Grouped Classes</font></a> | <a href="functions.html"><font color="#004faf">Functions</font></a></td><td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><p align="right">[<a href="designer-manual-1.html">Prev: Preface</a>] [<a href="designer-manual.html">Home</a>] [<a href="designer-manual-3.html">Next: Creating Main Windows with Actions, Toolbars and Menus</a>]</p><h2 align="center">Creating a Qt Application</h2><h3><a name="1"></a>Starting and Exiting <em>Qt Designer</em></h3><!-- index Starting Qt Designer --><p><em>Qt Designer</em> is controlled in the same way as any other modern desktop application. To start <em>Qt Designer</em> under Windows click the <b>Start</b> button and click <b>Programs|Qt X.x.x|Designer</b>. (X.x.x is the Qt version number, e.g. 3.0.0.) If you're running a Unix or Linux operating system you can either double click the <em>Qt Designer</em> icon or enter <tt>designer &</tt> in an xterm.</p><!-- index Exiting Qt Designer --><!-- index Getting Help --><p>When you've finished using <em>Qt Designer</em> click <b>File|Exit</b>; you will be prompted to save any unsaved changes. Help is available by pressing <b>F1</b> or from the <b>Help</b> menu.</p><p>To get the most benefit from the tutorial chapters we recommend that you start <em>Qt Designer</em> now and create the example applications as you read. Most of the work involves using <em>Qt Designer</em>'s menus, dialogs and editors, with only small amounts of code to type in.</p><p>When you start <em>Qt Designer</em>, by default, you will see a menu bar and various toolbars at the top.<!-- index Widgets and Source window!Object Explorer --><!-- index Object Explorer --><!-- index Pixmaps --> On the left hand side are three windows, the first is the Files window, the second is the Widgets and Source window (the Object Explorer) and the third is the Properties window. The Files window lists the files and images associated with the project; to open any form single click it in the Files list. The Widgets and Source window lists the current form's widgets and slots. The Properties window is used to view and change the properties of forms and widgets. We will cover the use of <em>Qt Designer</em>'s windows, dialogs, menu options and toolbar buttons as we create example applications.</p><p>In this chapter we will build an application called 'multiclip' which allows you to store and retrieve multiple text clippings to and from the clipboard.</p><p align="center"><img align="middle" src="multiclip.png" width="553" height="273"></p><blockquote><p align="center"><em>The Multiclip Application</em></p></blockquote><h3><a name="2"></a>Creating a New Project</h3><!-- index Projects --><!-- index Projects!Creating New --><!-- index Creating Projects!Projects --><!-- index Pixmaps!In Projects --><!-- index Pixmaps!Adding to Forms --><p>Whenever you create a new application we <em>strongly</em> recommend that you create a project file and open the project rather than individual<!-- index .ui --> <tt>.ui</tt> files. Using a project has the advantage that all the forms you create for the project are available via a single mouse click rather than having to be loaded individually through file open dialogs. An additional benefit of using project files is that they allow you to store all your images in a single file rather than duplicate them in each form in which they appear. See <a href="designer-manual-4.html">The Designer Approach</a> chapter's <a href="designer-manual-4.html#2">Project management</a> section for detailed information on the benefits of using project files.</p><!-- index Adding!Forms --><!-- index Forms!Adding --><p>Start <em>Qt Designer</em> if you haven't already. Click <b>File|New</b> to invoke the <em>New File</em> dialog. Click the 'C++ Project' icon, then click <b>OK</b> to invoke the <em>Project Settings</em> dialog. You need to give the project a name, and we recommend that you put each project in its own subdirectory. Click the ellipsis <b>...</b> button to invoke the <em>Save As</em> dialog and navigate to where you want to put the new project. Click the <b>Create New Folder</b> toolbar button to create the 'multiclip' directory. Double click the 'multiclip' directory to make it the current directory. Enter a file name of 'multiclip.pro', and click the <b>Save</b> button. The 'Project File' field of the <em>Project Settings</em> dialog will have the path and name of your new project; click <b>OK</b> to create the project.</p><p align="center"><img align="middle" src="qd-chapdialogs-creatingnewprojects.png" width="565" height="464"></p><blockquote><p align="center"><em>Creating a New Project</em></p></blockquote><p>The name of the current project is shown in the <b>Files</b> toolbar which is the top left toolbar by default. Once we have a project we can add forms and begin to build our application. (See <a href="designer-manual-8.html#1">Customizing Qt Designer</a> for information on changing <em>Qt Designer</em>'s toolbars and windows to suit your preferences.)</p><h3><a name="3"></a>Creating a New Form</h3><!-- index Dialogs!Creating New --><!-- index Creating Forms!Dialogs --><!-- index Adding!Forms --><p>Click <b>File|New</b> to invoke the <em>New File</em> dialog. Several default forms are supplied but we will use the default Dialog form, so just click <b>OK</b>. A new form called 'Form1' will appear. Note that the new form is listed in the Files list and the Properties window shows the form's default property settings.</p><p>Click the Value beside the <em>name</em> property and change the form's name to 'MulticlipForm'. Change the form's caption to 'Multiclip'. The properties are ordered in accordance with the inheritance hierarchy, and caption is roughly in the middle of the property editor. Save the form: click <b>File|Save</b>, enter the name 'multiclip.ui', then click the <b>Save</b> button.</p><p align="center"><img align="middle" src="qd-chapdialogs-creatingmulticlipform3.png" width="690" height="547"></p><blockquote><p align="center"><em>Creating a New Form</em></p></blockquote><blockquote><p align="center"><b> Using the Property Editor</b></p><!-- index Using the Property Editor --><!-- index Properties --><p>The Property Editor has two columns, the Property column which lists property names and the Value column which lists the values. Some property names have a plus sign '+' in a square to their left; this signifies that the property name is the collective name for a set of related properties. Click the form to make the Property Editor show the form's properties. Click the <em>sizePolicy</em> property's plus sign; you will see four properties appear indented below sizePolicy, hSizeType, vSizeType, horizontalStretch and verticalStretch. These properties are edited in the same way as any other properties.</p><p align="center"><img align="middle" src="qd-chapdialogs-propertyeditor.png" width="370" height="732"></p><blockquote><p align="center"><em>Property Editor</em></p></blockquote><p>Some properties have simple values, for example, the <em>name</em> property has a text value, the <em>width</em> property (within <em>minimumSize</em> for example) has a numeric value. To change a text value click the existing text and type in your new text. To change a numeric value click the value and either type in a new number, or use the spin buttons to increase or decrease the existing number until it reaches the value you want. Some properties have a fixed list of values, for example the <em>mouseTracking</em> property is boolean and can take the values True or False. The <em>cursor</em> property also has a fixed list of values. If you click the cursor property or the <em>mouseTracking</em> property the value will be shown in a drop down combobox; click the down arrow to see what values are available. Some properties have complex sets of values; for example the <em>font</em> property. If you click the font property an ellipsis button (<b>...</b>) will appear; click this button and a <em>Select Font</em> dialog will pop up which you can use to change any of the font settings. Other properties have ellipsis buttons which lead to different dialogs depending on what settings the property can have. For example, if you have a lot of text to enter for a <em>text</em> property you could click the ellipsis button to invoke the multi-line text editor dialog.</p><!-- index Properties!Reverting changes --><!-- index Properties!Initial values --><p>The names of properties which have changed are shown in bold. If you've changed a property but want to revert it to its default value click the property's value and then click the red 'X' button to the right of the value. Some properties have an <em>initial</em> value, e.g. 'TextEdit1', but no default value; if you revert a property that has an initial value but no default value (by clicking the red 'X') the value will become empty unless the property, e.g. name, is not allowed to be empty.</p><p>If multiple widgets are selected, the property editor shows the properties that the selected widgets have in common. Changing one of these properties will cause all the selected widgets to have this property changed.</p><!-- index Undo and Redo!Properties --><!-- index Properties!Undo and Redo!Undo and Redo --><!-- index Redo!Undo and Redo --><p>The property editor fully supports Undo and Redo (<b>Ctrl+Z</b> and <b>Ctrl+Y</b>, also available from the <b>Edit</b> menu).</p></blockquote><h3><a name="4"></a>Adding Widgets</h3><!-- index Forms!Adding Widgets --><!-- index Adding!Widgets --><!-- index Cut and Paste (in Applications) --><p>The multiclip application consists of a text box to display the current clipboard text (if any), a list box showing the previous clippings, a length indicator, a checkbox and buttons. If you run the application and resize it all the widgets will scale properly.</p><p>The <em>Qt Designer</em> approach to laying out a form is to place the required widgets on the form in the approximate positions that they should occupy and then use the layout tools to size and position them correctly. We'll now add the multiclip form's widgets.</p><ol type=1><li><!-- index Tooltips --><p>We'll start with the current clipping text box. Click the <b>Text Label</b> toolbar button and click towards the top left of the form. (If you hover the mouse over a toolbar button its name will appear in a tooltip.) We won't bother renaming the label since we'll never refer to it in code; but we need to change its text, so change its <em>text</em> property to 'Current Clipping'. (See the Using the Property Editor sidebar for an explanation of the property editor.)</p><p>Click the <b>Line Edit</b> toolbar button and click towards the top right of the form. Use the Property Editor to change the widget's name to 'currentLineEdit'.</p><li><p>Now we'll add another label and the list box. Click the <b>Text Label</b> toolbar button and click below the Current Clipping label. Change the <em>text</em> property to 'Previous Clippings'. Don't worry about positioning the widgets precisely, nor about the fact that they are the wrong size; the layout tools (covered in the next section) will take care of this.</p><!-- index Properties!Property Editors --><!-- index Deleting!ListBox Items --><!-- index Value Editors!List Box --><p>Click the <b>List Box</b> toolbar button and click the form below the 'Previous Clippings' label. Change the list box's name to 'clippingsListBox'. By default <em>Qt Designer</em> creates list boxes with a single initial value of 'New Item'. We don't want this value (we'll be populating our list box in code later), so we need to remove the value. Right click the list box then click the <b>Edit</b> menu item on the popup menu to invoke the listbox's value editor dialog. Click <b>Delete Item</b> to delete the default item, then click <b>OK</b>. (See the Value Editors sidebar.)</p><li><p>We want to know the length of the current clipping so we'll add a label and an <em>LCD Number</em> widget.</p><!-- index Adding!Text Labels --><!-- index Adding!Labels --><p>Click the <b>Text Label</b> toolbar button and click below the <em>Line Edit</em>. Change its <em>text</em> property's value to 'Length'. Click the <b>LCD Number</b> toolbar button and click below the length label. Change the LCD Number's name to 'lengthLCDNumber'.</p><li><p>Multiclip can be made to detect clipboard changes and automatically add new clippings. We want the user to have control over whether this should happen or not so we will provide a check box which they can use to indicate their preference.</p><p>Click the <b>Check Box</b> toolbar button and click below the <em>LCD Number</em>. Change the checkbox's name to 'autoCheckBox' and its text to 'A&uto Add Clippings'. Note that the <em>accel</em> property automatically changes to <b>Alt+U</b> because the ampersand in the text signifies a keyboard shortcut.</p><li><p>The last widgets we require are the buttons. One way to add the same kind of widget multiple times is to add one, copy it, then paste repeatedly. We will use another approach.</p><!-- index Adding!Duplicate Widgets --><!-- index Widgets!Repeatedly Adding --><!-- index Adding!Push Buttons --><p><em>Double</em> click the <b>Push Button</b> toolbar button; now click below the checkbox to place a button. Click below the button we've just added to add a second button. Add a third and fourth button. Now click the <b>Pointer</b> toolbar button to switch off automatically adding the same widget. Change the first button's name to 'addPushButton' and its text to '&Add Clipping'. Change the second button's name to 'copyPushButton' and its text to '&Copy Previous'. Change the third button's name and text properties to 'deletePushButton' and '&Delete Clipping' respectively. Similarly change the fourth button's name and text to 'quitPushButton' and '&Quit'.</p></ol><p>All our widgets have been placed on the form with their properties changed to suit our application's needs. In the next section we will use <em>Qt Designer</em>'s layout tools to size and position the widgets correctly and in such a way that when the user resizes the form the widgets will scale properly.</p><p align="center"><img align="middle" src="qd-chapdialogs-addingwidgets.png" width="600" height="504">⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -