How to pack boxes in GTK+

Packing boxes in GTK+ can be confusing at first. There are a lot of options, and it's not immediately obvious how they all fit together.

It's not really that difficult. There are basically five different styles you can get.

Each line contains one hbox with several buttons. The call to gtk_box_pack is shorthand for the call to pack each of the buttons into the hbox. Each of the buttons is packed into the hbox the same way (i.e. same arguments to the gtk_box_pack_start () function).

void gtk_box_pack_start (GtkBox    *box,
                         GtkWidget *child,
                         gint       expand,
                         gint       fill,
                         gint       padding);

The expand argument to gtk_box_pack_start () or gtk_box_pack_end () controls whether the elements are laid out to fill the entire space allocated to the box (TRUE) or whether the box is shrunk to just fit the elements (FALSE).

The fill argument to the gtk_box_pack routines controls whether the extra space is allocated to the elements themselves (TRUE), or as extra padding in the box (FALSE). It only has an effect if the expand argument is also TRUE.

GtkWidget *
gtk_hbox_new (gint homogeneous,
              gint spacing);

The homogeneous argument to gtk_hbox_new () controls whether each element of the box has the same size (i.e. the same width in an hbox, or the same height in a vbox). If it is set, the expand argument to the gtk_box_pack routines is always turned on.

What's the difference between spacing (set when the box is created) and padding (set when elements are packed)? Spacing is added between elements, and padding is added on either side of an element. The following figure should make it clearer:

The pack_start and pack_end routines control the order in which the elements are displayed. If expand (or homogeneous) is TRUE, then you could get the same effect just by using pack_start and changing the order of the calls. In other words, these two code sequences would have identical effect:

gtk_box_pack_start (box, element_1, TRUE, FALSE, 0);
gtk_box_pack_end (box, element_2, TRUE, FALSE, 0);
gtk_box_pack_start (box, element_3, TRUE, FALSE, 0);
gtk_box_pack_end (box, element_4, TRUE, FALSE, 0);

---

gtk_box_pack_start (box, element_1, TRUE, FALSE, 0);
gtk_box_pack_start (box, element_3, TRUE, FALSE, 0);
gtk_box_pack_start (box, element_4, TRUE, FALSE, 0);
gtk_box_pack_start (box, element_2, TRUE, FALSE, 0);

However, if expand is FALSE, then it's possible to use end packing to get left aligned and right aligned elements in the same box, as shown below. The buttons were packed with gtk_box_pack_start, and the label "end" was packed with gtk_box_pack_end.

Here's the code to packbox.c in case you want to see for yourself.