In this tutorial, I will discuss the GTK+ box and how to add widgets to it.
GTK+ applications with only one button in them are not very useful. When creating applications,
you’ll want to add more than one widget inside a window. Containers allow us to put more than one
widget into a window. The containers are invisible to you but allow you to place widgets inside them.
In this article, I will discuss the box containers. In future articles, I will cover the Grid, ListBox and StackSwitcher containers.
Boxes are a commonly used container that organise widgets placed in them into a rectangular area.
The widgets in the box can be arranged into either a single row or a single column of child widgets. Adding widgets to a box is referred to as packing. When packing a box, you either pack from the start of the box or pack from the end of the box. In a vertical box, the start is the top of the box and the end is the bottom of the box. For horizontal boxes, packing starts on the left side and ends on the right side of the box. GTK Boxes are horizontal by default.
import gi gi.require_version('Gtk', '3.0') from gi.repository import Gtk class MyWindow(Gtk.Window): def __init__(self): Gtk.Window.__init__(self, title="Containers") # Create the box and add it to the window self.box = Gtk.Box(spacing=10) self.add(self.box) # Create two buttons, connect them to functions to be called when buttons are clicked. self.hello_button = Gtk.Button(label="Hello") self.hello_button.connect("clicked", self.hello_clicked) self.goodbye_button = Gtk.Button(label="Goodbye") self.goodbye_button.connect("clicked", self.goodbye_clicked) # Place buttons inside box. self.box.pack_end(self.hello_button,True, True, 0) self.box.pack_start(self.goodbye_button,True, True, 0) def hello_clicked(self, widget): print("Hello World!") def goodbye_clicked(self, widget): print("Goodbye World!") win = MyWindow() win.connect("delete-event", Gtk.main_quit) win.show_all() Gtk.main()
The code above produces this:
pack_start takes four arguments. A call to
pack_start looks like this:
self.box.pack_start(child, expand, fill, padding)
child is the widget to be packed, or in simpler words, the widget to be placed into the box.
The expand argument controls whether the widgets are laid out in the box to expand and fill in all the extra space in the box(
True)or whether the box should shrink to fit the widgets(
The fill argument determines whether extra space is allocated to the child widgets themselves or as extra padding in the box around the widgets.
padding sets extra space to put between this element and its neighbours.
To switch the positions of the buttons up, use the
pack_end() method to pack the first button in the end position. In the next article, I will cover how to pack widgets onto a window using the Grid container.