Boxes

A box is a layout container that provides scaffolding for your application. You can use boxes inside other boxes to structure the UI, and control how each widget expands and aligns itself with regards to its parent container.

Boxes have an orientation, either horizontal or vertical, and arrange their children on the same row or column, respectively.

Homogeneous boxes

Boxes by default will give each child their desired size depending on the orientation. If you want each child to have the same size, you can use the GtkBox:homogeneous property:

GtkWidget *box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
GtkWidget *hello = gtk_button_new_with_label ("Hello");
GtkWidget *gbye = gtk_button_new_with_label ("Goodbye");

gtk_box_append (GTK_BOX (box), hello);
gtk_box_append (GTK_BOX (box), gbye);

gtk_box_set_homogeneous (GTK_BOX (box), TRUE);

Expanding boxes

Boxes will provide extra space to a child if the child is set to expand:

GtkWidget *box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);

GtkWidget *foo = gtk_button_new_with_label ("Live");
GtkWidget *bar = gtk_button_new_with_label ("Laugh");
GtkWidget *baz = gtk_button_new_with_label ("Love");

gtk_box_append (GTK_BOX (box), foo);
gtk_box_append (GTK_BOX (box), bar);
gtk_box_append (GTK_BOX (box), baz);

// We set the middle button to expand, which will make the
// box expand, if given more space
gtk_widget_set_hexpand (bar, TRUE);

Useful methods for the component

  • The set_baseline_position() method controls the base line alignment of the children of a box; you can specify if the alignment of the children in case the box receive more space by their parent.

API references

In the examples we used the following classes: