Gtk Box Packing

Two useful widgets for packing are HBox, for packing widgets across the screen, and VBox, for packing widgets down the screen. Widgets can be added to these boxes using packStart. Parameters to the box constructor and packStart control how the packed widgets are laid out, and how they change when the containing window changes size.

• HBox/VBox take two parameters:
  1. boolean parameter, homogeneous, to indicate if widgets should all be the same size
  2. integer parameter, spacing, to give the amount of space between widgets
• packStart takes four parameters:
  1. the widget to pack
  2. boolean parameter, expand, to indicate if widgets should expand if there is more space available
  3. boolean parameter, fill, to indicate if widgets should fill the space available to them (only applies if expand is true)
  4. integer parameter, padding, to give the amount of space between widgets

The following program is used for illustration: parameters are changed in the addWidgets method to show different packing behaviours.

# @args -pkg:gtk-sharp-2.0  # remove initial '#'
use Gtk

class DemoWindow inherits Window
    cue init
        base.init("Demo 1")
        .setDefaultSize(200, 100)
        listen .deleteEvent, ref .onDeleteEvent
        .addWidgets

    def addWidgets
        box = HBox(false, 0) # create a box to hold widgets
        button1 = Button("Gtk")
        button2 = Button("is a graphical user interface toolkit")

        box.packStart(button1, false, false, 0) # add button1 to box
        box.packStart(button2, false, false, 0) # add button2 to box
        .add(box) # add the box to our window

    def onDeleteEvent(obj, args as DeleteEventArgs)
        Application.quit

class MainProgram
    def main
        Application.init
        window = DemoWindow()
        window.showAll
        Application.run

Example 1

With the following parameters, the widgets in the box can be different sizes (HBox has homogeneous set to false), and neither button will expand to fill their surrounding space when the window is resized.

box = HBox(false, 0)
box.packStart(button1, false, false, 0)
box.packStart(button2, false, false, 0)

(Window on the left is before resizing, on the right after resizing.)

Example 2

By changing the box definition so homogeneous is true, the two buttons will be allocated the same amount of space.

box = HBox(true, 0)
box.packStart(button1, false, false, 0)
box.packStart(button2, false, false, 0)

(Window on the top is before resizing, on the bottom after resizing.)

Example 3

By packing the first button with a true value for the expand property, the button's area will grow to fill the available space in the window. However, the button itself does not increase in size.

box = HBox(false, 0)
box.packStart(button1, true, false, 0)
box.packStart(button2, false, false, 0)

(Window on the left is before resizing, on the right after resizing.)

Example 4

By packing the first button with a true value for the expand and fill properties, the button will grow to fill the available space in the window.

box = HBox(false, 0)
box.packStart(button1, true, true, 0)
box.packStart(button2, false, false, 0)

(Window on the left is before resizing, on the right after resizing.)

Example 5

Set the spacing parameter for the box to put some space in between the widgets.

box = HBox(true, 20)
box.packStart(button1, true, true, 0)
box.packStart(button2, true, true, 0)

Example 6

Set the padding parameter in packStart to put space on either side of the widget.

box = HBox(true, 0)
box.packStart(button1, true, true, 20)
box.packStart(button2, true, true, 20)

And There's More …

Complex layouts can be managed by nesting boxes, and adjusting the parameters illustrated above.

• packStart packs widgets by starting from the left (for HBox) or top (for VBox) and working to the right (or down).

• packEnd is also available, to start packing from the right or bottom of the container.