Gtk.Window. So how do we get around that to create complex layouts in a Window? We have to add a widget that can contain multiple children. One of those widgets is
Gtk.Grid, let’s stop for a second and take some time to understand Gtk a little better. At the lower level, Gtk has classes that define some pretty abstract traits of widgets such as
Gtk.Orientable. These aren’t widgets that we’re going to use directly in our code, but they’re used as building blocks to create the widgets that we do use. It’s important that we understand this, because it means that when we understand how to add children to a
Gtk.Grid, we also understand how to add children to a
Gtk.Toolbar. Both Grid and Toolbar are widgets that are subclasses of the more abstract class
Gtk.Grid. See that big tree at the top of the page? It shows you every component of Gtk that
Gtk.Gridsubclasses and even what those components subclass. Having a lower level knowledge of Gtk will help you to implement widgets you haven’t worked with before since you will understand how their parent classes work.
Gtk.Grid. Since you’re a master developer now, you can probably set up a new project complete with Meson, push it to GitHub, and create a Flatpak manifest in your sleep. If you want the practice, go ahead and do all of that again. Otherwise, it’s probably convenient for our testing purposes to just play around locally and build from Terminal. So code up a nice
Gtk.Windowwithout anything in it and make sure that builds. Ready? Let’s add a Grid.
Gtk.Grid. As always, don’t copy and paste! Practice makes perfect. We create a new Gtk.Grid like this:
Gtk.Griddoesn’t accept any arguments in the creation method. However, you can still change the grid’s properties (like orientation) as we did on the second line. Here, we’ve declared that when we add widgets to our grid, they should stack vertically.
VERTICALthe labels stack up on top of each other. Try creating a
Gtk.Gridwithout giving it an orientation. By default,
Gtk.Grid’s orientation is horizontal. You really only ever have to give it an orientation if you need it to be vertical.
Gtk.Gridto pack multiple children into a Window. What about using it to lay out some functionality in our app? Let’s try building an app that shows a message when we click a button. Remember in our first “Hello World” how we changed the label of the button with
button.clicked.connect? Let’s use that method again, but instead of just changing the label of the button, we’re going to use it to change an empty label to a message.
row_spacing. We can also add
column_spacing, but since we’re stacking widgets vertically we’ll only see the effect of
row_spacing. Notice how we can create new widgets outside the grid and then pack them into the grid by name. This is really helpful when you start using different methods to change the properties of your widgets.
main_window.add (grid);. In this way, the first portion of our code defines the UI and the next portion defines the functions that we associated with the UI:
Gtk.Gridto create single row or single column layouts with the add method, we can also use it to create row-and-column-based layouts with the
attachmethod. First we’re going to create all the widgets we want to attach to our grid, then we’ll create a new
Gtk.Gridand set both column and row spacing, and finally we’ll attach our widgets to the grid.
attach_next_toto place a widget next to another one on all four sides. Note also that providing the number of rows and columns the widget should span is optional. If you supply only the column and row numbers, Gtk will assume that the widget will span 1 column and 1 row.
Gtk.Gridincluding its orientation and spacing
ellipsize. Don’t forget to play around with the attach method and widgets that span across multiple rows and columns. Remember that Valadoc is super helpful for learning more about the methods and properties associated with widgets.