<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /home/gvatteka/dev/qt-4.3/doc/src/layout.qdoc -->
<head>
<title>Layout Classes</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 align="center">Layout Classes<br /><small></small></h1>
<p>The Qt layout system provides a simple and powerful way of specifying the layout of child widgets.</p>
<p>By specifying the logical layout once, you get the following benefits:</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 update 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>
<p>The disadvantage of hand-written layout code is that it isn't very convenient when you're experimenting with the design of a form and you have to go through the compile, link and run cycle for each change. Our solution is <a href="qtjambi-designer.html">Qt Designer</tt></a>, a GUI visual design tool which makes it fast and easy to experiment with layouts and which generates the C++ layout code for you.</p>
<p>Qt's layout classes were designed for hand-written C++ code, so they're easy to understand and use. The code generated for forms created using <a href="qtjambi-designer.html">Qt Designer</tt></a> also uses the layout classes.</p>
<p>Topics:</p>
<ul><li><a href="#horizontal-vertical-and-grid-layouts">Horizontal, Vertical, and Grid Layouts</a></li>
<li><a href="#adding-widgets-to-a-layout">Adding Widgets to a Layout</a></li>
<ul><li><a href="#stretch-factors">Stretch Factors</a></li>
</ul>
<li><a href="#custom-widgets-in-layouts">Custom Widgets in Layouts</a></li>
<li><a href="#layout-issues">Layout Issues</a></li>
<li><a href="#manual-layout">Manual Layout</a></li>
<li><a href="#writing-custom-layout-managers">Writing Custom Layout Managers</a></li>
<ul><li><a href="#the-header-file">The Header File (<tt>card.h</tt>)</a></li>
<li><a href="#the-implementation-file">The Implementation File (<tt>card.cpp</tt>)</a></li>
<li><a href="#further-notes">Further Notes</a></li>
</ul>
</ul>
<a name="horizontal-vertical-and-grid-layouts"></a>
<h3>Horizontal, Vertical, and Grid Layouts</h3>
<p>The easiest way to give you widgets a good layout is to use the built-in layout managers: <a href="gui/QHBoxLayout.html"><tt>QHBoxLayout</tt></a>, <a href="gui/QVBoxLayout.html"><tt>QVBoxLayout</tt></a>, and <a href="gui/QGridLayout.html"><tt>QGridLayout</tt></a>. These classes inherit from <a href="gui/QLayout.html"><tt>QLayout</tt></a>, which in turn derives from <a href="core/QObject.html"><tt>QObject</tt></a> (not <a href="gui/QWidget.html"><tt>QWidget</tt></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="gui/QHBoxLayout.html"><tt>QHBoxLayout</tt></a> lays out widgets in a horizontal row, from left to right (or right to left for right-to-left languages).<p align="center"><img src="images/qhboxlayout-with-5-children.png" alt="A QHBoxLayout with five child widgets" /></p></li>
<li>A <a href="gui/QVBoxLayout.html"><tt>QVBoxLayout</tt></a> lays out widgets in a vertical column, from top to bottom.<p align="center"><img src="images/qvboxlayout-with-5-children.png" alt="A QVBoxLayout with five child widgets" /></p></li>
<li>A <a href="gui/QGridLayout.html"><tt>QGridLayout</tt></a> lays out widgets in a two-dimensional grid. Widgets can occupy multiple cells.<p align="center"><img src="images/qgridlayout-with-5-children.png" alt="A QGridLayout with five child widgets" /></p></li>
</ul>
<p>The following code creates a <a href="gui/QHBoxLayout.html"><tt>QHBoxLayout</tt></a> that manages the geometry of five <a href="gui/QPushButton.html"><tt>QPushButton</tt></a>s, as shown on the first screenshot above:</p>
<pre> QWidget *window = new QWidget;
QPushButton *button1 = new QPushButton("One");
QPushButton *button2 = new QPushButton("Two");
QPushButton *button3 = new QPushButton("Three");
QPushButton *button4 = new QPushButton("Four");
QPushButton *button5 = new QPushButton("Five");
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
layout->addWidget(button4);
layout->addWidget(button5);
window->setLayout(layout);
window->show();</pre>
<p>The code for <a href="gui/QVBoxLayout.html"><tt>QVBoxLayout</tt></a> is identical, except the line where the layout is created. The code for <a href="gui/QGridLayout.html"><tt>QGridLayout</tt></a> is a bit different, because we need to specify the row and column position of the child widget:</p>
<pre> QWidget *window = new QWidget;
QPushButton *button1 = new QPushButton("One");
QPushButton *button2 = new QPushButton("Two");
QPushButton *button3 = new QPushButton("Three");
QPushButton *button4 = new QPushButton("Four");
QPushButton *button5 = new QPushButton("Five");
QGridLayout *layout = new QGridLayout;
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 0, 1);
layout->addWidget(button3, 1, 0, 1, 2);
layout->addWidget(button4, 2, 0);
layout->addWidget(button5, 2, 1);
window->setLayout(layout);
window->show();</pre>
<p>The third <a href="gui/QPushButton.html"><tt>QPushButton</tt></a> spans 2 columns. This is possible by specifying 2 as the fourth argument to QGridLayout::addWidget().</p>
<p>When you use a layout, you don't need to pass a parent when constructing the child widgets. The layout will automatically reparent the widgets (using QWidget::setParent()) so that they are children of the widget on which the layout is installed.</p>
<p><b>Important:</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 <tt>addLayout()</tt> on a layout; the inner layout then becomes a child of the layout it is inserted into. The Basic Layouts</tt> example uses this feature to create a complex dialog.</p>
<a name="adding-widgets-to-a-layout"></a>
<h3>Adding Widgets to a Layout</h3>
<p>When you add widgets to a layout, the layout process works as follows:</p>
<ol type="1">
<li>All the widgets will initially be allocated an amount of space in accordance with their QWidget::sizePolicy().</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 Expanding</tt> 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 strech 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 don't have to have a maximum size in which case the strech factor is their determining factor.)</li>
</ol>
<a name="stretch-factors"></a>
<h4>Stretch Factors</h4>
<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 QWidget::sizePolicy() 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="gui/QHBoxLayout.html"><tt>QHBoxLayout</tt></a> with no stretch factors set we will get a layout like this:</p>
<p align="center"><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 align="center"><img src="images/layout2.png" alt="Three widgets with different stretch factors in a row" /></p><a name="custom-widgets-in-layouts"></a>
<h3>Custom Widgets in Layouts</h3>
<p>When you make your own widget class, you should also communicate its layout properties. If the widget has a <a href="gui/QLayout.html"><tt>QLayout</tt></a>, 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 QWidget::sizeHint() to return the preferred size of the widget.</li>
<li>Reimplement QWidget::minimumSizeHint() to return the smallest size the widget can have.</li>
<li>Call QWidget::setSizePolicy() to specify the space requirements of the widget.</li>
</ul>
<p>Call QWidget::updateGeometry() whenever the size hint, minimum size hint or size policy changes. This will cause a layout recalculation. Multiple consecutive calls to QWidget::updateGeometry() will only cause one 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 height-for-width</tt> flag in the widget's size policy</tt> and reimplement QWidget::heightForWidth().</p>
<p>Even if you implement QWidget::heightForWidth(), it is still a good idea to provide a reasonable sizeHint().</p>
<p>For further guidance when implementing these functions, see the <a href="http://doc.trolltech.com/qq/qq04-height-for-width.html">Trading Height for Width</tt></a> article in <i>Qt Quarterly</i>.</p>
<a name="layout-issues"></a>
<h3>Layout Issues</h3>
<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 sizeHint() and minimumSizeHint() functions.</p>
<a name="manual-layout"></a>
<h3>Manual Layout</h3>
<p>If you are making a one-of-a-kind special layout, you can also make a custom widget as described above. Reimplement QWidget::resizeEvent() to calculate the required distribution of sizes and call setGeometry() on each child.</p>
<p>The widget will get an event of type QEvent::LayoutRequest when the layout needs to be recalculated. Reimplement QWidget::event() to handle QEvent::LayoutRequest events.</p>
<a name="writing-custom-layout-managers"></a>
<h3>Writing Custom Layout Managers</h3>
<p>An alternative to manual layout is to write your own layout manager by subclassing <a href="gui/QLayout.html"><tt>QLayout</tt></a>. The Border Layout</tt> and Flow Layout</tt> examples show how to do this.</p>
<p>Here we present an example in detail. The class CardLayout 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 QLayout::spacing().</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="gui/QLayoutItem.html">QLayoutItem</a>. We will use a QList in this example.</li>
<li>addItem()</tt>, how to add items to the layout.</li>
<li>setGeometry()</tt>, how to perform the layout.</li>
<li>sizeHint()</tt>, the preferred size of the layout.</li>
<li>itemAt()</tt>, how to iterate over the layout.</li>
<li>takeAt()</tt>, how to remove items from the layout.</li>
</ul>
<p>In most cases, you will also implement minimumSize().</p>
<a name="the-header-file"></a>
<h4>The Header File (<tt>card.h</tt>)</h4>
<pre> #ifndef CARD_H
#define CARD_H
#include <QLayout>
#include <QList>
class CardLayout : public QLayout
{
public:
CardLayout(QWidget *parent, int dist)
: QLayout(parent, 0, dist) {}
CardLayout(QLayout *parent, int dist)
: QLayout(parent, dist) {}
CardLayout(int dist)
: QLayout(dist) {}
~CardLayout();
void addItem(QLayoutItem *item);
QSize sizeHint() const;
QSize minimumSize() const;
QLayoutItem *itemAt(int) const;
QLayoutItem *takeAt(int);
void setGeometry(const QRect &rect);
private:
QList<QLayoutItem*> list;
};
#endif</pre>
<a name="the-implementation-file"></a>
<h4>The Implementation File (<tt>card.cpp</tt>)</h4>
<pre> #include "card.h"</pre>
<p>First we define two functions that iterate over the layout: itemAt() and takeAt(). These functions are used internally by the layout system to handle deletion of widgets. They are also available for application programmers.</p>
<p>ItemAt() returns the item at the given index. takeAt() 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> QLayoutItem *CardLayout::itemAt(int idx) const
{
<span class="comment">// QList::value() performs index checking, and returns 0 if we are</span>
<span class="comment">// outside the valid range</span>
return list.value(idx);
}
QLayoutItem *CardLayout::takeAt(int idx)
{
<span class="comment">// QList::take does not do index checking</span>
return idx >= 0 && idx < list.size() ? list.takeAt(idx) : 0;
}</pre>
<p>addItem() implements the default placement strategy for layout items. It must be implemented. It is used by QLayout::add(), by the <a href="gui/QLayout.html"><tt>QLayout</tt></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 <tt>QGridLayout::addItem</tt>, addWidget(), and addLayout().</p>
<pre> void CardLayout::addItem(QLayoutItem *item)
{
list.append(item);
}</pre>
<p>The layout takes over responsibility of the items added. Since <a href="gui/QLayoutItem.html"><tt>QLayoutItem</tt></a> does not inherit <a href="core/QObject.html"><tt>QObject</tt></a>, we must delete the items manually. The function QLayout::deleteAllItems() uses takeAt() defined above to delete all the items in the layout.</p>
<pre> CardLayout::~CardLayout()
{
deleteAllItems();
}</pre>
<p>The setGeometry() function actually performs the layout. The rectangle supplied as an argument does not include margin(). If relevant, use spacing() as the distance between items.</p>
<pre> void CardLayout::setGeometry(const QRect &r)
{
QLayout::setGeometry(r);
if (list.size() == 0)
return;
int w = r.width() - (list.count() - 1) * spacing();
int h = r.height() - (list.count() - 1) * spacing();
int i = 0;
while (i < list.size()) {
QLayoutItem *o = list.at(i);
QRect geom(r.x() + i * spacing(), r.y() + i * spacing(), w, h);
o->setGeometry(geom);
++i;
}
}</pre>
<p>sizeHint() and minimumSize() are normally very similar in implementation. The sizes returned by both functions should include spacing(), but not margin().</p>
<pre> QSize CardLayout::sizeHint() const
{
QSize s(0,0);
int n = list.count();
if (n > 0)
s = QSize(100,70); <span class="comment">//start with a nice default size</span>
int i = 0;
while (i < n) {
QLayoutItem *o = list.at(i);
s = s.expandedTo(o->sizeHint());
++i;
}
return s + n*QSize(spacing(), spacing());
}
QSize CardLayout::minimumSize() const
{
QSize s(0,0);
int n = list.count();
int i = 0;
while (i < n) {
QLayoutItem *o = list.at(i);
s = s.expandedTo(o->minimumSize());
++i;
}
return s + n*QSize(spacing(), spacing());
}</pre>
<a name="further-notes"></a>
<h4>Further Notes</h4>
<p>This layout does not handle height for width.</p>
<p>We ignore QLayoutItem::isEmpty(), this means that the layout will treat hidden widgets as visible.</p>
<p>For complex layouts, speed can be greatly increased by caching calculated values. In that case, implement QLayoutItem::invalidate() to mark the cached data as dirty.</p>
<p>Calling QLayoutItem::sizeHint(), etc. may be expensive, so you should store the value in a local variable if you need it again later in the same function.</p>
<p>You should not call QLayoutItem::setGeometry() twice on the same item in the same function. That can be very expensive if the item has several child widgets, because it must do a complete layout every time. Instead, calculate the geometry and then set it. (This doesn't only apply to layouts, you should do the same if you implement your own resizeEvent().)</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright © 2007 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt Jambi </div></td>
</tr></table></div></address></body>
</html>
