<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- layout.qdoc -->
<title>Layout Management | Qt Widgets 5.9</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="qtwidgets-index.html">Qt Widgets</a></td><td >Layout Management</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">
<link rel="prev" href="qtwidgets-index.html" />
<link rel="next" href="style-reference.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtwidgets-index.html">Qt Widgets</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="style-reference.html">Styles</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#introduction">Introduction</a></li>
<li class="level1"><a href="#qt-s-layout-classes">Qt's Layout Classes</a></li>
<li class="level1"><a href="#horizontal-vertical-grid-and-form-layouts">Horizontal, Vertical, Grid, and Form Layouts</a></li>
<li class="level2"><a href="#laying-out-widgets-in-code">Laying Out Widgets in Code</a></li>
<li class="level2"><a href="#tips-for-using-layouts">Tips for Using Layouts</a></li>
<li class="level1"><a href="#adding-widgets-to-a-layout">Adding Widgets to a Layout</a></li>
<li class="level2"><a href="#stretch-factors">Stretch Factors</a></li>
<li class="level1"><a href="#custom-widgets-in-layouts">Custom Widgets in Layouts</a></li>
<li class="level1"><a href="#layout-issues">Layout Issues</a></li>
<li class="level1"><a href="#manual-layout">Manual Layout</a></li>
<li class="level1"><a href="#how-to-write-a-custom-layout-manager">How to Write A Custom Layout Manager</a></li>
<li class="level2"><a href="#the-header-file-card-op-op-h">The Header File (<code>card.h</code>)</a></li>
<li class="level2"><a href="#the-implementation-file-card-op-op-cpp">The Implementation File (<code>card.cpp</code>)</a></li>
<li class="level2"><a href="#further-notes">Further Notes</a></li>
<li class="level1"><a href="#layout-examples">Layout Examples</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Layout Management</h1>
<span class="subtitle"></span>
<!-- $$$layout.html-description -->
<div class="descr"> <a name="details"></a>
<p>The Qt layout system provides a simple and powerful way of automatically arranging child widgets within a widget to ensure that they make good use of the available space.</p>
<a name="introduction"></a>
<h2 id="introduction">Introduction</h2>
<p>Qt includes a set of layout management classes that are used to describe how widgets are laid out in an application's user interface. These layouts automatically position and resize widgets when the amount of space available for them changes, ensuring that they are consistently arranged and that the user interface as a whole remains usable.</p>
<p>All <a href="qwidget.html">QWidget</a> subclasses can use layouts to manage their children. The <a href="qwidget.html#setLayout">QWidget::setLayout</a>() function applies a layout to a widget. When a layout is set on a widget in this way, it takes charge of the following tasks:</p>
<ul>
<li>Positioning of child widgets</li>
<li>Sensible default sizes for windows</li>
<li>Sensible minimum sizes for windows</li>
<li>Resize handling</li>
<li>Automatic updates when contents change:<ul>
<li>Font size, text or other contents of child widgets</li>
<li>Hiding or showing a child widget</li>
<li>Removal of child widgets</li>
</ul>
</li>
</ul>
<a name="qt-s-layout-classes"></a>
<h2 id="qt-s-layout-classes">Qt's Layout Classes</h2>
<p>Qt's layout classes were designed for hand-written C++ code, allowing measurements to be specified in pixels for simplicity, so they are easy to understand and use. The code generated for forms created using Qt Designer also uses the layout classes. Qt Designer is useful to use when experimenting with the design of a form since it avoids the compile, link and run cycle usually involved in user interface development.</p>
<div class="table"><table class="annotated">
<tr class="odd topAlign"><td class="tblName"><p><a href="qgraphicsanchor.html">QGraphicsAnchor</a></p></td><td class="tblDescr"><p>Represents an anchor between two items in a QGraphicsAnchorLayout</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qgraphicsanchorlayout.html">QGraphicsAnchorLayout</a></p></td><td class="tblDescr"><p>Layout where one can anchor widgets together in Graphics View</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qboxlayout.html">QBoxLayout</a></p></td><td class="tblDescr"><p>Lines up child widgets horizontally or vertically</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qhboxlayout.html">QHBoxLayout</a></p></td><td class="tblDescr"><p>Lines up widgets horizontally</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qvboxlayout.html">QVBoxLayout</a></p></td><td class="tblDescr"><p>Lines up widgets vertically</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qformlayout.html">QFormLayout</a></p></td><td class="tblDescr"><p>Manages forms of input widgets and their associated labels</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qgridlayout.html">QGridLayout</a></p></td><td class="tblDescr"><p>Lays out widgets in a grid</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qlayout.html">QLayout</a></p></td><td class="tblDescr"><p>The base class of geometry managers</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qlayoutitem.html">QLayoutItem</a></p></td><td class="tblDescr"><p>Abstract item that a QLayout manipulates</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qspaceritem.html">QSpacerItem</a></p></td><td class="tblDescr"><p>Blank space in a layout</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qwidgetitem.html">QWidgetItem</a></p></td><td class="tblDescr"><p>Layout item that represents a widget</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qsizepolicy.html">QSizePolicy</a></p></td><td class="tblDescr"><p>Layout attribute describing horizontal and vertical resizing policy</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qstackedlayout.html">QStackedLayout</a></p></td><td class="tblDescr"><p>Stack of widgets where only one widget is visible at a time</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qbuttongroup.html">QButtonGroup</a></p></td><td class="tblDescr"><p>Container to organize groups of button widgets</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qgroupbox.html">QGroupBox</a></p></td><td class="tblDescr"><p>Group box frame with a title</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qstackedwidget.html">QStackedWidget</a></p></td><td class="tblDescr"><p>Stack of widgets where only one widget is visible at a time</p></td></tr>
</table></div>
<a name="horizontal-vertical-grid-and-form-layouts"></a>
<h2 id="horizontal-vertical-grid-and-form-layouts">Horizontal, Vertical, Grid, and Form Layouts</h2>
<p>The easiest way to give your widgets a good layout is to use the built-in layout managers: <a href="qhboxlayout.html">QHBoxLayout</a>, <a href="qvboxlayout.html">QVBoxLayout</a>, <a href="qgridlayout.html">QGridLayout</a>, and <a href="qformlayout.html">QFormLayout</a>. These classes inherit from <a href="qlayout.html">QLayout</a>, which in turn derives from <a href="../qtcore/qobject.html">QObject</a> (not <a href="qwidget.html">QWidget</a>). They take care of geometry management for a set of widgets. To create more complex layouts, you can nest layout managers inside each other.</p>
<ul>
<li>A <a href="qhboxlayout.html">QHBoxLayout</a> lays out widgets in a horizontal row, from left to right (or right to left for right-to-left languages).<p class="centerAlign"><img src="images/qhboxlayout-with-5-children.png" alt="" /></p></li>
<li>A <a href="qvboxlayout.html">QVBoxLayout</a> lays out widgets in a vertical column, from top to bottom.<p class="centerAlign"><img src="images/qvboxlayout-with-5-children.png" alt="" /></p></li>
<li>A <a href="qgridlayout.html">QGridLayout</a> lays out widgets in a two-dimensional grid. Widgets can occupy multiple cells.<p class="centerAlign"><img src="images/qgridlayout-with-5-children.png" alt="" /></p></li>
<li>A <a href="qformlayout.html">QFormLayout</a> lays out widgets in a 2-column descriptive label- field style.<p class="centerAlign"><img src="images/qformlayout-with-6-children.png" alt="" /></p></li>
</ul>
<a name="laying-out-widgets-in-code"></a>
<h3 >Laying Out Widgets in Code</h3>
<p>The following code creates a <a href="qhboxlayout.html">QHBoxLayout</a> that manages the geometry of five <a href="qpushbutton.html">QPushButtons</a>, as shown on the first screenshot above:</p>
<pre class="cpp">
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>window <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwidget.html">QWidget</a></span>;
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"One"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Two"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button3 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Three"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button4 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Four"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button5 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Five"</span>);
<span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(button1);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button2);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button3);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button4);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button5);
window<span class="operator">-</span><span class="operator">></span>setLayout(layout);
window<span class="operator">-</span><span class="operator">></span>show();
</pre>
<p>The code for <a href="qvboxlayout.html">QVBoxLayout</a> is identical, except the line where the layout is created. The code for <a href="qgridlayout.html">QGridLayout</a> is a bit different, because we need to specify the row and column position of the child widget:</p>
<pre class="cpp">
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>window <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwidget.html">QWidget</a></span>;
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"One"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Two"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button3 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Three"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button4 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Four"</span>);
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button5 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Five"</span>);
<span class="type"><a href="qgridlayout.html">QGridLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgridlayout.html">QGridLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(button1<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button2<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button3<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">2</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button4<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">0</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(button5<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">1</span>);
window<span class="operator">-</span><span class="operator">></span>setLayout(layout);
window<span class="operator">-</span><span class="operator">></span>show();
</pre>
<p>The third <a href="qpushbutton.html">QPushButton</a> spans 2 columns. This is possible by specifying 2 as the fifth argument to <a href="qgridlayout.html#addWidget">QGridLayout::addWidget</a>().</p>
<p><a href="qformlayout.html">QFormLayout</a> will add two widgets on a row, commonly a <a href="qlabel.html">QLabel</a> and a <a href="qlineedit.html">QLineEdit</a> to create forms. Adding a <a href="qlabel.html">QLabel</a> and a <a href="qlineedit.html">QLineEdit</a> on the same row will set the <a href="qlineedit.html">QLineEdit</a> as the <a href="qlabel.html">QLabel</a>'s buddy. The following code will use the <a href="qformlayout.html">QFormLayout</a> to place three <a href="qpushbutton.html">QPushButtons</a> and a corresponding <a href="qlineedit.html">QLineEdit</a> on a row.</p>
<pre class="cpp">
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>window <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwidget.html">QWidget</a></span>;
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"One"</span>);
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>lineEdit1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>();
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Two"</span>);
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>lineEdit2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>();
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button3 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Three"</span>);
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>lineEdit3 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>();
<span class="type"><a href="qformlayout.html">QFormLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qformlayout.html">QFormLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addRow(button1<span class="operator">,</span> lineEdit1);
layout<span class="operator">-</span><span class="operator">></span>addRow(button2<span class="operator">,</span> lineEdit2);
layout<span class="operator">-</span><span class="operator">></span>addRow(button3<span class="operator">,</span> lineEdit3);
window<span class="operator">-</span><span class="operator">></span>setLayout(layout);
window<span class="operator">-</span><span class="operator">></span>show();
</pre>
<a name="tips-for-using-layouts"></a>
<h3 >Tips for Using Layouts</h3>
<p>When you use a layout, you do not need to pass a parent when constructing the child widgets. The layout will automatically reparent the widgets (using <a href="qwidget.html#setParent">QWidget::setParent</a>()) so that they are children of the widget on which the layout is installed.</p>
<p><b>Note: </b>Widgets in a layout are children of the widget on which the layout is installed, <i>not</i> of the layout itself. Widgets can only have other widgets as parent, not layouts.</p><p>You can nest layouts using <code>addLayout()</code> on a layout; the inner layout then becomes a child of the layout it is inserted into.</p>
<a name="adding-widgets-to-a-layout"></a>
<h2 id="adding-widgets-to-a-layout">Adding Widgets to a Layout</h2>
<p>When you add widgets to a layout, the layout process works as follows:</p>
<ol class="1" type="1"><li>All the widgets will initially be allocated an amount of space in accordance with their <a href="qwidget.html#sizePolicy-prop">QWidget::sizePolicy</a>() and <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>().</li>
<li>If any of the widgets have stretch factors set, with a value greater than zero, then they are allocated space in proportion to their stretch factor (explained below).</li>
<li>If any of the widgets have stretch factors set to zero they will only get more space if no other widgets want the space. Of these, space is allocated to widgets with an <a href="qsizepolicy.html#Policy-enum">Expanding</a> size policy first.</li>
<li>Any widgets that are allocated less space than their minimum size (or minimum size hint if no minimum size is specified) are allocated this minimum size they require. (Widgets don't have to have a minimum size or minimum size hint in which case the stretch factor is their determining factor.)</li>
<li>Any widgets that are allocated more space than their maximum size are allocated the maximum size space they require. (Widgets do not have to have a maximum size in which case the stretch factor is their determining factor.)</li>
</ol>
<a name="stretch-factors"></a>
<h3 >Stretch Factors</h3>
<a name="stretch-factor"></a><p>Widgets are normally created without any stretch factor set. When they are laid out in a layout the widgets are given a share of space in accordance with their <a href="qwidget.html#sizePolicy-prop">QWidget::sizePolicy</a>() or their minimum size hint whichever is the greater. Stretch factors are used to change how much space widgets are given in proportion to one another.</p>
<p>If we have three widgets laid out using a <a href="qhboxlayout.html">QHBoxLayout</a> with no stretch factors set we will get a layout like this:</p>
<p class="centerAlign"><img src="images/layout1.png" alt="Three widgets in a row" /></p><p>If we apply stretch factors to each widget, they will be laid out in proportion (but never less than their minimum size hint), e.g.</p>
<p class="centerAlign"><img src="images/layout2.png" alt="Three widgets with different stretch factors in a row" /></p><a name="custom-widgets-in-layouts"></a>
<h2 id="custom-widgets-in-layouts">Custom Widgets in Layouts</h2>
<p>When you make your own widget class, you should also communicate its layout properties. If the widget uses one of Qt's layouts, this is already taken care of. If the widget does not have any child widgets, or uses manual layout, you can change the behavior of the widget using any or all of the following mechanisms:</p>
<ul>
<li>Reimplement <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>() to return the preferred size of the widget.</li>
<li>Reimplement <a href="qwidget.html#minimumSizeHint-prop">QWidget::minimumSizeHint</a>() to return the smallest size the widget can have.</li>
<li>Call <a href="qwidget.html#sizePolicy-prop">QWidget::setSizePolicy</a>() to specify the space requirements of the widget.</li>
</ul>
<p>Call <a href="qwidget.html#updateGeometry">QWidget::updateGeometry</a>() whenever the size hint, minimum size hint or size policy changes. This will cause a layout recalculation. Multiple consecutive calls to <a href="qwidget.html#updateGeometry">QWidget::updateGeometry</a>() will only cause one layout recalculation.</p>
<p>If the preferred height of your widget depends on its actual width (e.g., a label with automatic word-breaking), set the <a href="qsizepolicy.html#hasHeightForWidth">height-for-width</a> flag in the widget's <a href="qwidget.html#sizePolicy-prop">size policy</a> and reimplement <a href="qwidget.html#heightForWidth">QWidget::heightForWidth</a>().</p>
<p>Even if you implement <a href="qwidget.html#heightForWidth">QWidget::heightForWidth</a>(), it is still a good idea to provide a reasonable sizeHint().</p>
<p>For further guidance when implementing these functions, see the <i>Qt Quarterly</i> article <a href="http://doc.qt.io/archives/qq/qq04-height-for-width.html">Trading Height for Width</a>.</p>
<a name="layout-issues"></a>
<h2 id="layout-issues">Layout Issues</h2>
<p>The use of rich text in a label widget can introduce some problems to the layout of its parent widget. Problems occur due to the way rich text is handled by Qt's layout managers when the label is word wrapped.</p>
<p>In certain cases the parent layout is put into QLayout::FreeResize mode, meaning that it will not adapt the layout of its contents to fit inside small sized windows, or even prevent the user from making the window too small to be usable. This can be overcome by subclassing the problematic widgets, and implementing suitable <a href="qwidget.html#sizeHint-prop">sizeHint()</a> and <a href="qwidget.html#minimumSizeHint-prop">minimumSizeHint()</a> functions.</p>
<p>In some cases, it is relevant when a layout is added to a widget. When you set the widget of a <a href="qdockwidget.html">QDockWidget</a> or a <a href="qscrollarea.html">QScrollArea</a> (with <a href="qdockwidget.html#setWidget">QDockWidget::setWidget</a>() and <a href="qscrollarea.html#setWidget">QScrollArea::setWidget</a>()), the layout must already have been set on the widget. If not, the widget will not be visible.</p>
<a name="manual-layout"></a>
<h2 id="manual-layout">Manual Layout</h2>
<p>If you are making a one-of-a-kind special layout, you can also make a custom widget as described above. Reimplement <a href="qwidget.html#resizeEvent">QWidget::resizeEvent</a>() to calculate the required distribution of sizes and call <a href="qwidget.html#geometry-prop">setGeometry()</a> on each child.</p>
<p>The widget will get an event of type <a href="../qtcore/qevent.html#Type-enum">QEvent::LayoutRequest</a> when the layout needs to be recalculated. Reimplement <a href="qwidget.html#event">QWidget::event</a>() to handle <a href="../qtcore/qevent.html#Type-enum">QEvent::LayoutRequest</a> events.</p>
<a name="how-to-write-a-custom-layout-manager"></a>
<h2 id="how-to-write-a-custom-layout-manager">How to Write A Custom Layout Manager</h2>
<p>An alternative to manual layout is to write your own layout manager by subclassing <a href="qlayout.html">QLayout</a>. The <a href="qtwidgets-layouts-borderlayout-example.html">Border Layout</a> and <a href="qtwidgets-layouts-flowlayout-example.html">Flow Layout</a> examples show how to do this.</p>
<p>Here we present an example in detail. The <code>CardLayout</code> class is inspired by the Java layout manager of the same name. It lays out the items (widgets or nested layouts) on top of each other, each item offset by <a href="qlayout.html#spacing-prop">QLayout::spacing</a>().</p>
<p>To write your own layout class, you must define the following:</p>
<ul>
<li>A data structure to store the items handled by the layout. Each item is a <a href="qlayoutitem.html">QLayoutItem</a>. We will use a <a href="../qtcore/qlist.html">QList</a> in this example.</li>
<li><a href="qlayout.html#addItem">addItem()</a>, how to add items to the layout.</li>
<li><a href="qlayout.html#setGeometry">setGeometry()</a>, how to perform the layout.</li>
<li><a href="qlayoutitem.html#sizeHint">sizeHint()</a>, the preferred size of the layout.</li>
<li><a href="qlayout.html#itemAt">itemAt()</a>, how to iterate over the layout.</li>
<li><a href="qlayout.html#takeAt">takeAt()</a>, how to remove items from the layout.</li>
</ul>
<p>In most cases, you will also implement <a href="qlayout.html#minimumSize">minimumSize()</a>.</p>
<a name="the-header-file-card-op-op-h"></a>
<h3 >The Header File (<code>card.h</code>)</h3>
<pre class="cpp">
<span class="preprocessor">#ifndef CARD_H</span>
<span class="preprocessor">#define CARD_H</span>
<span class="preprocessor">#include <QtWidgets></span>
<span class="preprocessor">#include <QList></span>
<span class="keyword">class</span> CardLayout : <span class="keyword">public</span> <span class="type"><a href="qlayout.html">QLayout</a></span>
{
<span class="keyword">public</span>:
CardLayout(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent<span class="operator">,</span> <span class="type">int</span> dist): <span class="type"><a href="qlayout.html">QLayout</a></span>(parent<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> dist) {}
CardLayout(<span class="type"><a href="qlayout.html">QLayout</a></span> <span class="operator">*</span>parent<span class="operator">,</span> <span class="type">int</span> dist): <span class="type"><a href="qlayout.html">QLayout</a></span>(parent<span class="operator">,</span> dist) {}
CardLayout(<span class="type">int</span> dist): <span class="type"><a href="qlayout.html">QLayout</a></span>(dist) {}
<span class="operator">~</span>CardLayout();
<span class="type">void</span> addItem(<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>item);
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> sizeHint() <span class="keyword">const</span>;
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> minimumSize() <span class="keyword">const</span>;
<span class="type">int</span> count() <span class="keyword">const</span>;
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>itemAt(<span class="type">int</span>) <span class="keyword">const</span>;
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>takeAt(<span class="type">int</span>);
<span class="type">void</span> setGeometry(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qrect.html">QRect</a></span> <span class="operator">&</span>rect);
<span class="keyword">private</span>:
<span class="type"><a href="../qtcore/qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span><span class="operator">*</span><span class="operator">></span> list;
};
<span class="preprocessor">#endif</span>
</pre>
<a name="the-implementation-file-card-op-op-cpp"></a>
<h3 >The Implementation File (<code>card.cpp</code>)</h3>
<pre class="cpp">
<span class="comment">//#include "card.h"</span>
</pre>
<p>First we define <code>count()</code> to fetch the number of items in the list.</p>
<pre class="cpp">
<span class="type">int</span> CardLayout<span class="operator">::</span>count() <span class="keyword">const</span>
{
<span class="comment">// QList::size() returns the number of QLayoutItems in the list</span>
<span class="keyword">return</span> list<span class="operator">.</span>size();
}
</pre>
<p>Then we define two functions that iterate over the layout: <code>itemAt()</code> and <code>takeAt()</code>. These functions are used internally by the layout system to handle deletion of widgets. They are also available for application programmers.</p>
<p><code>itemAt()</code> returns the item at the given index. <code>takeAt()</code> removes the item at the given index, and returns it. In this case we use the list index as the layout index. In other cases where we have a more complex data structure, we may have to spend more effort defining a linear order for the items.</p>
<pre class="cpp">
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>CardLayout<span class="operator">::</span>itemAt(<span class="type">int</span> idx) <span class="keyword">const</span>
{
<span class="comment">// QList::value() performs index checking, and returns 0 if we are</span>
<span class="comment">// outside the valid range</span>
<span class="keyword">return</span> list<span class="operator">.</span>value(idx);
}
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>CardLayout<span class="operator">::</span>takeAt(<span class="type">int</span> idx)
{
<span class="comment">// QList::take does not do index checking</span>
<span class="keyword">return</span> idx <span class="operator">></span><span class="operator">=</span> <span class="number">0</span> <span class="operator">&</span><span class="operator">&</span> idx <span class="operator"><</span> list<span class="operator">.</span>size() <span class="operator">?</span> list<span class="operator">.</span>takeAt(idx) : <span class="number">0</span>;
}
</pre>
<p><code>addItem()</code> implements the default placement strategy for layout items. This function must be implemented. It is used by QLayout::add(), by the <a href="qlayout.html">QLayout</a> constructor that takes a layout as parent. If your layout has advanced placement options that require parameters, you must provide extra access functions such as the row and column spanning overloads of <a href="qgridlayout.html#addItem">QGridLayout::addItem</a>(), <a href="qgridlayout.html#addWidget">QGridLayout::addWidget</a>(), and <a href="qgridlayout.html#addLayout">QGridLayout::addLayout</a>().</p>
<pre class="cpp">
<span class="type">void</span> CardLayout<span class="operator">::</span>addItem(<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>item)
{
list<span class="operator">.</span>append(item);
}
</pre>
<p>The layout takes over responsibility of the items added. Since <a href="qlayoutitem.html">QLayoutItem</a> does not inherit <a href="../qtcore/qobject.html">QObject</a>, we must delete the items manually. In the destructor, we remove each item from the list using <code>takeAt()</code>, and then delete it.</p>
<pre class="cpp">
CardLayout<span class="operator">::</span><span class="operator">~</span>CardLayout()
{
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>item;
<span class="keyword">while</span> ((item <span class="operator">=</span> takeAt(<span class="number">0</span>)))
<span class="keyword">delete</span> item;
}
</pre>
<p>The <code>setGeometry()</code> function actually performs the layout. The rectangle supplied as an argument does not include <code>margin()</code>. If relevant, use <code>spacing()</code> as the distance between items.</p>
<pre class="cpp">
<span class="type">void</span> CardLayout<span class="operator">::</span>setGeometry(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qrect.html">QRect</a></span> <span class="operator">&</span>r)
{
<span class="type"><a href="qlayout.html">QLayout</a></span><span class="operator">::</span>setGeometry(r);
<span class="keyword">if</span> (list<span class="operator">.</span>size() <span class="operator">=</span><span class="operator">=</span> <span class="number">0</span>)
<span class="keyword">return</span>;
<span class="type">int</span> w <span class="operator">=</span> r<span class="operator">.</span>width() <span class="operator">-</span> (list<span class="operator">.</span>count() <span class="operator">-</span> <span class="number">1</span>) <span class="operator">*</span> spacing();
<span class="type">int</span> h <span class="operator">=</span> r<span class="operator">.</span>height() <span class="operator">-</span> (list<span class="operator">.</span>count() <span class="operator">-</span> <span class="number">1</span>) <span class="operator">*</span> spacing();
<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>;
<span class="keyword">while</span> (i <span class="operator"><</span> list<span class="operator">.</span>size()) {
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>o <span class="operator">=</span> list<span class="operator">.</span>at(i);
<span class="type"><a href="../qtcore/qrect.html">QRect</a></span> geom(r<span class="operator">.</span>x() <span class="operator">+</span> i <span class="operator">*</span> spacing()<span class="operator">,</span> r<span class="operator">.</span>y() <span class="operator">+</span> i <span class="operator">*</span> spacing()<span class="operator">,</span> w<span class="operator">,</span> h);
o<span class="operator">-</span><span class="operator">></span>setGeometry(geom);
<span class="operator">+</span><span class="operator">+</span>i;
}
}
</pre>
<p><code>sizeHint()</code> and <code>minimumSize()</code> are normally very similar in implementation. The sizes returned by both functions should include <code>spacing()</code>, but not <code>margin()</code>.</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> CardLayout<span class="operator">::</span>sizeHint() <span class="keyword">const</span>
{
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> s(<span class="number">0</span><span class="operator">,</span><span class="number">0</span>);
<span class="type">int</span> n <span class="operator">=</span> list<span class="operator">.</span>count();
<span class="keyword">if</span> (n <span class="operator">></span> <span class="number">0</span>)
s <span class="operator">=</span> <span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(<span class="number">100</span><span class="operator">,</span><span class="number">70</span>); <span class="comment">//start with a nice default size</span>
<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>;
<span class="keyword">while</span> (i <span class="operator"><</span> n) {
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>o <span class="operator">=</span> list<span class="operator">.</span>at(i);
s <span class="operator">=</span> s<span class="operator">.</span>expandedTo(o<span class="operator">-</span><span class="operator">></span>sizeHint());
<span class="operator">+</span><span class="operator">+</span>i;
}
<span class="keyword">return</span> s <span class="operator">+</span> n<span class="operator">*</span><span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(spacing()<span class="operator">,</span> spacing());
}
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> CardLayout<span class="operator">::</span>minimumSize() <span class="keyword">const</span>
{
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> s(<span class="number">0</span><span class="operator">,</span><span class="number">0</span>);
<span class="type">int</span> n <span class="operator">=</span> list<span class="operator">.</span>count();
<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>;
<span class="keyword">while</span> (i <span class="operator"><</span> n) {
<span class="type"><a href="qlayoutitem.html">QLayoutItem</a></span> <span class="operator">*</span>o <span class="operator">=</span> list<span class="operator">.</span>at(i);
s <span class="operator">=</span> s<span class="operator">.</span>expandedTo(o<span class="operator">-</span><span class="operator">></span>minimumSize());
<span class="operator">+</span><span class="operator">+</span>i;
}
<span class="keyword">return</span> s <span class="operator">+</span> n<span class="operator">*</span><span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(spacing()<span class="operator">,</span> spacing());
}
</pre>
<a name="further-notes"></a>
<h3 >Further Notes</h3>
<ul>
<li>This custom layout does not handle height for width.</li>
<li>We ignore <a href="qlayoutitem.html#isEmpty">QLayoutItem::isEmpty</a>(); this means that the layout will treat hidden widgets as visible.</li>
<li>For complex layouts, speed can be greatly increased by caching calculated values. In that case, implement <a href="qlayoutitem.html#invalidate">QLayoutItem::invalidate</a>() to mark the cached data is dirty.</li>
<li>Calling <a href="qlayoutitem.html#sizeHint">QLayoutItem::sizeHint</a>(), etc. may be expensive. So, you should store the value in a local variable if you need it again later within in the same function.</li>
<li>You should not call <a href="qlayoutitem.html#setGeometry">QLayoutItem::setGeometry</a>() twice on the same item in the same function. This call can be very expensive if the item has several child widgets, because the layout manager must do a complete layout every time. Instead, calculate the geometry and then set it. (This does not only apply to layouts, you should do the same if you implement your own resizeEvent(), for example.)</li>
</ul>
<a name="layout-examples"></a>
<h2 id="layout-examples">Layout Examples</h2>
<p>Many Qt Widgets <a href="examples-widgets.html">examples</a> already use layouts, however, several examples exist to showcase various layouts.</p>
<div class="table"><table class="annotated">
<tr class="odd topAlign"><td class="tblName"><p><a href="tutorials-addressbook.html">Address Book Tutorial</a></p></td><td class="tblDescr"><p>An introduction to GUI programming, showing how to put together a simple yet fully-functioning application.</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtwidgets-layouts-borderlayout-example.html">Border Layout Example</a></p></td><td class="tblDescr"><p>Shows how to arrange child widgets along a border.</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qtwidgets-widgets-calculator-example.html">Calculator Example</a></p></td><td class="tblDescr"><p>The example shows how to use signals and slots to implement the functionality of a calculator widget, and how to use QGridLayout to place child widgets in a grid.</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtwidgets-widgets-calendarwidget-example.html">Calendar Widget Example</a></p></td><td class="tblDescr"><p>The Calendar Widget example shows use of QCalendarWidget.</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qtwidgets-tools-echoplugin-example.html">Echo Plugin Example</a></p></td><td class="tblDescr"><p>This example shows how to create a Qt plugin.</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtwidgets-layouts-flowlayout-example.html">Flow Layout Example</a></p></td><td class="tblDescr"><p>Shows how to arrange widgets for different window sizes.</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qtwidgets-painting-imagecomposition-example.html">Image Composition Example</a></p></td><td class="tblDescr"><p>Shows how composition modes work in QPainter.</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtwidgets-mainwindows-menus-example.html">Menus Example</a></p></td><td class="tblDescr"><p>The Menus example demonstrates how menus can be used in a main window application.</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qtwidgets-itemviews-simpletreemodel-example.html">Simple Tree Model Example</a></p></td><td class="tblDescr"><p>The Simple Tree Model example shows how to use a hierarchical model with Qt's standard view classes.</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtwidgets-animation-sub-attaq-example.html">Sub-Attaq</a></p></td><td class="tblDescr"><p>This example shows Qt's ability to combine the animation framework and the state machine framework to create a game.</p></td></tr>
</table></div>
</div>
<!-- @@@layout.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtwidgets-index.html">Qt Widgets</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="style-reference.html">Styles</a>
</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
>
armv5tl
>
media
>
core-updates
>
by-pkgid
>
768f7d9f703884aa2562bf0a651086df
>
files
>
3199
