1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Qt Toolkit - Layout Classes</title><style type="text/css"><!--
h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }
a:link { color: #004faf; text-decoration: none }
a:visited { color: #672967; text-decoration: none }body { background: white; color: black; }
--></style></head><body bgcolor="#ffffff">
<p>
<table width="100%">
<tr><td><a href="index.html">
<img width="100" height="100" src="qtlogo.png"
alt="Home" border="0"><img width="100"
height="100" src="face.png" alt="Home" border="0">
</a><td valign=top><div align=right><img src="dochead.png" width="472" height="27"><br>
<a href="classes.html"><b>Classes</b></a>
-<a href="annotated.html">Annotated</a>
- <a href="hierarchy.html">Tree</a>
-<a href="functions.html">Functions</a>
-<a href="index.html">Home</a>
-<a href="topicals.html"><b>Structure</b></a>
</div>
</table>
<h1 align=center> Layout Classes</h1><br clear="all">
The Qt layout system provides a simple and powerful way of specifying
the layout of child widgets.
<p>
By specifying the logical layout once, you get the following benefits:
<ul>
<li> Positioning of child widgets.
<li> Sensible default sizes for top-level widgets.
<li> Sensible minimum sizes for top-level widgets.
<li> Resize handling.
<li> Automatic update when contents change:
<ul>
<li> Font size, text or other contents of subwidgets.
<li> Hiding or showing a subwidget.
<li> Removal of subwidget.
</ul>
</ul>
<p>
<h2>Layout Widgets</h2>
<p>
The easiest way to give your widgets a good layout is to use the
layout widgets: <a href="qhbox.html">QHBox</a>, <a href="qvbox.html">QVBox</a>
and <a href="qgrid.html">QGrid</a>. A layout widget automatically
lays out its children in the order they are constructed. To make more
complex layouts, you can nest layout widgets inside each other.
<p>
<dl>
<dt><a href="qhbox.html">QHBox</a>
<dd>A QHBox lays out its children in a horizontal row, left to right.
<br><img src="qhbox-m.png" alt="QHBox with five children.">
<p>
<dt><a href="qvbox.html">QVBox</a>
<dd>A QVBox lays out its children in a vertical row, top to bottom.
<br><img src="qvbox-m.png" alt="QVBox with five children.">
<dt><a href="qgrid.html">QGrid</a>
<dd>A QGrid lays out its children in a table. You specify how
many columns the table has, and it is filled left to right,
beginning a new row when the previous is filled up. The grid
is fixed; the children will not flow to other rows as the
widget is resized.
<br><img src="qgrid-m.png" alt="Two-column QGrid with five children.">
</dl>
<p>
The grid above can be produced by the following code:
<pre> <a href="qgrid.html">QGrid</a> *main = new <a href="qgrid.html">QGrid</a>( 2 ); // a 2 x n grid
new QLabel( "One", main );
new QLabel( "Two", main );
new QLabel( "Three", main );
new QLabel( "Four", main );
new QLabel( "Five", main );
</pre>
<p>
You can adjust the layout somewhat by calling <a href="qwidget.html#378ed6">setMinimumSize()</a> or
<a href="qwidget.html#ee706d">setFixedSize()</a> on
the children.
<p>
<h2>QLayout</h2>
<p>
If you need more control over the layout, use a <a href="qlayout.html">QLayout</a>
subclass. The layout classes included in Qt 2.1 are <a href="qgridlayout.html">QGridLayout</a> and <a href="qboxlayout.html">QBoxLayout</a>.
(<a href="qhboxlayout.html">QHBoxLayout</a> and
<a href="qvboxlayout.html">QVBoxLayout</a> are trivial subclasses of QBoxLayout,
that are simpler to use and make the code easier to read.)
<p>
When you use a layout, you have to insert each child both into its
parent widget (done in the constructor) and into its layout (typically
done with a function called <code>addWidget()).</code> This way, you can give
layout parameters for each widget, specifying properties like
alignment, stretch, and placement.
<p>
The following code makes a grid like the one above, with a couple of
improvements:
<pre> <a href="qwidget.html">QWidget</a> *main = new <a href="qwidget.html">QWidget</a>;
//make a 1x1 grid, it will auto-expand:
<a href="qgridlayout.html">QGridLayout</a> *grid = new <a href="qgridlayout.html">QGridLayout</a>( main, 1, 1 );
//add the first four widgets with (row, column) addressing
grid-><a href="qgridlayout.html#70abf2">addWidget</a>( new QLabel( "One", main ), 0, 0 );
grid-><a href="qgridlayout.html#70abf2">addWidget</a>( new QLabel( "Two", main ), 0, 1 );
grid-><a href="qgridlayout.html#70abf2">addWidget</a>( new QLabel( "Three", main ), 1, 0 );
grid-><a href="qgridlayout.html#70abf2">addWidget</a>( new QLabel( "Four", main ), 1, 1 );
//add the last widget on row 2, let it span from column 0 to
//column 1, and let it be aligned center.
grid->addMultiCellWidget( new QLabel( "Five", main ), 2, 2, 0, 1,
Qt::AlignCenter );
//let the ratio between the widths of columns 0 and 1 be 2:3.
grid->setColStretch( 0, 2 );
grid-><a href="qgridlayout.html#4ffa51">setColStretch</a>( 1, 3 );
</pre>
<p>
<p>
You can insert layouts inside a layout by giving the parent layout as
a parameter in the constructor.
<pre> <a href="qwidget.html">QWidget</a>* main = new <a href="qwidget.html">QWidget</a>;
<a href="qlineedit.html">QLineEdit</a>* field = new <a href="qlineedit.html">QLineEdit</a>( main );
<a href="qpushbutton.html">QPushButton</a>* ok = new <a href="qpushbutton.html">QPushButton</a>( "OK", main );
<a href="qpushbutton.html">QPushButton</a>* cancel = new <a href="qpushbutton.html">QPushButton</a>( "Cancel", main );
<a href="qlabel.html">QLabel</a>* label = new <a href="qlabel.html">QLabel</a>( "Where do you want to go?", main );
<a href="qvboxlayout.html">QVBoxLayout</a> *vbox = new <a href="qvboxlayout.html">QVBoxLayout</a>( main ); // A layout on a widget
vbox-><a href="qboxlayout.html#219265">addWidget</a>( label );
vbox-><a href="qboxlayout.html#219265">addWidget</a>( field );
<a href="qhboxlayout.html">QHBoxLayout</a> *buttons = new <a href="qhboxlayout.html">QHBoxLayout</a>( vbox ); // A layout inside a layout
buttons-><a href="qboxlayout.html#219265">addWidget</a>( ok );
buttons-><a href="qboxlayout.html#219265">addWidget</a>( cancel );
</pre>
<p>
If you are not satisfied with the
default placement, you can create the layout without a parent and
then insert it with <code>addLayout().</code>
<p>
<h2>Custom Layouts</h2>
<p>
If the built-in layout classes are not sufficient, you can define your
own. You will have to make a subclass of <a href="qlayout.html">QLayout</a>
that handles resizing and size calculations, as well as a subclass of
<a href="qglayoutiterator.html">QGLayoutIterator</a> to iterate over your
layout class.
<p>
See the <a href="customlayout.html">Custom Layout</a> page for an
in-depth description.
<p>
<h2>Custom Widgets In Layouts</h2>
<p>
When you make your own widget class, you should also communicate its
layout properties. If the widget has a QLayout, this is already taken
care of. If the widget does not have any children, or uses manual
layout, you should reimplement the following QWidget member functions:
<p>
<dl>
<dt><a href="qwidget.html#290bcd">sizeHint()</a>
<dd> Returns the preferred size of the widget.
<dt><a href="qwidget.html#3f0fc2">minimumSizeHint()</a>
<dd> Returns the smallest size the widget can have.
<dt><a href="qwidget.html#2d5d13">sizePolicy()</a>
<dd> Returns a <a href="qsizepolicy.html">QSizePolicy</a>; a value
describing the space requirements of the widget.
<p>
</dl>
<p>
Call <a href="qwidget.html#c04eb3">updateGeometry()</a> whenever
the size hint, minimum size hint or size policy changes. This will
cause a layout recalculation. Multiple calls to updateGeometry() will
only cause one recalculation.
<p>
If the preferred height of your widget depends on its actual width
(eg. a label with automatic word-breaking), set the <code>hasHeightForWidth()</code>
flag in <code>sizePolicy(),</code> and reimplement <a href="qwidget.html#2e8476">heightForWidth()</a>.
<p>
Even if you implement heightForWidth(), it is still necessary to
provide a good sizeHint(). The sizeHint() provides the preferred width
of the widget, and it is used by QLayout subclasses that do not
support heightForWidth() (both QGridLayout and QBoxLayout support it).
<p>
For further guidance when implementing these functions, see their
implementations in existing Qt classes that have similar layout
requirements to your new widget.
<p>
<h2>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#28c156">resizeEvent()</a> to calculate the
required distribution of sizes and call <a href="qwidget.html#8e0197">setGeometry()</a> on each child.
<p>
The widget will get an event with <a href="qevent.html#cadf8c">type</a>
<code>LayoutHint</code> when the layout needs to be
recalculated. Reimplement <a href="qwidget.html#f30772">event()</a>
to be notified of <code>LayoutHint</code> events.
<p><address><hr><div align="center">
<table width="100%" cellspacing="0" border="0"><tr>
<td>Copyright 2000 Trolltech<td><a href="http://www.trolltech.com/trademarks.html">Trademarks</a>
<td align="right"><div align="right">Qt version 2.3.1</div>
</table></div></address></body></html>
|
