Search code examples
gtkvala

Separating Gtk.Grid into two rows


I want to have two "rows" inside of my Gtk.Grid.

Each row will have its elements. The top row will have a couple of labels attached next to each other, while the bottom row is going to have two buttons next to each other. Elements in both rows should be centered on the screen.

I don't have any previous experience in working with Vala, but I thought I can do it like this:

//declaration of the grid
var layout = new Grid ();
layout.orientation = Gtk.Orientation.VERTICAL;

//declaration of labels
...

//attaching of labels
layout.attach (label1, 0, 0, 1, 1);
layout.attach_next_to (label2, label1, Gtk.PositionType.RIGHT, 1, 1);
layout.attach_next_to (label3, label2, Gtk.PositionType.RIGHT, 1, 1);
layout.attach_next_to (label4, label3, Gtk.PositionType.RIGHT, 1, 1);
layout.attach_next_to (label5, label4, Gtk.PositionType.RIGHT, 1, 1);

//declaration of buttons
...

layout.attach (startBtn, 0, 0, 1, 1);
layout.attach_next_to (stopBtn, startBtn, Gtk.PositionType.RIGHT, 1, 1);

But looks like it doesn't work that way. I tried to find some examples, but they all seem to have bunch of code next to it so now I'm exhausted and I still can't find the way to work this out.

EDIT: The result I'm getting is shown below.

enter image description here


Solution

  • Here is a very good article about this topic: http://www.abenga.com/post/2014/11/10/layout-widgets/

    As andlabs pointed out, I would use public void attach (Widget child, int left, int top, int width = 1, int height = 1) http://valadoc.org/#!api=gtk+-3.0/Gtk.Grid.attach1

    layout.attach (label1, 0, 0, 1, 1);
    layout.attach (label2, 1, 0, 1, 1);
    layout.attach (label3, 0, 1, 1, 1);
    layout.attach (label4, 1, 1, 1, 1);
    

    Fore something like this

    -------------------
    | label1 | label2 |
    -------------------
    | label3 | label4 |
    -------------------