<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- designer-manual.qdoc -->
<title>Getting to Know Qt Designer | Qt Designer Manual</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtdesigner-manual.html">Qt Designer Manual</a></td><td >Getting to Know Qt Designer</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#launching-designer">Launching Designer</a></li>
<li class="level1"><a href="#the-user-interface">The User Interface</a></li>
<li class="level1"><a href="#the-concept-of-layouts-in-qt">The Concept of Layouts in Qt</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Getting to Know Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-to-know.html-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/designer-screenshot.png" alt="" /></p><a name="launching-designer"></a>
<h2 id="launching-designer">Launching Designer</h2>
<p>Once you have installed Qt, you can start <i>Qt Designer</i> in the same way as any other application on the development host. You can also launch <i>Qt Designer</i> directly from Qt Creator. Qt Creator automatically opens all .ui files in the integrated <i>Qt Designer</i>, in <b>Design</b> mode.</p>
<p>Generally, the integrated <i>Qt Designer</i> contains the same functions as the standalone <i>Qt Designer</i>. For more information about the differences, see the <a href="http://doc.qt.io/qtcreator/index.html">Qt Creator Manual</a>.</p>
<p>If you have large forms that do not fit in the Qt Creator <b>Design</b> mode, you can open them in the stand-alone <i>Qt Designer</i>.</p>
<a name="the-user-interface"></a>
<h2 id="the-user-interface">The User Interface</h2>
<p>When used as a standalone application, <i>Qt Designer</i>'s user interface can be configured to provide either a multi-window user interface (the default mode), or it can be used in docked window mode. When used from within an integrated development environment (IDE) only the multi-window user interface is available. You can switch modes in the <b>Preferences</b> dialog from the <b>Edit</b> menu.</p>
<p>In multi-window mode, you can arrange each of the tool windows to suit your working style. The main window consists of a menu bar, a tool bar, and a widget box that contains the widgets you can use to create your user interface.</p>
<a name="mainwindow"></a><div class="table"><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-main-window.png" alt="" /></td><td ><b>Qt Designer's Main Window</b><p>The menu bar provides all the standard actions for managing forms, using the clipboard, and accessing application-specific help. The current editing mode, the tool windows, and the forms in use can also be accessed via the menu bar.</p>
<p>The tool bar displays common actions that are used when editing a form. These are also available via the main menu.</p>
<p>The widget box provides common widgets and layouts that are used to design components. These are grouped into categories that reflect their uses or features.</p>
</td></tr>
</table></div>
<p>Most features of <i>Qt Designer</i> are accessible via the menu bar, the tool bar, or the widget box. Some features are also available through context menus that can be opened over the form windows. On most platforms, the right mouse is used to open context menus.</p>
<a name="widgetbox"></a><div class="table"><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-widget-box.png" alt="" /></td><td ><b>Qt Designer's Widget Box</b><p>The widget box provides a selection of standard Qt widgets, layouts, and other objects that can be used to create user interfaces on forms. Each of the categories in the widget box contain widgets with similar uses or related features.</p>
<p>You can display all of the available objects in a category by clicking on the handle next to the category label. When in <a href="designer-widget-mode.html">Widget Editing Mode</a>, you can add objects to a form by dragging the appropriate items from the widget box onto the form, and dropping them in the required locations.</p>
<p><i>Qt Designer</i> provides a scratch pad feature that allows you to collect frequently used objects in a separate category. The scratch pad category can be filled with any widget currently displayed in a form by dragging them from the form and dropping them onto the widget box. These widgets can be used in the same way as any other widgets, but they can also contain child widgets. Open a context menu over a widget to change its name or remove it from the scratch pad.</p>
</td></tr>
</table></div>
<a name="the-concept-of-layouts-in-qt"></a>
<h2 id="the-concept-of-layouts-in-qt">The Concept of Layouts in Qt</h2>
<p>A layout is used to arrange and manage the elements that make up a user interface. Qt provides a number of classes to automatically handle layouts -- QHBoxLayout, QVBoxLayout, QGridLayout, and QFormLayout. These classes solve the challenge of laying out widgets automatically, providing a user interface that behaves predictably. Fortunately knowledge of the layout classes is not required to arrange widgets with <i>Qt Designer</i>. Instead, select one of the <b>Lay Out Horizontally</b>, <b>Lay Out in a Grid</b>, etc., options from the context menu.</p>
<p>Each Qt widget has a recommended size, known as sizeHint(). The layout manager will attempt to resize a widget to meet its size hint. In some cases, there is no need to have a different size. For example, the height of a QLineEdit is always a fixed value, depending on font size and style. In other cases, you may require the size to change, e.g., the width of a QLineEdit or the width and height of item view widgets. This is where the widget size constraints -- minimumSize and maximumSize constraints come into play. These are properties you can set in the property editor. For example, to override the default sizeHint(), simply set minimumSize and maximumSize to the same value. Alternatively, to use the current size as a size constraint value, choose one of the <b>Size Constraint</b> options from the widget's context menu. The layout will then ensure that those constraints are met. To control the size of your widgets via code, you can reimplement sizeHint() in your code.</p>
<p>The screenshot below shows the breakdown of a basic user interface designed using a grid. The coordinates on the screenshot show the position of each widget within the grid.</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part3-labeled-layout.png" alt="" /></p><p><b>Note: </b>Inside the grid, the QPushButton objects are actually nested. The buttons on the right are first placed in a QVBoxLayout; the buttons at the bottom are first placed in a QHBoxLayout. Finally, they are put into coordinates (1,2) and (2,1) of the QGridLayout.</p><p>To visualize, imagine the layout as a box that shrinks as much as possible, attempting to <i>squeeze</i> your widgets in a neat arrangement, and, at the same time, maximize the use of available space.</p>
<p>Qt's layouts help when you:</p>
<ol class="1" type="1"><li>Resize the user face to fit different window sizes.</li>
<li>Resize elements within the user interface to suit different localizations.</li>
<li>Arrange elements to adhere to layout guidelines for different platforms.</li>
</ol>
<p>So, you no longer have to worry about rearranging widgets for different platforms, settings, and languages.</p>
<p>The example below shows how different localizations can affect the user interface. When a localization requires more space for longer text strings the Qt layout automatically scales to accommodate this, while ensuring that the user interface looks presentable and still matches the platform guidelines.</p>
<div class="table"><table class="generic">
<thead><tr class="qt-style"><th >A Dialog in English</th><th >A Dialog in French</th></tr></thead>
<tr valign="top" class="odd"><td ><p class="centerAlign"><img src="images/designer-english-dialog.png" alt="" /></p></td><td ><p class="centerAlign"><img src="images/designer-french-dialog.png" alt="" /></p></td></tr>
</table></div>
<p>The process of laying out widgets consists of creating the layout hierarchy while setting as few widget size constraints as possible.</p>
<p>For a more technical perspective on Qt's layout classes, refer to the Layout Management documentation.</p>
</div>
<!-- @@@designer-to-know.html -->
<p class="naviNextPrevious footerNavi">
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
6
>
x86_64
>
media
>
core-updates
>
by-pkgid
>
749fcc421771b410525f39bd88a5732d
>
files
>
158
