<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- designer-manual.qdoc -->
<title>Qt 4.8: Using Layouts in Qt Designer</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>Using Layouts in Qt Designer</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="designer-widget-mode.html" />
<link rel="next" href="designer-connection-mode.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="designer-widget-mode.html">Qt Designer's Widget Editing Mode</a>
<a class="nextPage" href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#applying-and-breaking-layouts">Applying and Breaking Layouts</a></li>
<li class="level2"><a href="#setting-a-top-level-layout">Setting A Top Level Layout</a></li>
<li class="level2"><a href="#horizontal-and-vertical-layouts">Horizontal and Vertical Layouts</a></li>
<li class="level3"><a href="#the-grid-layout">The Grid Layout</a></li>
<li class="level3"><a href="#splitter-layouts">Splitter Layouts</a></li>
<li class="level3"><a href="#the-form-layout">The Form Layout</a></li>
<li class="level2"><a href="#shortcut-keys">Shortcut Keys</a></li>
</ul>
</div>
<h1 class="title">Using Layouts in Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-layouts.html-description -->
<div class="descr"> <a name="details"></a>
<p>Before a form can be used, the objects on the form need to be placed into layouts. This ensures that the objects will be displayed properly when the form is previewed or used in an application. Placing objects in a layout also ensures that they will be resized correctly when the form is resized.</p>
<a name="applying-and-breaking-layouts"></a>
<h2>Applying and Breaking Layouts</h2>
<p>The simplest way to manage objects is to apply a layout to a group of existing objects. This is achieved by selecting the objects that you need to manage and applying one of the standard layouts using the main toolbar, the <b>Form</b> menu, or the form's context menu.</p>
<p>Once widgets have been inserted into a layout, it is not possible to move and resize them individually because the layout itself controls the geometry of each widget within it, taking account of the hints provided by spacers. Instead, you must either break the layout and adjust each object's geometry manually, or you can influence the widget's geometry by resizing the layout.</p>
<p>To break the layout, press <b>Ctrl+0</b> or choose <b>Break Layout</b> from the form's context menu, the <b>Form</b> menu or the main toolbar. You can also add and remove spacers from the layout to influence the geometries of the widgets.</p>
<a name="insertingobjectsintoalayout"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-layout-inserting.png" alt="" /></td><td ><b>Inserting Objects into a Layout</b><p>Objects can be inserted into an existing layout by dragging them from their current positions and dropping them at the required location. A blue cursor is displayed in the layout as an object is dragged over it to indicate where the object will be added.</p>
</td></tr>
</table>
<a name="setting-a-top-level-layout"></a>
<h3>Setting A Top Level Layout</h3>
<p>The form's top level layout can be set by clearing the selection (click the left mouse button on the form itself) and applying a layout. A top level layout is necessary to ensure that your widgets will resize correctly when its window is resized. To check if you have set a top level layout, preview your widget and attempt to resize the window by dragging the size grip.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-set-layout.png" alt="" /></td><td ><b>Applying a Layout</b><p>To apply a layout, you can select your choice of layout from the toolbar shown on the left, or from the context menu shown below.</p>
</td></tr>
</table>
<p class="centerAlign"><img src="images/designer-set-layout2.png" alt="" /></p><a name="horizontal-and-vertical-layouts"></a>
<h3>Horizontal and Vertical Layouts</h3>
<p>The simplest way to arrange objects on a form is to place them in a horizontal or vertical layout. Horizontal layouts ensure that the widgets within are aligned horizontally; vertical layouts ensure that they are aligned vertically.</p>
<p>Horizontal and vertical layouts can be combined and nested to any depth. However, if you need more control over the placement of objects, consider using the grid layout.</p>
<a name="the-grid-layout"></a>
<h4>The Grid Layout</h4>
<p>Complex form layouts can be created by placing objects in a grid layout. This kind of layout gives the form designer much more freedom to arrange widgets on the form, but can result in a much less flexible layout. However, for some kinds of form layout, a grid arrangement is much more suitable than a nested arrangement of horizontal and vertical layouts.</p>
<a name="splitter-layouts"></a>
<h4>Splitter Layouts</h4>
<p>Another common way to manage the layout of objects on a form is to place them in a splitter. These splitters arrange the objects horizontally or vertically in the same way as normal layouts, but also allow the user to adjust the amount of space allocated to each object.</p>
<p class="centerAlign"><img src="images/designer-splitter-layout.png" alt="" /></p><p>Although <a href="qsplitter.html">QSplitter</a> is a container widget, <i>Qt Designer</i> treats splitter objects as layouts that are applied to existing widgets. To place a group of widgets into a splitter, select them <a href="designer-widget-mode.html#selectingobjects">as described here</a> then apply the splitter layout by using the appropriate toolbar button, keyboard shortcut, or <b>Lay out</b> context menu entry.</p>
<a name="the-form-layout"></a>
<h4>The Form Layout</h4>
<p>Since Qt 4.4, another layout class has been included -- <a href="qformlayout.html">QFormLayout</a>. This class manages widgets in a two-column form; the left column holds labels and the right column holds field widgets such as line edits, spin boxes, etc. The <a href="qformlayout.html">QFormLayout</a> class adheres to various platform look and feel guidelines and supports wrapping for long rows.</p>
<p class="centerAlign"><img src="images/designer-form-layout.png" alt="" /></p><p>The UI file above results in the previews shown below.</p>
<table class="generic">
<thead><tr class="qt-style"><th >Windows XP</th><th >Mac OS X</th><th >Cleanlooks</th></tr></thead>
<tr valign="top" class="odd"><td ><img src="images/designer-form-layout-windowsXP.png" alt="" /></td><td ><img src="images/designer-form-layout-macintosh.png" alt="" /></td><td ><img src="images/designer-form-layout-cleanlooks.png" alt="" /></td></tr>
</table>
<a name="shortcut-keys"></a>
<h3>Shortcut Keys</h3>
<p>In addition to the standard toolbar and context menu entries, there is also a set of keyboard shortcuts to apply layouts on widgets.</p>
<a name="layoutshortcuts"></a><table class="generic">
<thead><tr class="qt-style"><th >Layout</th><th >Shortcut</th><th >Description</th></tr></thead>
<tr valign="top" class="odd"><td >Horizontal</td><td ><b>Ctrl+1</b></td><td >Places the selected objects in a horizontal layout.</td></tr>
<tr valign="top" class="even"><td >Vertical</td><td ><b>Ctrl+2</b></td><td >Places the selected objects in a vertical layout.</td></tr>
<tr valign="top" class="odd"><td >Grid</td><td ><b>Ctrl+5</b></td><td >Places the selected objects in a grid layout.</td></tr>
<tr valign="top" class="even"><td >Form</td><td ><b>Ctrl+6</b></td><td >Places the selected objects in a form layout.</td></tr>
<tr valign="top" class="odd"><td >Horizontal splitter</td><td ><b>Ctrl+3</b></td><td >Creates a horizontal splitter and places the selected objects inside it.</td></tr>
<tr valign="top" class="even"><td >Vertical splitter</td><td ><b>Ctrl+4</b></td><td >Creates a vertical splitter and places the selected objects inside it.</td></tr>
<tr valign="top" class="odd"><td >Adjust size</td><td ><b>Ctrl+J</b></td><td >Adjusts the size of the layout to ensure that each child object has sufficient space to display its contents. See <a href="qwidget.html#adjustSize">QWidget::adjustSize</a>() for more information.</td></tr>
</table>
<p><b>Note:</b> <b>Ctrl+0</b> is used to break a layout.</p>
</div>
<!-- @@@designer-layouts.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="designer-widget-mode.html">Qt Designer's Widget Editing Mode</a>
<a class="nextPage" href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
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. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
