doc/src/widgets-and-layouts/layout.qdoc

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the documentation of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:FDL$
  10 ** GNU Free Documentation License
  11 ** Alternatively, this file may be used under the terms of the GNU Free
  12 ** Documentation License version 1.3 as published by the Free Software
  13 ** Foundation and appearing in the file included in the packaging of
  14 ** this file.
  15 **
  16 ** Other Usage
  17 ** Alternatively, this file may be used in accordance with the terms
  18 ** and conditions contained in a signed written agreement between you
  19 ** and Nokia.
  20 **
  21 **
  22 **
  23 **
  24 ** $QT_END_LICENSE$
  25 **
  26 ****************************************************************************/
  27
  28 /*!
  29     \group geomanagement
  30     \title Layout Classes
  31 */
  32
  33 /*!
  34     \page layout.html
  35     \title Layout Management
  36     \ingroup qt-basic-concepts
  37     \ingroup qt-gui-concepts
  38     \brief A tour of the standard layout managers and an introduction to custom
  39     layouts.
  40
  41     \previouspage Widgets and Layouts
  42     \contentspage Widgets and Layouts
  43     \nextpage {Styles and Style Aware Widgets}{Styles}
  44
  45     \ingroup frameworks-technologies
  46
  47     The Qt layout system provides a simple and powerful way of automatically
  48     arranging child widgets within a widget to ensure that they make good use
  49     of the available space.
  50
  51     \tableofcontents
  52
  53     \section1 Introduction
  54
  55     Qt includes a set of layout management classes that are used to describe
  56     how widgets are laid out in an application's user interface. These layouts
  57     automatically position and resize widgets when the amount of space
  58     available for them changes, ensuring that they are consistently arranged
  59     and that the user interface as a whole remains usable.
  60
  61     All QWidget subclasses can use layouts to manage their children. The
  62     QWidget::setLayout() function applies a layout to a widget. When a layout
  63     is set on a widget in this way, it takes charge of the following tasks:
  64
  65     \list
  66     \o Positioning of child widgets.
  67     \o Sensible default sizes for windows.
  68     \o Sensible minimum sizes for windows.
  69     \o Resize handling.
  70     \o Automatic updates when contents change:
  71         \list
  72         \o Font size, text or other contents of child widgets.
  73         \o Hiding or showing a child widget.
  74         \o Removal of child widgets.
  75         \endlist
  76     \endlist
  77
  78     \section1 Qt's Layout Classes
  79
  80     Qt's layout classes were designed for hand-written C++ code, allowing
  81     measurements to be specified in pixels for simplicity, so they are easy to
  82     understand and use. The code generated for forms created using \QD also
  83     uses the layout classes. \QD is useful to use when experimenting with the
  84     design of a form since it avoids the compile, link and run cycle usually
  85     involved in user interface development.
  86
  87     \annotatedlist geomanagement
  88
  89     \section1 Horizontal, Vertical, Grid, and Form Layouts
  90
  91     The easiest way to give your widgets a good layout is to use the built-in
  92     layout managers: QHBoxLayout, QVBoxLayout, QGridLayout, and QFormLayout.
  93     These classes inherit from QLayout, which in turn derives from QObject (not
  94     QWidget). They take care of geometry  management for a set of widgets. To
  95     create more complex layouts, you can nest layout managers inside each other.
  96
  97     \list
  98         \o  A QHBoxLayout lays out widgets in a horizontal row, from left to
  99             right (or right to left for right-to-left languages).
 100             \image qhboxlayout-with-5-children.png
 101
 102         \o  A QVBoxLayout lays out widgets in a vertical column, from top to
 103             bottom.
 104             \image qvboxlayout-with-5-children.png
 105
 106         \o  A QGridLayout lays out widgets in a two-dimensional grid. Widgets
 107             can occupy multiple cells.
 108             \image qgridlayout-with-5-children.png
 109
 110         \o  A QFormLayout lays out widgets in a 2-column descriptive label-
 111             field style.
 112             \image qformlayout-with-6-children.png
 113     \endlist
 114
 115
 116     \section2 Laying Out Widgets in Code
 117
 118     The following code creates a QHBoxLayout that manages the geometry of five
 119     \l{QPushButton}{QPushButtons}, as shown on the first screenshot above:
 120
 121     \snippet doc/src/snippets/layouts/layouts.cpp 0
 122     \snippet doc/src/snippets/layouts/layouts.cpp 1
 123     \snippet doc/src/snippets/layouts/layouts.cpp 2
 124     \codeline
 125     \snippet doc/src/snippets/layouts/layouts.cpp 3
 126     \snippet doc/src/snippets/layouts/layouts.cpp 4
 127     \snippet doc/src/snippets/layouts/layouts.cpp 5
 128
 129     The code for QVBoxLayout is identical, except the line where the layout is
 130     created. The code for QGridLayout is a bit different, because we need to
 131     specify the row and column position of the child widget:
 132
 133     \snippet doc/src/snippets/layouts/layouts.cpp 12
 134     \snippet doc/src/snippets/layouts/layouts.cpp 13
 135     \snippet doc/src/snippets/layouts/layouts.cpp 14
 136     \codeline
 137     \snippet doc/src/snippets/layouts/layouts.cpp 15
 138     \snippet doc/src/snippets/layouts/layouts.cpp 16
 139     \snippet doc/src/snippets/layouts/layouts.cpp 17
 140
 141     The third QPushButton spans 2 columns. This is possible by specifying 2 as
 142     the fifth argument to QGridLayout::addWidget().
 143
 144     QFormLayout will add two widgets on a row, commonly a QLabel and a QLineEdit
 145     to create forms. Adding a QLabel and a QLineEdit on the same row will set
 146     the QLineEdit as the QLabel's buddy. The following code will use the
 147     QFormLayout to place three \l{QPushButton}{QPushButtons} and a corresponding
 148     QLineEdit on a row.
 149
 150     \snippet doc/src/snippets/layouts/layouts.cpp 18
 151     \snippet doc/src/snippets/layouts/layouts.cpp 19
 152     \snippet doc/src/snippets/layouts/layouts.cpp 20
 153     \codeline
 154     \snippet doc/src/snippets/layouts/layouts.cpp 21
 155     \snippet doc/src/snippets/layouts/layouts.cpp 22
 156     \snippet doc/src/snippets/layouts/layouts.cpp 23
 157
 158
 159     \section2 Tips for Using Layouts
 160
 161     When you use a layout, you do not need to pass a parent when constructing
 162     the child widgets. The layout will automatically reparent the widgets
 163     (using QWidget::setParent()) so that they are children of the widget on
 164     which the layout is installed.
 165
 166     \note Widgets in a layout are children of the widget on which the layout
 167     is installed, \e not of the layout itself. Widgets can only have other
 168     widgets as parent, not layouts.
 169
 170     You can nest layouts using \c addLayout() on a layout; the inner layout
 171     then becomes a child of the layout it is inserted into.
 172
 173
 174     \section1 Adding Widgets to a Layout
 175
 176     When you add widgets to a layout, the layout process works as follows:
 177
 178     \list 1
 179         \o  All the widgets will initially be allocated an amount of space in
 180             accordance with their QWidget::sizePolicy() and
 181             QWidget::sizeHint().
 182
 183         \o  If any of the widgets have stretch factors set, with a value
 184             greater than zero, then they are allocated space in proportion to
 185             their stretch factor (explained below).
 186
 187         \o  If any of the widgets have stretch factors set to zero they will
 188             only get more space if no other widgets want the space. Of these,
 189             space is allocated to widgets with an
 190             \l{QSizePolicy::Expanding}{Expanding} size policy first.
 191
 192         \o  Any widgets that are allocated less space than their minimum size
 193             (or minimum size hint if no minimum size is specified) are
 194             allocated this minimum size they require. (Widgets don't have to
 195             have a minimum size or minimum size hint in which case the strech
 196             factor is their determining factor.)
 197
 198         \o  Any widgets that are allocated more space than their maximum size
 199             are allocated the maximum size space they require. (Widgets do not
 200             have to have a maximum size in which case the strech factor is
 201             their determining factor.)
 202     \endlist
 203
 204
 205     \section2 Stretch Factors
 206     \keyword stretch factor
 207
 208     Widgets are normally created without any stretch factor set. When they are
 209     laid out in a layout the widgets are given a share of space in accordance
 210     with their QWidget::sizePolicy() or their minimum size hint whichever is
 211     the greater. Stretch factors are used to change how much space widgets are
 212     given in proportion to one another.
 213
 214     If we have three widgets laid out using a QHBoxLayout with no stretch
 215     factors set we will get a layout like this:
 216
 217     \img layout1.png Three widgets in a row
 218
 219     If we apply stretch factors to each widget, they will be laid out in
 220     proportion (but never less than their minimum size hint), e.g.
 221
 222     \img layout2.png Three widgets with different stretch factors in a row
 223
 224
 225     \section1 Custom Widgets in Layouts
 226
 227     When you make your own widget class, you should also communicate its layout
 228     properties. If the widget has a one of Qt's layouts, this is already taken
 229     care of. If the widget does not have any child widgets, or uses manual
 230     layout, you can change the behavior of the widget using any or all of the
 231     following mechanisms:
 232
 233     \list
 234         \o  Reimplement QWidget::sizeHint() to return the preferred size of the
 235             widget.
 236         \o  Reimplement QWidget::minimumSizeHint() to return the smallest size
 237             the widget can have.
 238         \o  Call QWidget::setSizePolicy() to specify the space requirements of
 239             the widget.
 240     \endlist
 241
 242     Call QWidget::updateGeometry() whenever the size hint, minimum size hint or
 243     size policy changes. This will cause a layout recalculation. Multiple
 244     consecutive calls to QWidget::updateGeometry() will only cause one layout
 245     recalculation.
 246
 247     If the preferred height of your widget depends on its actual width (e.g.,
 248     a label with automatic word-breaking), set the
 249     \l{QSizePolicy::hasHeightForWidth()}{height-for-width} flag in the
 250     widget's \l{QWidget::sizePolicy}{size policy} and reimplement
 251     QWidget::heightForWidth().
 252
 253     Even if you implement QWidget::heightForWidth(), it is still a good idea to
 254     provide a reasonable sizeHint().
 255
 256     For further guidance when implementing these functions, see the
 257     \e{Qt Quarterly} article
 258     \l{http://doc.qt.nokia.com/qq/qq04-height-for-width.html}
 259     {Trading Height for Width}.
 260
 261
 262     \section1 Layout Issues
 263
 264     The use of rich text in a label widget can introduce some problems to the
 265     layout of its parent widget. Problems occur due to the way rich text is
 266     handled by Qt's layout managers when the label is word wrapped.
 267
 268     In certain cases the parent layout is put into QLayout::FreeResize mode,
 269     meaning that it will not adapt the layout of its contents to fit inside
 270     small sized windows, or even prevent the user from making the window too
 271     small to be usable. This can be overcome by subclassing the problematic
 272     widgets, and implementing suitable \l{QWidget::}{sizeHint()} and
 273     \l{QWidget::}{minimumSizeHint()} functions.
 274
 275     In some cases, it is relevant when a layout is added to a widget. When
 276     you set the widget of a QDockWidget or a QScrollArea (with
 277     QDockWidget::setWidget() and QScrollArea::setWidget()), the layout must
 278     already have been set on the widget. If not, the widget will not be
 279     visible.
 280
 281
 282     \section1 Manual Layout
 283
 284     If you are making a one-of-a-kind special layout, you can also make a
 285     custom widget as described above. Reimplement QWidget::resizeEvent() to
 286     calculate the required distribution of sizes and call
 287     \l{QWidget::}{setGeometry()} on each child.
 288
 289     The widget will get an event of type QEvent::LayoutRequest when the
 290     layout needs to be recalculated. Reimplement QWidget::event() to handle
 291     QEvent::LayoutRequest events.
 292
 293
 294     \section1 How to Write A Custom Layout Manager
 295
 296     An alternative to manual layout is to write your own layout manager by
 297     subclassing QLayout. The \l{layouts/borderlayout}{Border Layout} and
 298     \l{layouts/flowlayout}{Flow Layout} examples show how to do this.
 299
 300     Here we present an example in detail. The \c CardLayout class is inspired
 301     by the Java layout manager of the same name. It lays out the items (widgets
 302     or nested layouts) on top of each other, each item offset by
 303     QLayout::spacing().
 304
 305     To write your own layout class, you must define the following:
 306     \list
 307         \o  A data structure to store the items handled by the layout. Each
 308             item is a \link QLayoutItem QLayoutItem\endlink. We will use a
 309             QList in this example.
 310         \o  \l{QLayout::}{addItem()}, how to add items to the layout.
 311         \o  \l{QLayout::}{setGeometry()}, how to perform the layout.
 312         \o  \l{QLayout::}{sizeHint()}, the preferred size of the layout.
 313         \o  \l{QLayout::}{itemAt()}, how to iterate over the layout.
 314         \o  \l{QLayout::}{takeAt()}, how to remove items from the layout.
 315     \endlist
 316
 317     In most cases, you will also implement \l{QLayout::}{minimumSize()}.
 318
 319
 320     \section2 The Header File (\c card.h)
 321
 322     \snippet doc/src/snippets/code/doc_src_layout.cpp 0
 323
 324
 325     \section2 The Implementation File (\c card.cpp)
 326
 327     \snippet doc/src/snippets/code/doc_src_layout.cpp 1
 328
 329     First we define \c{count()} to fetch the number of items in the list.
 330
 331     \snippet doc/src/snippets/code/doc_src_layout.cpp 2
 332
 333     Then we define two functions that iterate over the layout: \c{itemAt()}
 334     and \c{takeAt()}. These functions are used internally by the layout system
 335     to handle deletion of widgets. They are also available for application
 336     programmers.
 337
 338     \c{itemAt()} returns the item at the given index. \c{takeAt()} removes the
 339     item at the given index, and returns it. In this case we use the list index
 340     as the layout index. In other cases where we have a more complex data
 341     structure, we may have to spend more effort defining a linear order for the
 342     items.
 343
 344     \snippet doc/src/snippets/code/doc_src_layout.cpp 3
 345
 346     \c{addItem()} implements the default placement strategy for layout items.
 347     This function must be implemented. It is used by QLayout::add(), by the
 348     QLayout constructor that takes a layout as parent. If your layout has
 349     advanced placement options that require parameters, you must provide extra
 350     access functions such as the row and column spanning overloads of
 351     QGridLayout::addItem(), QGridLayout::addWidget(), and
 352     QGridLayout::addLayout().
 353
 354     \snippet doc/src/snippets/code/doc_src_layout.cpp 4
 355
 356     The layout takes over responsibility of the items added. Since QLayoutItem
 357     does not inherit QObject, we must delete the items manually. In the
 358     destructor, we remove each item from the list using \c{takeAt()}, and
 359     then delete it.
 360
 361     \snippet doc/src/snippets/code/doc_src_layout.cpp 5
 362
 363     The \c{setGeometry()} function actually performs the layout. The rectangle
 364     supplied as an argument does not include \c{margin()}. If relevant, use
 365     \c{spacing()} as the distance between items.
 366
 367     \snippet doc/src/snippets/code/doc_src_layout.cpp 6
 368
 369     \c{sizeHint()} and \c{minimumSize()} are normally very similar in
 370     implementation. The sizes returned by both functions should include
 371     \c{spacing()}, but not \c{margin()}.
 372
 373     \snippet doc/src/snippets/code/doc_src_layout.cpp 7
 374
 375
 376     \section2 Further Notes
 377
 378     \list
 379         \o  This custom layout does not handle height for width.
 380         \o  We ignore QLayoutItem::isEmpty(); this means that the layout will
 381             treat hidden widgets as visible.
 382         \o  For complex layouts, speed can be greatly increased by caching
 383             calculated values. In that case, implement
 384             QLayoutItem::invalidate() to mark the cached data is dirty.
 385         \o  Calling QLayoutItem::sizeHint(), etc. may be expensive. So, you
 386             should store the value in a local variable if you need it again
 387             later within in the same function.
 388         \o  You should not call QLayoutItem::setGeometry() twice on the same
 389             item in the same function. This call can be very expensive if the
 390             item has several child widgets, because the layout manager must do
 391             a complete layout every time. Instead, calculate the geometry and
 392             then set it. (This does not only apply to layouts, you should do
 393             the same if you implement your own resizeEvent(), for example.)
 394     \endlist
 395 */
 396