101 lines
6.1 KiB
HTML
101 lines
6.1 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>Migrating from other containers to GtkGrid: 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="migrating.html" title="Part V. Migrating from Previous Versions of GTK+">
|
||
<link rel="prev" href="gtk-migrating-smclient-GtkApplication.html" title="Migrating from EggSMClient to GtkApplication">
|
||
<link rel="next" href="ch30s02.html" title="GtkBox versus GtkGrid: sizing">
|
||
<meta name="generator" content="GTK-Doc V1.33.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="migrating.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
|
||
<td><a accesskey="p" href="gtk-migrating-smclient-GtkApplication.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
|
||
<td><a accesskey="n" href="ch30s02.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
|
||
</tr></table>
|
||
<div class="chapter">
|
||
<div class="titlepage"><div><div><h2 class="title">
|
||
<a name="gtk-migrating-GtkGrid"></a>Migrating from other containers to GtkGrid</h2></div></div></div>
|
||
<div class="toc"><dl class="toc">
|
||
<dt><span class="section"><a href="gtk-migrating-GtkGrid.html#id-1.6.7.4">GtkBox versus GtkGrid: packing</a></span></dt>
|
||
<dt><span class="section"><a href="ch30s02.html">GtkBox versus GtkGrid: sizing</a></span></dt>
|
||
<dt><span class="section"><a href="ch30s03.html">GtkBox versus GtkGrid: spacing</a></span></dt>
|
||
</dl></div>
|
||
<p>
|
||
<a class="link" href="GtkGrid.html" title="GtkGrid"><span class="type">GtkGrid</span></a> is an attempt to write a comprehensive, legacy-free,
|
||
box-layout container that is flexible enough to replace <a class="link" href="GtkBox.html" title="GtkBox"><span class="type">GtkBox</span></a>,
|
||
<a class="link" href="GtkTable.html" title="GtkTable"><span class="type">GtkTable</span></a> and the like.
|
||
</p>
|
||
<p>
|
||
The layout model of GtkGrid is to arrange its children in rows and
|
||
columns. This is done by assigning positions on a two-dimentions
|
||
grid that stretches arbitrarily far in all directions.
|
||
Children can span multiple rows or columns, too.
|
||
</p>
|
||
<div class="section">
|
||
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
|
||
<a name="id-1.6.7.4"></a>GtkBox versus GtkGrid: packing</h2></div></div></div>
|
||
<p>
|
||
GtkBox works by arranging child widgets in a single line, either
|
||
horizontally or vertically. It allows packing children from the
|
||
beginning or end, using <a class="link" href="GtkBox.html#gtk-box-pack-start" title="gtk_box_pack_start ()"><code class="function">gtk_box_pack_start()</code></a> and <a class="link" href="GtkBox.html#gtk-box-pack-end" title="gtk_box_pack_end ()"><code class="function">gtk_box_pack_end()</code></a>.
|
||
</p>
|
||
<img src="box-packing.png"><div class="example">
|
||
<a name="id-1.6.7.4.4"></a><p class="title"><b>Example 53. A simple box</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"), FALSE, FALSE, 0);
|
||
gtk_box_pack_start (GTK_BOX (box), gtk_label_new ("Two"), FALSE, FALSE, 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_grid_attach (GTK_GRID (grid), child1, 0, 0, 1, 1);
|
||
child2 = gtk_label_new ("Two");
|
||
gtk_grid_attach_next_to (GTK_GRID (grid), child2, child1, GTK_POS_RIGHT, 1, 1);
|
||
</pre>
|
||
<p>
|
||
And similarly for <a class="link" href="GtkBox.html#gtk-box-pack-end" title="gtk_box_pack_end ()"><code class="function">gtk_box_pack_end()</code></a>. In that case, you
|
||
would use <a class="link" href="gtk3-Standard-Enumerations.html#GTK-POS-LEFT:CAPS"><span class="type">GTK_POS_LEFT</span></a> to place the grid children from
|
||
left to right.
|
||
</p>
|
||
<p>
|
||
If you only need to pack children from the start, using
|
||
<a class="link" href="GtkContainer.html#gtk-container-add" title="gtk_container_add ()"><code class="function">gtk_container_add()</code></a> is an even simpler alternative. GtkGrid
|
||
places children added with <a class="link" href="GtkContainer.html#gtk-container-add" title="gtk_container_add ()"><code class="function">gtk_container_add()</code></a> in a single
|
||
row or column according to its <a class="link" href="gtk3-Orientable.html#GtkOrientable--orientation" title="The “orientation” property"><span class="type">“orientation”</span></a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<br class="example-break"><p>
|
||
One difference to keep in mind is that the gtk_box_pack_start/pack_end
|
||
functions allow you to place an arbitrary number of children from
|
||
either end without ever 'colliding in the middle'. With GtkGrid, you
|
||
have to leave enough space between the two ends, if you want to combine
|
||
packing from both ends towards the middle. In practice, this should be
|
||
easy to avoid; and GtkGrid simply ignores entirely empty rows or
|
||
columns for layout and spacing.
|
||
</p>
|
||
<p>
|
||
On the other hand, GtkGrid is more flexible in that its grid extends
|
||
indefinitively in both directions — there is no problem with
|
||
using negative numbers for the grid positions. So, if you discover
|
||
that you need to place a widget before your existing arrangement,
|
||
you always can.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<hr>Generated by GTK-Doc V1.33.1</div>
|
||
</body>
|
||
</html> |