116 lines
7.6 KiB
HTML
116 lines
7.6 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>GtkBox versus GtkGrid: sizing: GTK+ 3 Reference Manual</title>
|
||
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
|
||
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
|
||
<link rel="up" href="gtk-migrating-GtkGrid.html" title="Migrating from other containers to GtkGrid">
|
||
<link rel="prev" href="gtk-migrating-GtkGrid.html" title="Migrating from other containers to GtkGrid">
|
||
<link rel="next" href="ch30s03.html" title="GtkBox versus GtkGrid: spacing">
|
||
<meta name="generator" content="GTK-Doc V1.32.1 (XML mode)">
|
||
<link rel="stylesheet" href="style.css" type="text/css">
|
||
</head>
|
||
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
|
||
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
|
||
<td width="100%" align="left" class="shortcuts"></td>
|
||
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
|
||
<td><a accesskey="u" href="gtk-migrating-GtkGrid.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
|
||
<td><a accesskey="p" href="gtk-migrating-GtkGrid.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
|
||
<td><a accesskey="n" href="ch30s03.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
|
||
</tr></table>
|
||
<div class="section">
|
||
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
|
||
<a name="id-1.6.7.5"></a>GtkBox versus GtkGrid: sizing</h2></div></div></div>
|
||
<p>
|
||
When adding a child to a GtkBox, there are two hard-to-remember
|
||
parameters (child properties, more exactly) named expand and fill
|
||
that determine how the child size behaves in the main direction
|
||
of the box. If expand is set, the box allows the position occupied
|
||
by the child to grow when extra space is available. If fill is
|
||
also set, the extra space is allocated to the child widget itself.
|
||
Otherwise it is left 'free'.
|
||
There is no control about the 'minor' direction; children
|
||
are always given the full size in the minor direction.
|
||
</p>
|
||
<img src="box-expand.png"><p>
|
||
GtkGrid does not have any custom child properties for controlling
|
||
size allocation to children. Instead, it fully supports the newly
|
||
introduced <a class="link" href="GtkWidget.html#GtkWidget--hexpand" title="The “hexpand” property"><span class="type">“hexpand”</span></a>, <a class="link" href="GtkWidget.html#GtkWidget--vexpand" title="The “vexpand” property"><span class="type">“vexpand”</span></a>, <a class="link" href="GtkWidget.html#GtkWidget--halign" title="The “halign” property"><span class="type">“halign”</span></a>
|
||
and <a class="link" href="GtkWidget.html#GtkWidget--valign" title="The “valign” property"><span class="type">“valign”</span></a> properties.
|
||
</p>
|
||
<p>
|
||
The <a class="link" href="GtkWidget.html#GtkWidget--hexpand" title="The “hexpand” property"><span class="type">“hexpand”</span></a> and <a class="link" href="GtkWidget.html#GtkWidget--vexpand" title="The “vexpand” property"><span class="type">“vexpand”</span></a> properties operate
|
||
in a similar way to the expand child properties of <a class="link" href="GtkBox.html" title="GtkBox"><span class="type">GtkBox</span></a>. As soon
|
||
as a column contains a hexpanding child, GtkGrid allows the column
|
||
to grow when extra space is available (similar for rows and vexpand).
|
||
In contrast to GtkBox, all the extra space is always allocated
|
||
to the child widget, there are no 'free' areas.
|
||
</p>
|
||
<p>
|
||
To replace the functionality of the fill child properties, you can
|
||
set the <a class="link" href="GtkWidget.html#GtkWidget--halign" title="The “halign” property"><span class="type">“halign”</span></a> and <a class="link" href="GtkWidget.html#GtkWidget--valign" title="The “valign” property"><span class="type">“valign”</span></a> properties. An
|
||
align value of <a class="link" href="GtkWidget.html#GTK-ALIGN-FILL:CAPS"><span class="type">GTK_ALIGN_FILL</span></a> has the same effect as setting fill
|
||
to <code class="literal">TRUE</code>, a value of <a class="link" href="GtkWidget.html#GTK-ALIGN-CENTER:CAPS"><span class="type">GTK_ALIGN_CENTER</span></a> has the same effect as setting
|
||
fill to <code class="literal">FALSE</code>. The image below shows the effect of various combinations
|
||
of halign and valign.
|
||
</p>
|
||
<img src="widget-hvalign.png"><div class="example">
|
||
<a name="id-1.6.7.5.8"></a><p class="title"><b>Example 54. Expansion and alignment</b></p>
|
||
<div class="example-contents">
|
||
<pre class="programlisting">
|
||
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
|
||
|
||
gtk_box_pack_start (GTK_BOX (box), gtk_label_new ("One"), TRUE, FALSE, 0);
|
||
gtk_box_pack_start (GTK_BOX (box), gtk_label_new ("Two"), TRUE, TRUE, 0);
|
||
</pre>
|
||
<p>This can be done with <a class="link" href="GtkGrid.html" title="GtkGrid"><span class="type">GtkGrid</span></a> as follows:</p>
|
||
<pre class="programlisting">
|
||
grid = gtk_grid_new ();
|
||
|
||
child1 = gtk_label_new ("One");
|
||
gtk_widget_set_hexpand (child1, TRUE);
|
||
gtk_widget_set_halign (child1, GTK_ALIGN_CENTER);
|
||
gtk_grid_attach (GTK_GRID (grid), child1, 0, 0, 1, 1);
|
||
child2 = gtk_label_new ("Two");
|
||
gtk_widget_set_hexpand (child2, TRUE);
|
||
gtk_widget_set_halign (child1, GTK_ALIGN_FILL);
|
||
gtk_grid_attach_next_to (GTK_GRID (grid), child2, child1, GTK_POS_RIGHT, 1, 1);
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<br class="example-break"><p>
|
||
One difference between the new GtkWidget expand properties and
|
||
the GtkBox child property of the same name is that widget expandability
|
||
is 'inherited' from children. What this means is that a container
|
||
will become itself expanding as soon as it has
|
||
an expanding child. This is typically what you want, it lets
|
||
you e.g. mark the content pane of your application window as
|
||
expanding, and all the intermediate containers between the
|
||
content pane and the toplevel window will automatically do
|
||
the right thing. This automatism can be overridden at any
|
||
point by setting the expand flags on a container explicitly.
|
||
</p>
|
||
<p>
|
||
Another difference between GtkBox and GtkGrid with respect to
|
||
expandability is when there are no expanding children at all.
|
||
In this case, GtkBox will forcibly expand all children whereas
|
||
GtkGrid will not. In practice, the effect of this is typically
|
||
that a grid will 'stick to the corner' when the toplevel
|
||
containing it is grown, instead of spreading out its children
|
||
over the entire area. The problem can be fixed by setting some
|
||
or all of the children to expand.
|
||
</p>
|
||
<p>
|
||
When you set the <a class="link" href="GtkBox.html#GtkBox--homogeneous" title="The “homogeneous” property"><span class="type">“homogeneous”</span></a> property on a GtkBox,
|
||
it reserves the same space for all its children. GtkGrid does
|
||
this in a very similar way, with <a class="link" href="GtkGrid.html#GtkGrid--row-homogeneous" title="The “row-homogeneous” property"><span class="type">“row-homogeneous”</span></a> and
|
||
<a class="link" href="GtkGrid.html#GtkGrid--column-homogeneous" title="The “column-homogeneous” property"><span class="type">“column-homogeneous”</span></a> properties which control whether
|
||
all rows have the same height and whether all columns have
|
||
the same width.
|
||
</p>
|
||
</div>
|
||
<div class="footer">
|
||
<hr>Generated by GTK-Doc V1.32.1</div>
|
||
</body>
|
||
</html> |